盒子模型（CSS 重点）

盒子模型

CSS 中最核心的三个大模块为：盒子模型、浮动、定位。（这三个必须要精通）

盒子模型 就是把 HTML 页面中的元素看做是一个矩形的盒子，或者是盛放内容的容器。

每个盒子都由元素内容、内边距（padding）、边框（border）和外边距（margin）组成。

网页布局的本质

把网页元素放入盒子中，然后利用 CSS 摆放盒子的过程就是网页布局。

盒子模型（Box Model）

盒子模型=盒子边框+内边距+外边距。

盒子边框（border）

1）、表格的细线边框

基本语法格式: border " border-width border-style border-color
border-style 用于定义边框的样式，取值如下：

取值	含义
`none`	取消边框（忽略所有边框的宽度）
`solid`	边框为单实线（最常用）
`dashed`	边框为虚线
`dotted`	边框为点线
`double`	边框为双实线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v28-CSS多背景图.html</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            border: 2px solid red;
        }
    </style>
</head>
<body bgcolor="#C5ECFF">
<div>
    为盒子设置边框：
    <br/>
    `border: 宽度 样式 颜色`
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v28-CSS多背景图.html</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            /* 下面三行与这一行等价 border: 2px solid red; */
            border-width: 2px;
            border-style: solid;
            border-color: red;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">
<div>
    为盒子设置边框：
    <br/>
    `border: 宽度 样式 颜色`
</div>
</body>
</html>

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

2）、盒子边框总结表

代码	含义
`border:1px solid blue;`	边框宽度为 1px, 颜色为蓝色
`border-width:5px;`	设置边框宽度
`border-style:dashed;`	设置变宽样式为虚线（dotted 为点线）
`border-color:red`	设置边框颜色
`border-bottom: 2px dashed red;`	设置下方的边线为 2px宽，虚线，红色
`border-bottom-width: 3px;`	设置下方边框的宽度
`border-bottom-style: dotted;`	设置下方边框的样式
`border-bottom-color: red;`	设置下方边框的颜色

设置内容	样式属性	常用属性值
上边框	`border-top-style:` 样式 `border-top-width:` 宽度 `border-top-color:` 颜色 `border-top:` 宽度样式颜色
下边框	`border-bottom-style:` 样式 `border-bottom-width:` 宽度 `border-bottom-color:` 颜色 `border-bottom:` 宽度样式颜色
左边框	`border-left-style:` 样式 `border-left-width:` 宽度 `border-left-color:` 颜色 `border-left:` 宽度样式颜色
右边框	`border-right-style:` 样式 `border-right-width:` 宽度 `border-right-color:` 颜色 `border-right:` 宽度样式颜色
样式综合设置	`border-style:` 上边 [ 右边下边左边] ;	none 无（默认值），solid 单实线，dashed 虚线，dotted 点线，double 双实线
宽度综合设置	`border-width:`上边 [ 右边下边左边] ;	像素值
颜色综合设置	`border-color:` 上边 [ 右边下边左边] ;	颜色值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v28-CSS多背景图.html</title>
    <style>
        .user-name {
            /* 下面三行与这一行等价 border: 2px solid red; */
            border-width: 2px;
            border-style: solid;
            border-color: red;
        }

        #other {
            border: 2px dashed red;
        }

        #nick-name {
            border-top-width: 8px;
            border-top-style: solid;
            border-top-color: red;

            border-right-width: 4px;
            border-right-style: dashed;
            border-right-color: blue;

            border-bottom-width: 8px;
            border-bottom-style: dotted;
            border-bottom-color: orange;

            border-left-width: 8px;
            border-left-style: double;
            border-left-color: green;
        }

        #nick-name2 {
            border-top: 4px solid red;
            border-right: 8px dotted blue;
            border-bottom: 4px dashed green;
            border-left: 8px double orange;
        }

        input {
            border-width: 4px 8px 4px 8px;
            border-style: solid dashed dotted double;
            border-color: green orange blue red;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">
用户名：<input type="text" class="user-name"/> <br/><br/>
昵 称：<input type="text" id="nick-name"/><br/><br/>
昵 称2：<input type="text" id="nick-name2"/><br/><br/>
密 码：<input type="password"/><br/><br/>
备 注: <input type="text" id="other">
</body>
</html>

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

3）、表格的细线边框（合并表格边框）

HTML 中表格的边框很粗，通过 CSS 的一个属性即可设置。

即：table { border-collapse : collapse; }，该语句表示合并边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v13-合并细线表格.html</title>
    <style>

        td {
            border: 2px solid red;
        }

        table {
            border-collapse: collapse;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">

<!--设置了  border-collapse 之后，<table cellspacing="0" > 中的 cellspacing 可以省略，不省略的话，即便设置了也不生效-->
<table>
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
</table>
</body>
</html>

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

合并之后的效果：

未合并的效果:

4）、圆角边框--`border-radius`（CSS3）

基本格式为: border-radius: 左上角右上角右下角左下角 或 border-radius : 角度 ，

取值可以是绝对值 px ,也可以是相对于宽高的百分比。
写四个值表示：分别设置左上角右上角右下角左下角
写三个值表示：左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值
写两个值表示：左上和右下使用第一个值，右上角和左下使用第二个值
写一个值表示：四个角使用同样的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v14-圆角边框.html</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            border: 1px solid red;
            font-size: 12px;
        }

        div:first-child {
            border-radius: 50px;
        }

        div:nth-child(2) {
            border-radius: 50%;
        }

        div:nth-child(3) {
            border-radius: 10% 50%;
        }

        div:nth-child(4) {
            border-radius: 10% 30% 20%;
        }

        div:nth-child(5) {
            border-radius: 10% 30% 50% 70%;
        }

        div:nth-last-child(3) {
            border-radius: 0 20% 0 20%;
        }

        div:nth-last-child(2) {
            border-radius: 50%;
            height: 50px;
            width: 150px;
        }

        div:last-child {
            height: 40px;
            width: 200px;
            border-radius: 40px;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">
<div>角度可以设置为具体的值：50px</div>
<div>角度可以设置为百分比：50%</div>
<div>设置两个角度值：10% 50%</div>
<div>设置三个角度值：10% 50% 20%</div>
<div>设置四个角度值：10% 30% 50% 70%</div>
<div>设置四个角度值： 0 20% 0 20%;</div>
<div>高度为 50px, 宽度 150px , radius 为 50%</div>
<div>高度为 40px , radius 为 40px, 角度和高度一致时，显示椭圆形效果</div>
</body>
</html>

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

内边距（padding)

1）、内边距

padding 用于设置内边距，即边框与内容之间的距离。

属性	含义
`padding-top`	上侧内边距
`padding-right`	右侧内边距
`padding-bottom`	底部内边距
`padding-left`	左侧内边距
`padding`	全部边距

padding 后面值的个数与含义

值的个数	含义
4 个值	上方内边距右方内边距底部右边距左侧内边距
3 个值	上方内边距左右内边距底部内边距
2 个值	上下内边距左右内边距
1 个值	设置全部的内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v15-盒子内边距.html</title>
    <style>
        div {
            width: 200px;
            height: 50px;
            border: 1px solid red;
            font-size: 12px;
            border-radius: 10px;
        }

        div:first-child {
            padding-left: 20px;
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 10px;
        }

        div:nth-child(2) {
            padding: 10px 20px;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">
<div>使用：padding-left/right/top/bottom 设置padding</div>
<div>使用 padding 设置 padding</div>
</body>
</html>

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

2）、FireWorks 测量和取色

使用 滴管工具取色
使用 切片 工具测量宽高

3)、新浪导航案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v15-盒子内边距.html</title>
    <style>
        nav {
            border-top: 3px solid orange;
            border-bottom: 1px solid #c3c3c3;
        }

        nav a {
            text-decoration: none;
            font-size: 14px;
            color: #3e3e3e;
            padding: 0px 10px;
            /* height 和 line-height 一致，并且只有一行文本时，才能实现水平和垂直居中*/
            height: 44px;
            line-height: 44px;
            text-align: center;
            /* 将 行内元素转换为 行内块元素，这样设置宽高才有效*/
            display: inline-block;
        }

        nav a:hover {
            background-color: #cccccc;
        }


    </style>
</head>
<body bgcolor="#C5ECFF">

<nav>
    <a href="#">两字</a>
    <a href="#">三个字</a>
    <a href="#">四个字啊</a>
    <a href="#">五个字啊啊</a>
</nav>
</body>
</html>

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

margin 的设置

代码	含义
`margin:32px;`	同时设置四个方向的 margin
`margin-top:32px;`	设置顶部 margin
`margin-bottom:32px;`	设置底部 margin
`margin-left:32px;`	设置左侧 margin
`margin-right:32px;`	设置右侧 margin
`margin:16px 32px 16px 32px;`	同时设置上、右、下、左侧的 margin
`margin:16px 32px;`	设置上下侧的 margin 为 16px，右左侧的 margin 为 32px

`box-sizing`

取值	含义
`content-box`	默认值，盒子的大小会随着 padding 和 border 的变化而变化，此时的 width 和 height 仅指内容的宽高
`border-box`	此时 width 和 height 是指盒子的宽高，包含 border 和 padding，此时盒子的大小就不会变化

垂直外边距折叠（Collapsing margins）

参考：collapsing-margins (opens new window)

常见有：紧邻兄弟元素外边距的折叠、父子元素外边距的折叠等

<head>
    <meta charset="UTF-8" />
    <style>
        ul>li {
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <ul>
        <li>垂直外边距折叠——紧邻兄弟元素</li>
        <li>垂直外边距折叠——紧邻兄弟元素</li>
        <li>垂直外边距折叠——紧邻兄弟元素</li>
    </ul>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

显示效果：

通过浏览器查看合并效果，如下图：

display 属性

Web 开发技术/CSS（层叠样式表）/display (opens new window)

重点掌握的取值有：inline、block、inline-block、none

块级元素（`block-level`）

每个块元素通常会独自占一整行或多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有 <h1>~<h6>、 <p>、 <div>、 <ul>、 <ol> 、<li>

块级元素的特点如下：

总是从新行开始
高度、行高、外边距以及内边距都可以控制
宽度默认是容器的 100%
可以容纳内联元素和其他块元素

行内元素（`inline-level`）

行内元素 也叫 内联元素 ，不占有独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐方式等属性，常用于控制页面中文本的样式。

常见的行内元素有：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、 <u>、<span> 等。

行内元素的特点：

和相邻行内元素在一行上
高、宽无效，但水平方向的 padding 和 margin 可以设置，垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或者其他行内元素。（<a> 标签除外）

注意:

只有文字才能组成段落，因此 <p> 内不能放块级元素，同理，还有 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<dt> ，他们都是文字类块级标签，里面不能再放其他块级元素
链接内部不能再放链接

行内块元素（`inline-block`）

在行内元素中，有几个特殊的标签 <img/>、<input/>、<dt>, 可以对他们设置宽高和对齐属性，有些资料中会把他们称为 行内块元素。

行内块元素的特点有：

和相邻行内元素（行内块）在同一行，但是之间会有空白间隙
默认宽度就是它本身内容的宽度
高度、行高、外边距以及其内边距均可以控制

标签显示模式转换

块转行内：display:inline;
行内转块：display:block;
块、行内元素转为行内块：display:inline-block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-显示模式</title>
    <style>
        div {
            /*div 是块级元素，强制转为行内元素*/
            display: inline;
        }

        span {
            /*span 是行内元素。强制改为 块元素*/
            display: block;
        }

        a {
            /*强制修改 行内元素 为 行内块元素*/
            display: inline-block;
            width: 150px;
        }
    </style>
</head>
<body bgcolor="#C5ECFF">

<div>div是块元素</div>
<div>div是块元素</div>
<div>div是块元素</div>

<span>span是行内元素</span>
<span>span是行内元素</span>
<span>span是行内元素</span>

<a href="#">a是行内元素</a>
<a href="#">a是行内元素</a>
<a href="#">a是行内元素</a>

</body>
</html>

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

显示效果:

通过 display 转换行内元素和块级元素

转为 block 块级元素1

<head>
    <meta charset="UTF-8" />
    <style>
        #a3 {
            display: block;
        }
    </style>
</head>

<body>
    <a id="a1" href="">这是一个 a 标签1</a>
    <a id="a2" href="">这是一个 a 标签2</a>

    <a id="a3" href="">这是一个 a 标签3</a>

    <a id="a4" href="">这是一个 a 标签4</a>
    <a id="a5" href="">这是一个 a 标签5</a>

</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

a 标签是一个行内元素，也就是说，默认情况下，多个 a 标签是在一行显示的。

我们为上面的 a3 设置了 display:block 之后，a 就变成了块级元素，也就是说，id 为 a3 的 a 标签会独占一行，如下图：

转为 block 块级元素2

<head>
    <meta charset="UTF-8" />
    <style>
        #a3 {
            /* 只有将行内元素变为 block 块级元素后，才可以设置块级元素的相关属性：宽、高、margin 等 */
            display: block;
            width: 250px;
            height: 80px;
            background-color: aquamarine;
            margin: 20px;
        }
    </style>
</head>

<body>
    <a id="a1" href="">这是一个 a 标签1</a>
    <a id="a2" href="">这是一个 a 标签2</a>

    <a id="a3" href="">这是一个 a 标签3</a>

    <a id="a4" href="">这是一个 a 标签4</a>
    <a id="a5" href="">这是一个 a 标签5</a>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果如下：

转为 inline-block 行内块元素

<head>
    <meta charset="UTF-8" />
    <style>
        #a3 {
            /* 只有将行内元素变为 block 块级元素后，才可以设置块级元素的相关属性：宽、高、margin 等 */
            display: inline-block;
            width: 250px;
            height: 80px;
            background-color: aquamarine;
            margin: 20px;
        }
    </style>
</head>

<body>
    <a id="a1" href="">这是一个 a 标签1</a>
    <a id="a2" href="">这是一个 a 标签2</a>

    <a id="a3" href="">这是一个 a 标签3</a>

    <a id="a4" href="">这是一个 a 标签4</a>
    <a id="a5" href="">这是一个 a 标签5</a>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果如下：

通过 display:none 实现隐藏

<head>
    <meta charset="UTF-8" />
    <style>
       #li3{
        	/* 为块级元素设置 none 后，可以实现隐藏 */
           display: none;
       }
    </style>
</head>

<body>
    <ul>
        <li>第1行</li>
        <li>第2行</li>
        <li id="li3">第3行</li>
        <li>第4行</li>
    </ul>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果如下:

查看 display

查看 display 的方式如下：

从浏览器临时修改 display 并查看效果：

背景相关的属性

属性	含义
`background-color:`	背景颜色
`background-image`	背景图片
`background-repeat`	背景重复平铺模式
`background-position`	背景的位置
`background-size`	背景大小
`background`	综合写法

`background-repeat` 和 `background-position`

<head>
    <meta charset="UTF-8" />
    <style>
        body {
            height: 300px;
            /* 将背景设置为在线图片 */
            background-image: url('http://img5.imgtn.bdimg.com/it/u=1575754275,563397194&fm=26&gp=0.jpg');
            /* repeat--平铺(默认值)，no-repeat 不平铺 */
            background-repeat: no-repeat;
            /* 第一个值还可以是 left、right, 第二个值还可以为 top、bottom */
            background-position: center center;
            /* 相对于当前容器 x 轴 30%,y 轴 50% 的位置   */
            /* background-position: 30% 50%; */
            /* 还可以是相对于左上角的具体坐标值 */
            /* background-position: 100px 100px; */
        }
    </style>
</head>

<body>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果如下：

`background-size`

取值	含义
`background-size: auto;`	默认值，图片有多大就显示多大
`background-size: contain;`	等比缩放，直到宽高中有一项满屏（图片还能显示全）
`background-size: cover;`	等比缩放，宽高都铺满为止（图片可能会显示全）

还可以取百分比或具体数值，如下：

<head>
    <meta charset="UTF-8" />
    <style>
        body {
            height: 300px;
            background-image: url('http://img5.imgtn.bdimg.com/it/u=1575754275,563397194&fm=26&gp=0.jpg');
            background-repeat: no-repeat;
            background-position: center center;
            /* 指定具体数值 */
            /* background-size: 100px 300px; */
            /* 基于控件宽高尺寸设置背景的大小 */
            background-size: 50% 30%;
        }
    </style>
</head>

<body>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

运行效果如下：

``background`

<head>
    <meta charset="UTF-8" />
    <style>
        body {
            height: 300px;
            /* 分别设置了 image、repeat、position、color */
            background: url('http://img5.imgtn.bdimg.com/it/u=1575754275,563397194&fm=26&gp=0.jpg') no-repeat center center #ffc;
            /* background-size 需要单独定义 */
            background-size: contain;
        }
    </style>
</head>

<body>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行效果如下：

CSS布局

CSS 布局概述和实例

Web 开发技术 > CSS（层叠样式表）> 布局模式 (opens new window)

CSS 布局模式，有时简称为布局，是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。有以下几种形式：

块布局：用来布置文件。块布局包含以文档为中心的功能，例如浮动元素或将其放置在多列上的功能。
行内布局：用来布置文本。
表格布局：用来布置表格。
定位布局：用来对那些与其他元素无交互的定位元素进行布置。
弹性盒子布局：用来布置那些可以顺利调整大小的复杂页面。
网格布局：用来布置那些与一个固定网格相关的元素。

浮动与清除

浮动-float

浮动的作用是让原本垂直排列的内容实现水平排列

未使用浮动时的原始效果：

<head>
    <meta charset="UTF-8" />
    <style>
        div {
            width: 500px;
            background-color: #ffc;
        }
        
        #p1 {
            width: 75px;
            height: 150px;
            margin: 0px;
            background-color: pink;
        }
        
        #p2 {
            width: 150px;
            height: 75px;
            margin: 0px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
    </div>
</body>

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

上述代码中，未使用浮动，所以对于块级元素 p1 和 p2 是垂直排列的，如下图：

为 p1 使用浮动 float 之后，效果如下：

<head>
    <meta charset="UTF-8" />
    <style>
        div {
            width: 500px;
            background-color: #ffc;
        }
        
        #p1 {
            width: 75px;
            height: 150px;
            margin: 0px;
            float: left;
            background-color: pink;
        }
        
        #p2 {
            margin: 0px;
            width: 150px;
            height: 75px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
    </div>
</body>

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

都使用左浮动

当 p1 和 p2 都使用左浮动之后，他们就变成了左右排列。因为在 div 中先定义的 p1 然后定义的 p2 ，所以，p1 在左，p2 在右。

此时，由于 p1 和 p2 都从 div 中浮出来了，所以 div 中没有需要展示的元素了，其高度就变成了 0，所以我们看不到浅黄色的 div 区域了。

一左一右的浮动

我们把 p1 设置为右浮动时，p1 就跑到了 div 区域的最右侧，p2 在 div 的最左侧。

也就是说，右浮动时会受限于父元素的宽度。

全都右浮动

全都右浮动时会从右向左排列，右侧起点受限于父元素的宽度——即不会超过父元素的最右侧

清除-clear

清除的作用是让添加了浮动效果的元素在其父级元素中依旧占位，避免因为浮动而遮挡了其他未浮动的元素。

在下面的代码中，p3 没有使用浮动，所以它会从父元素 div 的左上角开始摆放，直接父元素的最右端。而 p1 和 p2 使用了浮动，所以，p1 和 p2 会遮挡部分 p3 的部分区域。

<head>
    <meta charset="UTF-8" />
    <style>
        div {
            width: 500px;
            background-color: #ffc;
        }
        
        #p1 {
            width: 75px;
            height: 150px;
            margin: 0px;
            float: left;
            background-color: pink;
        }
        
        #p2 {
            margin: 0px;
            width: 150px;
            height: 75px;
            float: right;
            background-color: greenyellow;
        }
        
        #p3 {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p id="p3">p3</p>
    </div>
</body>

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

给未使用浮动的元素添加 clear:left 属性

上图中，p3 没有使用浮动，所以要给它添加 clear:left 属性，然后就可以让使用 float:left 的元素在父元素中占位，所以，p3 就会摆放在该元素的下方。

给未使用浮动的元素添加 clear:right 属性

上图中，为 p3 添加 clear:right 属性之后，它就会摆放在 p2 的下方。但是，由于 p1 比 p2 高，所以，p1 会遮挡 p3 的部分区域。

clear:both

如上图 clear:both 之后就不会遮挡内容了

让父元素围住浮动的子元素

让父元素围住浮动子元素的目的是为了避免布局错乱，如下：

<head>
    <meta charset="UTF-8" />
    <style>
        #div1 {
            width: 500px;
            background-color: #ffc;
        }
        
        #div2 {
            width: 500px;
            background-color: #cff;
        }
        
        #p1 {
            width: 75px;
            height: 150px;
            margin: 0px;
            float: left;
            background-color: pink;
        }
        
        #p2 {
            margin: 0px;
            width: 75px;
            height: 175px;
            float: right;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div id="div1">
        <p id="p1">p1</p>
        <p id="p2">p2</p>
    </div>

    <div id="div2"> div2 </div>
</body>

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

上述代码的运行效果如下：

在上面的示例中，由于 div1 中的两个子元素都使用了 float 属性，所以，div1 的高度会变成 0，那么，div2 在摆放时就会从 body 的 (0,0) 位置开始。从而导致 div2 的部分内容被 p1 和 p2 遮挡了。

`overflow:hidden`

让父布局也浮动

添加空的子元素，并设置 clear

在现有浮动元素的后面添加空的子元素，并设置其 clear:both

添加虚拟子元素

完整代码如下：

<head>
    <meta charset="UTF-8" />
    <style>
        #div1::after {
            /* 在 div1 默认追加虚拟元素 */
            content: ".";
            /* 为新追加的虚拟元素设置 clear 属性 */
            clear: both;
            /* 只有块级元素才可以设置 clear */
            display: block;
            /* 追加的虚拟元素内容不需要显示 */
            visibility: hidden;
            /* 让追加的虚拟元素不占位 */
            height: 0px;
        }
        
        #div1 {
            width: 500px;
            background-color: #ffc;
        }
        
        #div2 {
            width: 500px;
            background-color: #cff;
        }
        
        #p1 {
            width: 75px;
            height: 150px;
            margin: 0px;
            float: left;
            background-color: pink;
        }
        
        #p2 {
            margin: 0px;
            width: 75px;
            height: 175px;
            float: right;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div id="div1">
        <p id="p1">p1</p>
        <p id="p2">p2</p>
    </div>

    <div id="div2"> div2 </div>
</body>

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

实际应用中推荐使用这种添加虚拟子元素的方式，但通常是通过类选择器实现：

.clearFix::after {
            /* 在 div1 默认追加虚拟元素 */
            content: ".";
            /* 为新追加的虚拟元素设置 clear 属性 */
            clear: both;
            /* 只有块级元素才可以设置 clear */
            display: block;
            /* 追加的虚拟元素内容不需要显示 */
            visibility: hidden;
            /* 让追加的虚拟元素不占位 */
            height: 0px;
        }

1
2
3
4
5
6
7
8
9
10
11
12

基于浮动的布局 demo

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        div {
            width: 100%;
            overflow: hidden;
            background-color: #ffc;
        }
        
        #p1 {
            width: 75px;
            height: 150px;
            float: left;
            background-color: pink;
        }
        
        #p2 {
            margin-left: 85px;
            margin-right: 85px;
            height: 160px;
            background-color: blue;
        }
        
        #p3 {
            width: 75px;
            height: 175px;
            float: right;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p3">p3</p>
        <p id="p2">p2</p>
    </div>
</body>

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

运行效果如下：

定位详解--position

position 的取值：

取值	含义
static	不启用定位功能
relative	相对定位
absolute	绝对定位
fixed	固定定位

相对定位

基本示例

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        div {
            width: 100%;
            overflow: hidden;
            background-color: #ffc;
        }
        
        #p1 {
            width: 75px;
            height: 80px;
            background-color: pink;
        }
        
        #p2 {
            height: 80px;
            position: relative;
            left: 20px;
            top: 30px;
            width: 75px;
            background-color: blue;
        }
        
        #p3 {
            width: 75px;
            height: 80px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p id="p3">p3</p>
    </div>
</body>

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

效果如下：

上面的示例代码中，为 p2 设置了 position:relative 之后，表示其启用相对定位。然后设置的 left:20px; right:30px 才会生效，表示相对于左侧控件 20px，相对于上方控件 30px。

但，如上图，我们需要注意，为 p2 启动相对定位并设置了相应的间距之后，p3 并没有随之下移，而是被 p2 给遮盖了。

通过定位让被遮挡的内容显示在上层

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        div {
            width: 100%;
            overflow: hidden;
            background-color: #ffc;
        }
        
        #p1 {
            width: 75px;
            height: 80px;
            background-color: pink;
        }
        
        #p2 {
            height: 80px;
            width: 75px;
            background-color: blue;
        }
        
        #p3 {
            width: 75px;
            height: 80px;
						margin-top: -30px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p id="p3">p3</p>
    </div>
</body>

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

如上图，由于为 p3 设置了 margin-top:-30px , 所以 p3 会整体上移，从而覆盖了 p2 的内容。为了让 p2 的内容能够显示出来，我们可以为 p2 启用定位——启用定位的控件会优先渲染。如下：

 #p2 {
            height: 80px;
            width: 75px;
            position: relative;
            background-color: blue;
        }

1
2
3
4
5
6

效果如下：

`z-index`

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        div {
            width: 100%;
            overflow: hidden;
            background-color: #ffc;
        }
        
        #p1 {
            width: 75px;
            height: 80px;
            background-color: pink;
        }
        
        #p2 {
            height: 80px;
            width: 75px;
            position: relative;
            background-color: blue;
        }
        
        #p3 {
            width: 75px;
            position: relative;
            height: 80px;
            margin-top: -30px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p id="p3">p3</p>
    </div>
</body>

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

效果如下：

在上述示例中，我们将 p2 和 p3 都启用的定位功能，此时他们会按照 body 中定义的顺序进行渲染，所以，p3 又盖住了 p2 的部分内容。此时，我们可以通过 z-index 调整 p2 和 p3 的渲染顺序，取值大的渲染层级高（即后渲染）。如下：

 #p2 {
            height: 80px;
            width: 75px;
            position: relative;
            background-color: blue;
            z-index: 3;
        }
        
        #p3 {
            width: 75px;
            position: relative;
            height: 80px;
            z-index: 2;
            margin-top: -30px;
            background-color: greenyellow;
        }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果如下:

绝对定位

基本使用

未启动定位时普通排列的三个 p 标签：

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        div {
            width: 100%;
            overflow: hidden;
            background-color: #ffc;
        }
        
        #p1 {
            width: 40px;
            height: 80px;
            background-color: pink;
        }
        
        #p2 {
            height: 80px;
            width: 40px;
            background-color: blue;
        }
        
        #p3 {
            width: 80px;
            height: 40px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p id="p3">p3</p>
    </div>
</body>

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

为 p2 启动绝对定位：

 #p2 {
            height: 80px;
            width: 40px;
            position: absolute;
            background-color: blue;
        }

1
2
3
4
5
6

在上面的示例中，我们为 p2 设置了 position: absolute; 之后，它会浮在上层，从而覆盖了 p3 的部分内容，也就是说，绝对布局的效果与 float 浮动一样，都会从父布局中浮动出来。

绝对定位的参照物

绝对布局在摆放时，会以启用了定位功能的上层布局（含父布局、爷爷布局、html 跟布局，直到浏览器最外层与浏览器窗口同等大小的首屏区域--但不是浏览器窗口）为参照物。

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        div {
            width: 100%;
            overflow: hidden;
            background-color: #ffc;
        }
        
        #p1 {
            width: 40px;
            height: 80px;
            background-color: pink;
        }
        
        #p2 {
            height: 80px;
            width: 40px;
            position: absolute;
            left: 20px;
            top: 20px;
            background-color: blue;
        }
        
        #p3 {
            width: 80px;
            height: 40px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p id="p3">p3</p>
    </div>
</body>

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

上述代码中，因为 p2 的父布局、爷布局等都没有启用定位，所以，会以最顶层的首屏区域为定位参照物。

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        div {
            margin: 50px;
            width: 100%;
            overflow: hidden;
            position: relative;
            background-color: #ffc;
        }
        
        #p1 {
            width: 40px;
            height: 80px;
            background-color: pink;
        }
        
        #p2 {
            height: 80px;
            width: 40px;
            position: absolute;
            left: 20px;
            top: 20px;
            background-color: blue;
        }
        
        #p3 {
            width: 80px;
            height: 40px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p id="p3">p3</p>
    </div>
</body>

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

效果如下：

上述代码中，因为 p2 的父层布局 div 启动了 position:relative ，所以，p2 的绝对定位就会以 div 为参照物。

固定定位-fixed

基本使用

下面的代码是未启动定位时的效果：

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        div {
            width: 100%;
            overflow: hidden;
            background-color: #ffc;
        }
        
        #p1 {
            width: 40px;
            height: 250px;
            background-color: pink;
        }
        
        #p2 {
            height: 80px;
            width: 40px;
            left: 20px;
            top: 20px;
            background-color: blue;
        }
        
        #p3 {
            width: 80px;
            height: 40px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p id="p3">p3</p>
    </div>
</body>

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

设置 p2 的定位模式为 fixed :

 #p2 {
            height: 80px;
            width: 40px;
            position: fixed;
            top: 30px;
            background-color: blue;
        }

1
2
3
4
5
6
7

效果如下：

fixed 与 absolute 的区别

fixed 和 absolute 都可以实现浮动，二者的区别在于:

设置 fixed 后，元素的位置使用固定，不会随着界面的滚动而滚动
设置 absolute 之后，元素的位置是相对于父布局的，会随着界面的滚动而发生滚动。

绝对定位的应用 demo

绝对定位通常用于组件的局部布局。

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        ul {
            background-color: #ffc;
            width: 300px;
        }
        
        li {
            background-color: rgb(4, 168, 113);
            color: #fff;
            height: 60px;
            margin-bottom: 10px;
            line-height: 60px;
        }
    </style>
</head>

<body>
    <div>
        <h4>请勾选已经读过的书：</h2>
            <ul>
                <li> 11111 <input type="checkbox" /></li>
                <li>2222222 <input type="checkbox" /></li>
                <li>3333333333 <input type="checkbox" /></li>
            </ul>
    </div>
</body>

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

效果如下：

上述代码中， 111111、222222、333333 是书名，我们发现，checkbox 紧随其后，这样排列不整齐，我们希望能够让 checkbox 统一靠右对齐，并实现垂直居中。

通过 float 浮动实现

 <style>
        /* 其他省略 */
        
        input[type="checkbox"] {
            float: right;
            width: 20px;
            height: 20px;
            margin-right: 40px;
            /* li 的高度为 60，checkbox 也设置了宽高 20px，所以，margin-top 后，可以垂直居中 */
            margin-top: 20px;
        }
    </style>

1
2
3
4
5
6
7
8
9
10
11
12

显示效果如下：

通过绝对定位实现

<style>
 li {
            background-color: rgb(4, 168, 113);
            color: #fff;
            height: 60px;
            margin-bottom: 10px;
            line-height: 60px;
            position: relative;
        }
        
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            /* 父布局 li 启用了相对定位，所以该绝对定位会生效 */
            position: absolute;
            /* 距离父布局顶部 20px */
            top: 20px;
            /* 距离父布局右侧 40px */
            right: 40px;
        }
  </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

显示效果（同浮动方式实现效果一致)：

固定定位的应用 demo

需要实现的效果是，让指定元素固定的显示在指定的位置——不论屏幕区域的内容是否滚动，它的位置都固定。

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        ul {
            background-color: #ffc;
            width: 300px;
        }
        
        li {
            background-color: rgb(4, 168, 113);
            color: #fff;
            height: 60px;
            margin-bottom: 10px;
            line-height: 60px;
            position: relative;
        }
        
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            /* 父布局 li 启用了相对定位，所以该绝对定位会生效 */
            position: absolute;
            /* 距离父布局顶部 20px */
            top: 20px;
            /* 距离父布局右侧 40px */
            right: 40px;
        }
        
        button {
            width: 60px;
            height: 60px;
            position: fixed;
            right: 20px;
            /* 让按钮的上边缘居于屏幕高度的 1/2 */
            top: 50%;
            /* button 高度为 60，所以上移 30px 配合上面的 top:50% 即可实现完全垂直居中 */
            margin-top: -30px;
        }
    </style>
</head>

<body>
    <div>
        <h4>请勾选已经读过的书：</h2>
            <ul>
                <li> 11111 <input type="checkbox" /></li>
                <li>2222222 <input type="checkbox" /></li>
                <li>3333333333 <input type="checkbox" /></li>
            </ul>
            <button>我要反馈</button>
    </div>
</body>

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

效果如下：

如上图，我们发现，不论窗口有多高，button 固定的都处于垂直居中的位置。

http://autoprefixer.github.io/)

Grid 布局简介-实现一个简单 Grid 系统

最终要实现的效果为：

基础代码：

<head>
    <meta charset="UTF-8" />
    <title>position details </title>
    <style>
        .clearfix::after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
        }
        
        .wrapper {
            width: 1100px;
            margin: 0 auto;
            background: #eeeeee;
        }
        
        .col {
            font-size: 50px;
            width: 70px;
            text-align: center;
            background: lightblue;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>
            <div class="col">7</div>
            <div class="col">8</div>
            <div class="col">9</div>
            <div class="col">10</div>
            <div class="col">11</div>
            <div class="col">12</div>
        </div>
        <div class="row">
            <div class="col">A</div>
            <div class="col">B</div>
            <div class="col">C</div>
            <div class="col">D</div>
        </div>
    </div>
</body>

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

效果如下：

通过浮动实现

先实现上下两行排列

.col {
            font-size: 50px;
            width: 70px;
            text-align: center;
            background: lightblue;
            float: left;
            /* 最终效果图中每个数字左右都有间距，共13个，所以，(总宽度-12数字*单个数字宽度）/13=单个数字的单侧间距 */
            margin-left: 20px;
        }

1
2
3
4
5
6
7
8
9

让父布局 wrapper 包裹子内容（让字内容摆放在父布局的灰色背景上）

 <div class="wrapper clearfix">
 	<!--其他内容省略-->
 </div>

1
2
3

通过修改单元格的宽度实现跨越多列

.span2 {
    /* 两个单元格的宽度+1个间距宽度 */
    width: 160px;
}

.span3 {
    /* 三个单元格宽度+2个间距 */
    width: 250px;
}

.span6 {
    /* 6个单元格宽度+5个间距 */
    width: 520px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="row">
     <div class="col">A</div>
     <div class="col span2">B</div>
     <div class="col span3">C</div>
     <div class="col span6">D</div>
</div>

1
2
3
4
5
6

上述代码虽然能实现预定效果，但宽度都是固定的，每当宽度变化时都要修改布局，不灵活，所以，通常使用三方框架实现网格效果。

CSS Grid Layout

因为兼容性问题，原视频中没有详细介绍，后期可以自行点击该链接查看：CSS Grid Layout Module Level 1 (opens new window)

其对个浏览器的兼容情况如下： (opens new window)

Boostrap Grid 系统应用 demo

视频基于 https://getbootstrap.com/docs/3.4/css/ 中的 Grid system 讲解 (opens new window)

Boostrap 是响应式的、流式的、对移动端有良好兼容的一个 Grid 框架。

通过 Boostrap 实现 4.12 中的网格效果

基础代码

<head>
    <meta charset="UTF-8" />
    <title>前端攻城狮</title>
    <!-- 引用三方框架 -->
    <link rel="stylesheet" type="text/css" href="bootstrap-lib/css/bootstrap.css">
    <style>
        .wrapper {
            background: #eeeeee;
        }
        
        .col {
            font-size: 50px;
            text-align: center;
            background: lightblue;
        }
    </style>
</head>

<body>
    <div class="wrapper clearfix">
        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>
            <div class="col">7</div>
            <div class="col">8</div>
            <div class="col">9</div>
            <div class="col">10</div>
            <div class="col">11</div>
            <div class="col">12</div>
        </div>
        <div class="row">
            <div class="col">A</div>
            <div class="col span2">B</div>
            <div class="col span3">C</div>
            <div class="col span6">D</div>
        </div>
    </div>
</body>

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

效果如下：

实现网格效果

<head>
    <meta charset="UTF-8" />
    <title>前端攻城狮</title>
    <!-- 引用三方框架 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <style>
        .wrapper {
            background: #eeeeee;
        }
        
        .col {
            font-size: 50px;
            text-align: center;
            background: lightblue;
        }
    </style>
</head>

<body>
    <div class="wrapper clearfix">
        <div class="row">
            <div class="col col-md-1">1</div>
            <div class="col col-md-1">2</div>
            <div class="col col-md-1">3</div>
            <div class="col col-md-1">4</div>
            <div class="col col-md-1">5</div>
            <div class="col col-md-1">6</div>
            <div class="col col-md-1">7</div>
            <div class="col col-md-1">8</div>
            <div class="col col-md-1">9</div>
            <div class="col col-md-1">10</div>
            <div class="col col-md-1">11</div>
            <div class="col col-md-1">12</div>
        </div>
        <div class="row">
            <div class="col col-md-1">A</div>
            <div class="col col-md-2">B</div>
            <div class="col col-md-3">C</div>
            <div class="col col-md-6">D</div>
        </div>
    </div>
</body>

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

效果如下：

上述代码中，通过 link 引用了 BootStrap 框架，然后使用了其内置的 col-md- 类。

BootStrap 内置类与容器宽度的对应关系

在 BootStrap 中，内置类与对应容器宽度的关系如下：

图片来自 https://getbootstrap.com/docs/3.4/css/ (opens new window)

在上面的代码中，我们仅使用了 col-md- 类，那么，当屏幕尺寸大于等于 970px 时可以得到我们想要的网格效果；但是，如果小于 970px ，就会变成默认的显示效果。

注意，BootStrap 最大可以分为 12 列。

实现效果2

实现的目标是，在大屏效果上显示下面 4 列的样子，然后随着屏幕的变小动态适配，逐步变成 3 列、2列、1列。

完整代码如下：

<head>
    <meta charset="UTF-8" />
    <title>前端攻城狮</title>
    <!-- 引用三方库 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .clearfix::after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
        }
        
        .wrapper {
            background: #eeeeee;
        }
        
        .col {
            font-size: 30px;
            text-align: center;
            background: lightblue;
        }
    </style>
</head>

<body>
    <div class="wrapper container-fluid">
        <div class="row">
            <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">1</div>
            <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">2</div>
            <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">3</div>
            <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">4</div>
            <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">5</div>
            <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">6</div>
            <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">7</div>
            <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">8</div>
            <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">9</div>
            <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">10</div>
            <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">11</div>
            <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">12</div>
        </div>
    </div>
</body>

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

上述代码中，引用了 BootStrap 框架，并使用了其内置的 col-xs-12、 col-sm-6 、col-md-4 、col-lg-3 类，从而实现了我们期望的效果。

注意：视频中引用该框架时，引用语句为：<link rel="stylesheet" type="text/css" href="bootstrap-lib/css/bootstrap.css"> ，这么引用的前提是，已经将 BootStrap 下载到了本地，并放到了与当前 html 同目录下。

引用 BootStrap 的方式参考：[Getting started](

#CSS

上次更新: 2025/02/26, 08:57:57

← CSS 三大特性 Flex布局→

盒子模型（CSS 重点）

盒子模型

网页布局的本质

盒子模型（Box Model）

盒子边框（border）

1）、表格的细线边框

2）、盒子边框总结表

3）、表格的细线边框（合并表格边框）

4）、圆角边框--border-radius（CSS3）

内边距（padding)

1）、内边距

2）、FireWorks 测量和取色

3)、新浪导航案例:

margin 的设置

box-sizing

垂直外边距折叠（Collapsing margins）

display 属性

块级元素（block-level）

行内元素（inline-level）

行内块元素（inline-block）

标签显示模式转换

通过 display 转换行内元素和块级元素

查看 display

背景相关的属性

background-repeat 和 background-position

background-size

``background`

CSS 布局概述和实例

浮动与清除

浮动-float

清除-clear

让父元素围住浮动的子元素

overflow:hidden

让父布局也浮动

添加空的子元素，并设置 clear

添加虚拟子元素

基于浮动的布局 demo

定位详解--position

相对定位

基本示例

通过定位让被遮挡的内容显示在上层

z-index

绝对定位

基本使用

绝对定位的参照物

固定定位-fixed

基本使用

fixed 与 absolute 的区别

绝对定位的应用 demo

通过 float 浮动实现

通过绝对定位实现

固定定位的应用 demo

Grid 布局简介-实现一个简单 Grid 系统

通过浮动实现

CSS Grid Layout

Boostrap Grid 系统应用 demo

通过 Boostrap 实现 4.12 中的网格效果

基础代码

实现网格效果

BootStrap 内置类与容器宽度的对应关系

实现效果2

4）、圆角边框--`border-radius`（CSS3）

`box-sizing`

块级元素（`block-level`）

行内元素（`inline-level`）

行内块元素（`inline-block`）

`background-repeat` 和 `background-position`

`background-size`

`overflow:hidden`

`z-index`