七、CSS布局模型

发表于 | 更新于: | 分类于 ， |
| 字数: 6k | 时长 ≈ 27 分钟

1 css布局模型

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。

在网页中，元素有三种布局模型：

1
2
3
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

2 流动模型

流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

1
2
3
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

3 浮动模型

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，设置元素浮动就可以实现。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。

如下代码可以实现两个 div 元素一行显示。

1
2
3
4
5
6
7
8
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

当然也可以同时设置两个元素右浮动也可以实现一行显示。

1
2
3
4
5
6
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

设置两个元素一左一右也可以实现一行显示：

1
2
3
4
5
6
7
div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

关于浮动的三个注意事项：

①要浮动，所有兄弟都要浮动

1
两个盒子想要并排，则两个盒子都要设置浮动。不能只设置一个浮动

②一定要把浮动的元素放在一个div中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="up">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<div class="down"></div>

    .up{
            width: 400px;
            height: 200px;
            background-color: #fff;
        }
        .up .box1{
           width: 200px;
           height: 200px;
           background-color:red;
           float: left;
       }
        .up .box2{
           width: 200px;
           height: 200px;
           background-color:blue;
           float: left;
       }
       .down{
           width: 400px;
           height: 200px;
           background-color:orange;
       }

  .up .box1{
           width: 200px;
           height: 200px;
           background-color:red;
           float: left;
       }
        .up .box2{
           width: 200px;
           height: 200px;
           background-color:blue;
           float: left;
       }
       .down{
           width: 400px;
           height: 200px;
           background-color:orange;
       }

③父盒子要有足够空间，否则掉下来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    .up{
            width: 399px;
            height: 200px;
            background-color: rgb(101, 198, 211);
        }
        .up .box1{
           width: 200px;
           height: 200px;
           background-color:red;
           float: left;
       }
        .up .box2{
           width: 200px;
           height: 200px;
           background-color:blue;
           float: left;
       }
       .down{
           width: 400px;
           height: 200px;
           background-color:orange;
       }

3.1 浮动元素双向贴边

浮动的同级元素有距离一样使用margin

浮动元素，都是紧贴相同方向上的上一个元素的贴边

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    .box {
            width: 500px;
            height: 600px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        .box p {
            float:left;
            width:120px;
            height: 80px;
            /* 浮动的同级元素有距离一样使用margin */
            margin-right: 20px;
            margin-bottom: 10px;
            background-color: lightblue;
        }
        .box .fr{
            float:right;
        }

<div class="box">
        <p>1</p>
        <p class="fr">2</p>
        <p>3</p>
        <p class="fr">4</p>
        <p>5</p>
        <p class="fr">6</p>
        <p>7</p>
    </div>

浮动元素双向贴边.png

3.2 浮动元素没有margin塌陷

上下两个浮动的元素，上盒子有一个下margin，下盒子有一个上margin，他们的距离是margin之和。没有垂直方向margin塌陷。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box {
            width: 300px;
            height: 500px;
            border: 1px solid #000;
        }
        .box .no1 {
            float: left;
            width: 200px;
            height: 200px;
            margin-bottom: 50px;
            background-color: blue;
        }
        .box .no2 {
            float: left;
            width: 200px;
            height: 200px;
            margin-top: 80px;
            background-color: pink;
        }

浮动元素没有margin塌陷.png

3.3 浮动元素让出标准流的位置

两个同级的盒子，第一个浮动（脱标），第二个不浮动（标准流）。结果浮动的元素让出标准流的位置，视觉上形成了“压盖”效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
        .box1, .box3 {
            /* 浮动脱离标准流 */
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .box2 {
            /* 不浮动就是标准流 */
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box1">浮动</div>
    <div class="box2">不浮动</div>
    <div class="box3">浮动</div>
</body>

浮动元素让出标准流的位置.png

压盖效果：

不用浮动，用定位实现

总结：

同级元素，要浮动都浮动，要不浮动都不浮动

3.4 字围效果

浮动元素会压盖住标准流，但是文字不会被压盖住，而是在浮动元素一周显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    .box{
            width: 400px;
            height: 500px;
            border: 1px solid #000;
        }
        .box .no1 {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 20px;
            background-color: pink;
        }
        .box p {
            font-size:20px;
            line-height: 40px;
        }

字围效果.png

4 浮动存在的问题

1、浮动的元素不能撑高父盒子的高度（高度自适应）

2、浮动的元素影响后面浮动的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 .box {
            width: 600px;
            /* 不给父盒子添加高度，会被自动撑高 */
            border: 1px solid #000;
        }

 <div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
    <div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>

tIC7lD.png

设置子元素浮动后：

1
2
3
4
5
6
7
 .box p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-right: 10px;
        }

tICH6e.png

5 解决方法（清除浮动）

二流配合：

浮动流、标准流配合

基本布局介绍：

1
2
3
4
5
6
7
8
<div class="box1">我是box1</div>   →标准流的
    <div class="box2">我是box2</div> →标准流的
    <div class="f-box">          →标准流的，内部有浮动的盒子
        <div class="c1"></div>  →浮动的盒子
        <div class="c2"></div>  →浮动的盒子
    </div>
    <div class="box3">我是box3</div>  →标准流的
    <div class="box4">我是box4</div>  →标准流的

我们研究的是如何让内部有浮动的盒子，能够和谐的和别人配合，说白了一句话：

将浮动关住自己内部。

方法一：给父盒子设置高度

1
2
3
4
5
6
7
8
<div class="box1">我是box1</div>   →标准流的
    <div class="box2">我是box2</div> →标准流的
    <div class="f-box"> →标准流的，内部有浮动的盒子 《==设置高度==》
        <div class="c1"></div>  →浮动的盒子
        <div class="c2"></div>  →浮动的盒子
    </div>
    <div class="box3">我是box3</div>  →标准流的
    <div class="box4">我是box4</div>  →标准流的

如果不设置高度，就会乱套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    .box1{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .box2{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .box3{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .box4{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .f-box{
            width: 1000px;
            height: 200px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .f-box .c1{
            float:left;
            width: 300px;
            height: 200px;
            background-color: orange;
        }
        .f-box .c2{
            float:left;
            width: 300px;
            height: 200px;
            background-color: skyblue;
        }

tIP740.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
  .box1{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .box2{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .box3{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .box4{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .f-box{
            width: 1000px;
            
            background-color: #ccc;
            margin: 20px auto;
        }
        .f-box .c1{
            float:left;
            width: 300px;
            height: 200px;
            background-color: orange;
        }
        .f-box .c2{
            float:left;
            width: 300px;
            height: 200px;
            background-color: skyblue;
        }

tIPTNq.png

方法二：给父盒子写overflow：hidden

overflow属性：溢出隐藏处理方法

auto ：溢出滚动。当内容超过盒子高度时，自动出现滚动条，拉动滚动条可以查看全部内容

1
2
3
4
5
6
7
.box {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            border: 1px solid #000;
            overflow: auto;
        }

tIKvrt.png

hidden ： 溢出隐藏（当内容超过盒子高度时，超出部分直接隐藏）

隐藏的是border之外的内容，对于下padding不隐藏

1
2
3
4
5
6
7
8
.box {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            border: 1px solid #000;
            padding: 20px;
            overflow: hidden;
        }

tIKjKI.png

浮动解决：

给父盒子添加overflow：hidden可以完美解决所有的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
            width: 600px;
            margin-bottom: 10px;
            border: 3px solid #000;
            overflow: hidden;
        }
        .box p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-right: 10px;
        }

tIM1z9.png

overflow：hidden两个引申含义（给父盒子添加overflow：hidden）：

1
2
①强制让父盒子检测内部子元素高度，并且将检测到的高度撑高自身
②强制让父盒子管理住浮动的子盒子，不让子盒子影响其他浮动的元素

总结：

1
2
同级元素要浮动都浮动
子盒子浮动，父盒子尽量添加overflow：hidden或height

方法三：clear属性

clear：清除浮动的影响

属性值：

1
2
3
left（清除左浮动的影响）
right（清除右浮动的影响）
both（清除左右浮动的影响）

给父盒子添加clear属性（没必要两个盒子都添加，消除上面4 对下面1 的影响，只需要对下面的盒子添加clear属性）

1
2
3
4
5
    .box {
            width: 600px;
            border: 1px solid #000;
            clear: both;
        }

tIQeld.png

解决了对后面浮动元素的影响

没解决：高度自适应

1
2
3
4
5
6
7
8
<div class="box1">我是box1</div>   →标准流的
    <div class="box2">我是box2</div> →标准流的
    <div class="f-box"> →标准流的，内部有浮动的盒子 
        <div class="c1"></div>  →浮动的盒子
        <div class="c2"></div>  →浮动的盒子
    </div>
    <div class="box3">我是box3</div>  →标准流的 《==设置clear：both==》
    <div class="box4">我是box4</div>  →标准流的

Clear表示“清除”，both表示“全部”

Clear属性用来表示这个盒子不希望自己的哪边出现出现浮动，both表示“两边”

Clear：both 的缺点：

①内部有浮动的父元素现在还是没有高度

② Margin失效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.box1{
           width: 1000px;
           height: 120px;
           background-color: #ccc;
           margin: 20px auto;
       }
.box2{
           width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .box3{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
            clear:both;
        }
        .box4{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .f-box{
            width: 1000px;
            
            background-color: #ccc;
            margin: 20px auto;
        }
        .f-box .c1{
            float:left;
            width: 300px;
            height: 200px;
            background-color: orange;
        }
        .f-box .c2{
            float:left;
            width: 300px;
            height: 200px;
            background-color: skyblue;
        }

tIQ71H.png

方法四：内墙法

在所有浮动元素的最后添加一堵清除了浮动的影响的墙

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    /* 内墙法 */
        .cl {
            /* 清除浮动的影响 */
            clear:both;
        }

 <div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <div class="cl"></div>
    </div>
    <div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <div class="cl"></div>
    </div>

tIl93Q.png

解决：问题都解决了

虽然所有问题都解决了，但是我们不使用这种办法，这种办法给网页结构增加了很多无意义的标签，增大网页加载

1
2
3
4
5
6
7
8
9
<div class="box1">我是box1</div>   →标准流的
    <div class="box2">我是box2</div> →标准流的
    <div class="f-box"> →标准流的，内部有浮动的盒子 
        <div class="c1"></div>  →浮动的盒子
        <div class="c2"></div>  →浮动的盒子
    <div class=”clearfix”></div>          《==clear:both==》
    </div>
    <div class="box3">我是box3</div>  →标准流的
    <div class="box4">我是box4</div>  →标准流的

在有浮动的盒子最后，放一个新盒子，写clear：both

1
2
3
 .f-box .clearfix{
            clear:both;
        }

这个方法没有任何问题，并且给人的感受特别扎实。

Clearfix是约定成俗的类名

为了更加安全：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
    .f-box .clearfix{
            clear:both;
            height: 0;
            overflow: hidden;
        }



    .box1{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .box2{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .box3{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .box4{
            width: 1000px;
            height: 120px;
            background-color: #ccc;
            margin: 20px auto;
        }
        .f-box{
            width: 1000px;
            
            background-color: #ccc;
            margin: 20px auto;
        }
        .f-box .c1{
            float:left;
            width: 300px;
            height: 200px;
            background-color: orange;
        }
        .f-box .c2{
            float:left;
            width: 300px;
            height: 200px;
            background-color: skyblue;
        }
        .f-box .clearfix{
            clear:both;
            height: 0;
            overflow: hidden;
        }
</style>
</head>
    <div class="box1">我是box1</div>
    <div class="box2">我是box2</div>
    <div class="f-box">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="clearfix"></div>
    </div>
    <div class="box3">我是box3</div>
    <div class="box4">我是box4</div>
</body>

tIP740.png

方法五:外墙法

在两个大盒子（父盒子）之间添加一堵（有高度，清除了浮动的）墙

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    /* 外墙法 */
        .cl {
            /* 有高度 */
            height: 10px;
            /* 清除浮动的影响 */
            clear:both;
        }




     <div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
    <!-- 加一堵墙 必须是块级元素 -->
    <div class="cl"></div>
    <div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>

tIljM9.png

解决：对后面的影响（height：10px 视觉上有10px的间隔）

没解决：高度自适应

总结：

子盒子浮动时要看一下父盒子有没有高度或overflow

总结：

1
2
同级元素要浮动都浮动
子盒子浮动，父盒子尽量添加overflow：hidden或height

6 什么是层模型？

CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

1
2
3
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

6.1 层模型–绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

1
2
3
4
5
6
7
8
9
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

绝对定位：

以网页的左上角为坐标轴原点，进行定位

绝对定位的元素脱标，立即释放自己在标准流中的位置

在实际中，一般使用“子绝父相”，即，子元素使用绝对定位，父元素使用相对定位

绝对定位默认是无视父亲的，默认情况下会以网页的左上角进行定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #000;
            width: 300px;
            height: 300px;
            margin: 50px auto;
        }
        div p{
            width: 100px;
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>

tI38fO.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #000;
            width: 300px;
            height: 300px;
            margin: 50px auto;
        }
        div p{
            width: 100px;
            height: 100px;
            background-color:red;
            position: absolute;
            left: 50px;
            top: 70px;
        }

tI8u8S.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #000;
            width: 300px;
            height: 300px;
            margin: 50px auto;
            position: relative;
        }
        div p{
            width: 100px;
            height: 100px;
            background-color:red;
            position: absolute;
            left: 50px;
            top: 70px;
        }

tI8oVI.png

6.2 绝对定位5个用途

压盖、遮罩、垂中、出版心、、运动

###　用途1：压盖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
    <style>
       *{
           margin: 0;
           padding: 0;
       }
       .movie{
           width:1000px;
           margin: 50px auto;
           overflow: hidden;
       }
       .movie ul{
           list-style: none;
       }
       .movie ul li{
           float: left;
           width: 200px;
           text-align: center;
           position: relative;
       }
       .movie ul li .vip{
           position: absolute;
           top:10px;
           right:10px;
           width: 30px;
       }
    </style>
</head>
<body>
    <div class="movie"> 
        <ul>
            <li>
                <img src="images/p1.png" alt="">
                <img class="vip" src="images/vip.png" alt="">
            </li>
            <li><img src="images/p1.png" alt=""></li>
            <li>
                <img src="images/p1.png" alt="">
                <img class="vip" src="images/vip.png" alt="">
            </li>
            <li><img src="images/p1.png" alt=""></li>
            <li>
                <img src="images/p1.png" alt="">
                <img class="vip" src="images/vip.png" alt="">
            </li>
        </ul>
    </div>
</body>

tIGces.png

注意：

li元素要设置相对定位，让所有的VIP图片都能够以自己这个li定位

用途2：遮罩

绝对定位的元素脱标（脱离标准流）了，所以不能设置宽度，宽度不能自动撑满了

遮罩就是给每个元素蒙上一个半透明的盒子。这个盒子一定是绝对定位的，并且top：0；left：0；

默认情况下，HTML代码中后出现的绝对定位的元素，能够压盖住先定位的元素，但是可以用z-index来调整元素位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
    <style>
       *{
           margin: 0;
           padding: 0;
       }
       .movie{
           width:1000px;
           height: 277px;
           margin: 50px auto;
           overflow: hidden;
       }
       .movie ul{
           list-style: none;
       }
       .movie ul li{
           float: left;
           width: 200px;
           position: relative;
       }
       .movie ul li .vip{
           position: absolute;
           top:10px;
           right:10px;
           width: 30px;
       }
       .movie ul li .cover{
           position: absolute;
           width: 196px;
           height: 277px;
           top:0;
           left:0;
           background-color:rgba(0,0,0,0.4);
           color:white;
       }
    </style>
</head>
<body>
    <div class="movie"> 
        <ul>
            <li>
                <img src="images/p1.png" alt="">
                <img class="vip" src="images/vip.png" alt="">
                <div class="cover">诛仙很好看</div>
            </li>
            <li>
                <img src="images/p1.png" alt="">
                <div class="cover">诛仙很好看</div>
            </li>
            <li>
                <img src="images/p1.png" alt="">
                <img class="vip" src="images/vip.png" alt="">
                <div class="cover">诛仙很好看</div>
            </li>
            <li>
                <img src="images/p1.png" alt="">
                <div class="cover">诛仙很好看</div>
            </li>
            <li>
                <img src="images/p1.png" alt="">
                <img class="vip" src="images/vip.png" alt="">
                <div class="cover">诛仙很好看</div>
            </li>
        </ul>
    </div>
</body>

tIJe1S.png

默认情况下，HTML代码中后出现的绝对定位的元素，能够压盖住先定位的元素，但是可以用z-index来调整元素位置:

z-index:999; z-index属性值越大，越能盖住属性值小的

1
2
3
4
5
            <li>
                <img src="images/p1.png" alt="">
                <div class="cover">诛仙很好看</div>
                <img class="vip" src="images/vip.png" alt="">
            </li>

tIJDtx.png

用途3：垂中

水平居中用margin:0 auto;就可以实现，但是垂直居中不是那么好做

垂直居中最简单的方法就是绝对定位

公式就是：

1
2
top:50%;
left:50%;

用margin为负数拉回自己身体宽度、高度的一半

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
*{
      margin: 0;
      padding: 0;
   }
   body{
      background-color: #333;
   }
   .box{
      width: 1000px;
      height: 400px;
      background-color: #fff;
      position: absolute;
      top:50%;
      left:50%;
      margin-left: -500px;
      margin-top: -200px;
   }

用途4：出版心（所有杂碎的东西都用绝对定位做）

一些东西耍宝、卖萌，出了盒子的边框线，此时想都不要想，直接用绝对定位制作！

我们先了解一个绝对定位的性质：

无视父亲的padding

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    <style>
   *{
      margin: 0;
      padding: 0;
   }
   div{
      border: 1px solid #000;
      width: 300px;
      height: 300px;
      margin: 50px auto;
      position: relative;
   }
   div p{
      width: 60px;
      height: 60px;
      background:orange;
      position: absolute;
      top:0;
      left:0;
   }
</style>
</head>
<body>
   <div>
      文字文字文字文字
      <p></p>
   </div>
</body>

tIYa28.png

1
2
3
4
5
6
7
8
 div{
      border: 1px solid #000;
      width: 300px;
      height: 300px;
      margin: 50px auto;
      position: relative;
      padding: 50px;
   }

tIY65q.png

说明绝对定位的元素（案例中的p）无视父亲的padding

即使父亲有padding，此时绝对定位的元素是无视父亲的padding的

6.2 层模型–相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。

相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

如下代码实现相对于以前位置向下移动50px，向右移动100px:

1
2
3
4
5
6
7
8
9
10
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

效果图：
tItyOe.png

什么叫做“偏移前的位置保留不动”呢？

大家可以做一个实验，在右侧代码编辑器的19行div标签的后面加入一个span标签，在标并在span标签中写入一些文字。如下代码：

1
2
3
<body>
    <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>

效果图：
tItxpV.png

从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

6.3 层模型–固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。

由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 *{
    margin: 0;
    padding: 0;
  }
  .header{
    position: fixed;
    /*固定定位脱离文档流，所以div就不能自动撑满*/
    width: 100%;
    height: 60px;
    background-color: #333333;
    top: 0;
    left: 0;
  }
  .content{
    padding-top: 60px;
  }.backtop{
    position: fixed;
    right: 100px;
    bottom: 100px;
    background-color: orange;
    width: 100px;
    height: 100px;
    font-
  }
</style>
</head>
<body>
  <div class="header"></div>
  <div class="backtop">返回顶部</div>
  <div class="content">
    <p>我是第一行</p>
    <p>撑高</p>
    <p>撑高</p>
    <p>撑高</p>
    <p>撑高</p>

tINQ7d.png

6.4 Relative与Absolute组合使用

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，使用position:relative来进行相对定位，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

1
2
3
<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

1
2
3
4
5
#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

1
2
3
4
5
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

7 z-index

默认压盖顺序：

1
2
3
有定位的元素压盖住没有定位的元素

都有定位后面的压盖住前面的

z-index: 自定义压盖顺序：

1
2
3
4
5
6
7
有定位的元素才可以使用z-index（浮动元素不能使用z-index）

属性值是数字，数字越大，压盖顺序越靠上

数值相同，后面的压盖住前面的

父子盒都有z-index，父盒子z-index小，子盒子z-index即使再大也没用（父盒子会带着所有的内部元素一起压盖）
相关文章
点击查看

本文标题:七、CSS布局模型

文章作者:Mango

发布时间:2020年06月10日 - 22:11:49

最后更新:2020年06月10日 - 22:38:10

原始链接:https://mango185.github.io/post/7d18fbbc.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
Mango小站
请多关照
❤️
❤️