1.盒子模型的介绍

  • 盒子的概念

    • 页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
    • 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

  • 盒子模型

    • CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是盒子模型

  • 记忆：可以联想现实中的包装盒

01.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
<!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>
        /* 纸箱子, 填充泡沫 */
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 边框线 == 纸箱子 */
            border: 1px solid #000;
            /* 内边距 == 填充泡沫 : 出现在内容和盒子边缘之间 */
            padding: 20px;

            /* 外边距 : 出现在两个盒子之间, 出现在盒子的外面*/
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>内容电脑</div>
    <div>内容电脑</div>
</body>
</html>

03.png

2.内容区域的宽度和高度

  • 作用：利用 width 和 height 属性，设置盒子内容区域的大小
  • 属性：width / height
  • 常见取值：数字+px

02.png

案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

04.png

3.边框(border)

border 可以设置元素的边框。

边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色。

语法：

1
border: border-width || border-style || border-color
属性 作用
border-width 定义边框粗细，单位是 px
border-style 边框的样式
border-color 边框颜色

边框样式 border-style 可以设置如下值：

  • none：没有边框，即忽略所有边框的宽度（默认值）
  • solid：边框为单实线（最为常用的）
  • dashed：边框为虚线
  • dotted：边框为点线

边框简写：

1
border: 1px solid red; 	/* 没有顺序 */

边框分开写法：

1
border-top: 1px solid red; 		/* 只设定上边框，其余同理 */

案例：

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
<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border: 粗细  线条样式   颜色 -- 不分先后顺序 */
            /* solid : 实线 */
            /* border: 1px solid #000; */

            /* dashed: 虚线 */
            /* border: 5px dashed #000; */

            /* dotted : 点线 */
            /* border: 5px dotted #000; */

            border-left: 5px dotted #000;
            border-right: 5px dotted #000;
            border-top: 1px solid red;
            border-bottom: 1px solid red;
        }
    </style>
</head>
<body>
    <div>内容</div>
</body>
</html>

05.png

4.盒子实际大小初级计算公式

  • 盒子实际大小初级计算公式：
    • 盒子宽度 = 左边框 + 内容宽度 + 右边框
    • 盒子高度 = 上边框 + 内容高度 + 下边框

06.png

需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？

  • 注意点：①设置width和height是内容的宽高！②设置border会撑大盒子！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>
        div {
            /* border 撑大盒子尺寸 */
            /* 盒子尺寸 = width  / height + 边框线 */
            /* 如果400 * 400 尺寸 */
            width: 380px;
            height: 380px;
            background-color: green;
            border: 10px solid #000;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

07.png

5.(案例)新浪导航案例

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
<!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>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }

        /* 后代: box里面的a */
        .box a {
            width: 80px;
            height: 40px;
            /* 推荐先加上: 清楚的看到文字在什么位置 */
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .box a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>

    <!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
    <p>
        <a href="#"></a>
    </p>
</body>
</html>

08.png

6.内边距(padding)

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

属性 作用
padding-left 左内边距
padding-rigth 右内边距
padding-top 上内边距
padding-bottom 下内边距

padding 属性（简写属性）可以有一到四个值。

值的个数 表达意思
padding: 5px; 1 个值，代表上下左右都有 5 像素内边距
padding: 5px 10px; 2 个值，代表上下内边距是 5 像素，左右内边距是 10 像素
padding: 5px 10px 20px; 3 个值，代表上内边距 5 像素，左右内边距 10 像素，下内边距 20 像素
padding: 5px 10px 20px 30px; 4 个值，上是 5 像素，右 10 像素，下 20 像素，左是 30 像素（顺时针）

小案例:

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
<!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>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 添加了4个方向的内边距 */
            /* padding: 50px; */

            /* padding 属性可以当做复合属性使用, 表示单独设置某个方向的内边距 */
            /* padding 最多取4个值 */

            /* 四值: 上  右   下  左 */
            /* padding: 10px 20px 40px 80px; */

            /* 三值 : 上   左右   下*/
            /* padding: 10px 40px 80px; */

            /* 两值 : 上下  左右*/
            /* padding: 10px 80px; */

            padding-left: 10px;
            padding-bottom: 50px;
        }

        /* 多值写法, 永远都是从上开始顺时针转一圈, 如果数不够, 看对面 */
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

09.png

7.盒子实际大小终极计算公式

  • 盒子实际大小终极计算公式：
    • 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
    • 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

10.png

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？

  • 注意点：①设置width和height是内容的宽高！②设置border会撑大盒子③设置padding会撑大盒子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>
        div {
            /* 撑大盒子的都有啥? border + padding */
            width: 240px;
            height: 240px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

11.png

6.(案例)新浪导航的优化

需求：优化之前的新浪导航，如果每个导航的字数增加，如何完成效果？

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
<!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>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }

        /* 后代: box里面的a */
        .box a {
          	/* 没有指定宽度，此时设置 padding 会使盒子内容之间的距离相同 */
            padding: 0 16px;
            /* width: 80px; */
            height: 40px;
            /* 推荐先加上: 清楚的看到文字在什么位置 */
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .box a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>

    <!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">新浪</a>
        <a href="#">新浪导航新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
    <p>
        <a href="#"></a>
    </p>
</body>
</html>

12.png

7.自动内减

  • 手动内减

    • 操作：自己计算多余大小，手动在内容中减去
    • 缺点：项目中计算量太大，很麻烦

  • 自动内减

    • 操作：给盒子设置属性 box-sizing : border-box ; 即可
    • 优点：浏览器会自动计算多余大小，自动在内容中减去

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？

  • 给盒子设置border或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
<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;

            /* 內减模式 */
            /* 变成CSS3的盒子模型, 好处: 加了border和padding不需要手动减法 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

13.png

8.外边距(margin)

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距

margin 简写方式代表的意义跟 padding 完全一致。

值的个数 表达意思
margin: 5px; 1 个值，代表上下左右都有 5 像素外边距
margin: 5px 10px; 2 个值，代表上下外边距是 5 像素，左右外边距是 10 像素
margin: 5px 10px 20px; 3 个值，代表上外边距 5 像素，左右外边距 10 像素，下外边距 20 像素
margin: 5px 10px 20px 30px; 4 个值，上是 5 像素，右 10 像素，下 20 像素，左是 30 像素（顺时针）

小案例:

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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

14.png

外边距典型应用：

外边距可以让块级盒子水平居中，但是必须满足两个条件：

  • 盒子必须指定了宽度 width
  • 盒子左右的外边距都设置为 auto
1
.header { width: 960px; margin: 0 auto;}

常见的写法，以下三种都可以：

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可。

小案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>
        div {
            width: 1000px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 版心: 网页的有效内容 -->
    <!-- 版心居中 -->
    <div>版心</div>
</body>
</html>

15.png

9.清除默认内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

1
2
3
4
* {
	padding:0; 	/* 清除内边距 */
	margin:0; 	/* 清除外边距 */
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距（某些时候，行内元素对上下内外边距不生效）。但是转换为块级和行内块元素就可以了。

小案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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;
        }
    </style>
</head>
<body>
    <p>pppp</p>
    <p>pppp</p>
    <h1>h1</h1>
    <ul>
        <li>lili</li>
    </ul>
</body>
</html>

16.png

10.(案例)网页新闻列表案例

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
<!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;
            /* 所有的标签都可能添加内边距或border, 都內减模式 */
            box-sizing: border-box;
        }

        .news {
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
            padding: 42px 30px 0;
        }

        .news h2 {
            border-bottom: 1px solid #ccc;
            font-size: 30px;

            /* 行高是1倍, 就是字号的大小 */
            line-height: 1;
            padding-bottom: 9px;
        }

        /* 去掉列表的符号 */
        ul {
            list-style: none;
        }

        /* li {} */
        .news li {
            height: 50px;
            border-bottom: 1px dashed #ccc;
            padding-left: 28px;
            line-height: 50px;
        }

        .news a {
            text-decoration: none;
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <!-- 从外到内 -->
    <div class="news">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
        </ul>
    </div>
</body>
</html>

17.png

11.外边距折叠现象

11.1 合并现象

  • 场景：垂直布局的块级元素，上下的margin会合并
  • 结果：最终两者距离为margin的最大值
  • 解决方法：避免就好
    • 只给其中一个盒子设置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
<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .one {
            /* margin-bottom: 50px; */
            margin-bottom: 60px;
        }

        .two {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one">11</div>
    <div class="two">22</div>
</body>
</html>

18.png

11.2 塌陷现象

  • 场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上
  • 结果：导致父元素一起往下移动
  • 解决方法：
    • 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
    • 给父元素设置overflow：hidden
    • 转换成行内块元素
    • 设置浮动
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
<!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>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* padding-top: 50px; */
            /* 如果设计稿没有border, 不能使用这个解决办法 */
            /* border: 1px solid #000; */

            /* overflow: hidden; */
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            margin-top: 50px;

            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

19.png

12.行内元素的margin和padding无效情况

  • 场景：

    给行内元素设置margin和padding时

  • 结果：

    • 水平方向的margin和padding布局中有效！
    • 垂直方向的margin和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
<!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>
        span {
            /* margin: 100px; */
            padding: 100px;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <!-- 行内元素   内外边距  margin  padding -->

    <!-- 如果想要通过margin或padding改变行内标签的垂直位置, 无法生效 -->
    <!-- 行内标签的margin-top和bottom 不生效 -->
    <!-- 行内标签的padding-top或botttom 不生效 -->
    <span>span</span>
    <span>span</span>
</body>
</html>

20.png