前端基础-CSS-04-EW帮帮网

文章目录

6.1. CSS布局的三种机制

布局机制：
1. 标准流
  - 块级元素独占一行，从上向下顺序排列
  - 行内元素按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
2. 浮动
  - 让盒子从普通流中浮动起来，主要作用让多个块级盒子一行显示
3. 定位
  - 让盒子定在浏览器的某一个位置，CSS离不开定位，特别是后面的js特效

6.2. 浮动

概念：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到指定位置
作用：设置多个盒子水平排列成一行，可以实现盒子的左右对齐

语法：

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

注意：
1. 浮动模式会使盒子悬浮起来；之后不占用原来的位置；且会改变元素的display属性，类似转换成行内块
2. 在设置导航栏的时候，一般情况下使用ul>li>a的形式进行布局

代码示例1：

<style>
    .one {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .two {
        width: 300px;
        height: 300px;
        background-color: purple;
    }
</style>

<body>
   <div class="one"></div>
   <div class="two"></div>
</body>

示例效果1：粉色的盒子设置向左浮动，不占用原先的位置，下面的盒子会浮上来

代码示例2：小米官网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除元素默认内外边距 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 清除列表样式 前面的小点*/
        li {
            list-style: none;
        }
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
        }
        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: purple;
        }
        .right {
            float: right;
            width: 992px;
            height: 615px;
            background-color: white;
        }
        .right li {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <img src="images/02.png" alt="">
        </div>

        <div class="right">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </div>
    </div>
</body>
</html>

示例效果2：一共有三层嵌套的盒子

代码示例3：导航栏案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .banner {
            width: 760px;
            height: 150px;
            margin: auto;
        }
        .nav {
            width: 760px;
            height: 32px;
            margin: 0 auto;
            /* repeat-x水平平铺 */
            background: url(images/04.png) repeat-x;
        }
        .nav ul li {
            /* 因为li让文字竖着显示，所以必须给li添加浮动 */
            float: left;
        }
        .nav ul li a {
            /* a是行内元素，需要转换,此时设置宽度高度才会发挥作用 */
            display: block;
            width: 80px;
            height: 32px;
            background: url(images\05.png) no-repeat;
            font-size: 12px;
            color: #40510a;
            /* 取消下划线 */
            text-decoration: none;
            /* 文字上下居中 */
            line-height: 32px;
            /* 文字水平居中 */
            text-align: center;
        }
        .nav ul li a:hover {
            /* 改变背景图片 */
            background: url(images/06.png);
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="images/03.png" alt="">
    </div>

    <div class="nav">
        <ul>
            <li><a href="#">网站首页</a></li>
            <li><a href="#">网站首页</a></li>
            <li><a href="#">网站首页</a></li>
            <li><a href="#">网站首页</a></li>
            <li><a href="#">网站首页</a></li>
            <li><a href="#">网站首页</a></li>
        </ul>
    </div>
</body>
</html>

示例效果3：

6.3. 浮动拓展

浮动元素与父盒子之间的关系
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠，也不会超过父盒子的内边距
浮动盒子与兄弟盒子之间的关系
- 在一个父级盒子中，如果前一个兄弟盒子是浮动的，那么当前盒子会与前一个盒子的顶部对齐
- 如果是普通流的，那么当前盒子会显示在前一个兄弟盒子的下方
注意：浮动只会影响当前盒子或者后面盒子，不会影响前面的标准流；如果一个盒子里面有多个子盒子，而且其中一个盒子浮动了，其他兄弟盒子也应该浮动，防止出现问题

6.4. 清除浮动

原因：因为父盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子的高度为0，就影响下面的标准流盒子
总结：由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，准确的说，并不是清除浮动，而是清除浮动后造成的影响
本质：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流

语法1：

选择器 {clear: 属性值} clear 清除

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

代码示例：

<style>
    .one {
    		width: 500px;
    }
    .damao {
        float: left;
        height: 150px;
        width: 150px;
        background-color: purple;
    }
    .ermao {
        float: left;
        height: 200px;
        width: 200px;
        background-color: skyblue;
    }
    .two {
        height: 200px;
        width: 500px;
        background-color: black;
    }
    .clear {
   		 clear: both;
    }
</style>

<body>
    <div class="one">
        <div class="damao"></div>
        <div class="ermao"></div>
        <div class="clear"></div>
    </div>

    <div class="two"></div>
</body>

示例效果：

语法2：

可以给父级添加：overflow为 hidden | auto | scroll 都可以实现

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

代码示例：

.one {
    width: 500px;
    /* 给父级添加overflow */
    overflow: auto;
}

语法3：使用after伪元素清除浮动

/*使用after伪元素清除浮动*/
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  *zoom: 1;
}

优点：符合闭合浮动思想，结构语义化正确

缺点：由于IE6-7不支持，使用zoom:1触发hasLayout

语法4：使用双伪元素清除浮动

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

优点：代码更简洁

缺点：由于IE6-7不支持，使用zoom:1触发hasLayout

总结：

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

本文含有隐藏内容，请开通VIP 后查看

前端基础-CSS-04

文章目录

6.1. CSS布局的三种机制

6.2. 浮动

6.3. 浮动拓展

6.4. 清除浮动

网站公告

今日签到

热门文章

最新发布