# 盒子模型的介绍

盒子的概念
盒子模型
单个属性
连写形式
单方向设置
盒子实际大小初级计算公式
取值
单方向设置
盒子实际大小终极计算公式
不会撑大盒子的特殊情况(块级元素)
CSS3盒模型(自动内减)
示例代码
取值
单方向取值
单方向设置的应用
清除默认内外边距
外边距正常情况
外边距折叠现象
- 合并现象
- 塌陷现象
行内元素的margin和padding无效情况

# 盒子的概念

页面中的每一个标签,都可以看作是一个"盒子",通过盒子的视角更方便的进行布局
浏览器在渲染(显示)网页时,会将网页中的元素看作是一个个的矩形区域,我们也形象的称之为盒子

# 盒子模型

CSS中规定每个盒子分别由:内容区域(content),内边距区域(padding),边框区域(border),外边距区域(margin)构成,这就是盒子模型

盒子模型=宽高+外边距+边框+内边距
盒子模型是用来控制元素显示效果的一些样式
- 宽高:控制元素的显示大小
- 外边距:控制元素的显示位置
- 边框: 就是控制边框效果
- 内边距: 控制元素的内容位置

图片描述

# 内容区域的宽度和高度

作用:

利用width和height属性默认设置是盒子内容区域的大小
通过上级元素百分比

属性:width/height

常见取值:数字+px

注意:行内元素不能修改宽高, 需要非要改把元素改成块级或行内块

# 边框(border)

作用:给设置边框粗细,边框样式,边框颜色效果

赋值方式:
- border-left/right/top/bottom:粗细样式颜色; 单独某一个方向
- border:粗细样式颜色; 四个方向添加
border-radius:10px; 设置圆角,值越大越圆超过宽高一半为正圆

# 单个属性

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid,虚线dashed.点线dotted
边框颜色	border-color	颜色取值

# 连写形式

快捷键:bd+tab

属性值:单个取值的连写,取值之间以空格隔开

如:border:10px solid red;

# 单方向设置

场景:只给盒子的某个方向单独设置边框

属性名:border-方位名词

属性值:连写的取值

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

盒子宽度=左边框+内容边框+有边框

盒子高度=上边框+内容边框+下边框

注意:当盒子被border撑大后,如何满足需求?

计算多余大小,手动在内容中减去(手动内减)

# 内边距(padding)

什么是内边距?

元素边缘距内容的距离,称为内边距, 用来控制元素内容显示的位置
赋值方式:(和外边距类似)
- padding-left/right/top/bottom:10px; 单独某一个方向赋值
- padding:10px; 四个方向赋值
- padding:10px 20px; 上下10px 左右20px
- padding: 10px 20px 30px 40px; 上右下左顺时针
内边距会影响元素显示的宽高.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 150px;
            height: 150px;
            border:1px solid red;
            /*内边距会影响元素的宽高*/
            padding-top: 50px;
            padding-left: 50px;
        }
    </style>
</head>
<body>
<div>内边距</div>
</body>
</html>

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

# 取值

作用:设置边框与内容区域之间的距离

属性名:padding

常见取值:

取值	示例	含义
一个值	`padding:10px`	上右下左都设置为10px
两个值	`padding:10px 20px`	上下设置为10px,左右设置为20px
三个值	`padding:10px 20px 30px`	上设置为10px,左右设置为20px,下设置为30px
四个值	`padding:10px 20px 30px 40px`	上设置为10px,右设置为20px,下设置为30px,左设置为40px

记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的!!

# 单方向设置

场景:只给盒子的某个方向单独设置内边距

属性名:padding - 方位名词

属性值:数字+px

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

盒子宽度=左边框+左padding+内容边框+右padding+有边框

盒子高度=上边框+上padding+内容边框+下padding+下边框

注意:当盒子被border撑大后,如何满足需求?

计算多余大小,手动在内容中减去(手动内减)

# 不会撑大盒子的特殊情况(块级元素)

如果盒子没有设置宽度,此时宽度默认是父盒子的宽度
此时给盒子设置左右的padding或者左右的border,此时不会撑大盒子

# CSS3盒模型(自动内减)

操作:给盒子设置属性box-sizing:border-box;即可

优点:浏览器会自动计算多余大小,自动在内容中减去

# 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 100px;
      height: 100px;
      border: 10px solid red;
      /*圆角:值越大越圆,超过宽高一半时为正圆(前提是正方形)*/
      border-radius: 100px;
    }
    #d2{
      width: 50px;
      height: 100px;
      border:1px solid red;
      /*内边距会影响元素的宽高*/
      padding-left: 50px;

    }
  </style>
</head>
<body>
<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ul>
<div id="d2">内边距</div>
<div id="d1"></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

# 外边距(margin)

什么是外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距
赋值方式:
- margin-left/right/top/bottom:10px; 单独某一个方向添加外边距
- margin:10px; 四个方向添加10个像素外边距
- margin:10px 20px; 上下10px 左右20px
- margin:10px 20px 30px 40px; 顺时针上右下左
行内元素上下外边距无效
上下相邻两个元素彼此外边距 取最大值
左右相邻两个元素彼此外边距相加
粘连问题: 当元素上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题, 给上级元素添加overflow:hidden解决此问题.
body自带4个方向8个像素的外边距
h1-h6内容标题, 段落标签p, 无序列表等这些元素都自带外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      /*margin-left: 50px;
      margin-top: 50px;
      margin-bottom: 50px;*/   /*单独某一个方向赋值*/
      /*margin: 50px;*/    /*四个方向赋值*/
      /*margin: 50px 100px;*/    /*上下和左右赋值*/
      margin: 10px 20px 30px 40px;    /*上右下左顺时针赋值*/
    }
    #d2{
      width: 100px;
      height: 100px;
      border: 1px solid blue;
      margin-top: 20px;
    }
  #s1{
    border: 1px solid blue;
    margin-right: 50px;
    /*margin-top: 50px;*/ /*行内元素上下外边距无效*/
  }
  #s2{
    /*左右相邻彼此添加外边距相加*/
    margin-left: 30px;
  }
  #big{
    width: 200px;
    height: 200px;
    background-color: red;
      overflow: hidden;/*解决粘连问题*/
  }
  #big>div{
    width: 50px;
    height: 50px;
    background-color: green;
      margin-left: 50px;
      /*当元素的上边缘和上级元素的上边缘重叠时
      给元素添加上外边距会出现粘连问题*/
      margin-top: 50px;
  }
  body{
      margin: 0;/*去掉自带外边距*/
  }
    h1{
        margin: 0;
    }
    p{margin: 0}
    ul{margin: 0}
    *{margin: 0}
  </style>
</head>
<body>
<ul>
    <li>aaa</li>
    <li>bbb</li>
</ul>
<h1>这是h1</h1>
<p>pppp</p>
<div id="big">
  <div></div>
</div>
<span id="s1">span1</span><span id="s2">span2</span>
<!--div#d1-->
<!--div.c1-->
<!--div*3-->
<div id="d1"></div>
<div id="d2"></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
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            border:1px solid red;
            /*margin-left: 100px;
            margin-top: 100px;*/
            /*margin-bottom: 50px;*/
            margin: 10px 20px 30px 40px;

        }
        #d2{
            width: 100px;height: 100px;border:1px solid red;
            /*上下相邻彼此添加外边距 取最大值*/
            margin-top: 100px;
        }
        #s1{
            /*行内元素上下外边距无效*/
            margin-right: 100px;
        }
        #s2{
            /*左右相邻彼此添加外边距 两者相加*/
            margin-left: 50px;
        }
        #big{
            width: 200px;height: 200px;background-color: green;
            overflow: hidden;/*解决粘连问题*/
        }
        #big>div{
            width: 50px;height: 50px;background-color: red;
            margin-left: 50px;
            /*当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题*/
            margin-top: 50px;
        }
        #border_div{
            width: 400px;
            height: 200px;
            border: 10px solid blue;
            /*设置圆角*/
            border-radius: 200px;
        }
    </style>
</head>
<body>
<div id="border_div"></div>
<div id="big">
    <div></div>
</div>
<span id="s1">span1</span><span id="s2">span2</span>
<div id="d1">外边距测试</div>
<div id="d2">div2</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

# 取值

作用:设置边框以外,盒子与盒子之间的距离

属性名:margin

常见取值:

取值	示例	含义
一个值	`margin:10px`	上右下左都设置为10px
两个值	`margin:10px 20px`	上下都设置为10px,左右都设置为20px
三个值	`margin:10px 20px 30px`	上设置为10px,左右设置为20px,下设置为30px
四个值	`margin:10px 20px 30px 40px`	上设置为10px,右设置为20px,下设置为30px,左设置为40px

记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的!!

# 单方向取值

场景:只给盒子的某个方向单独设置外边距

属性名:margin-方位名词

属性值:数字+px

# 单方向设置的应用

方向	属性	效果
水平方向	margin-left	让当前盒子往右移动
水平方向	margin-right	让当前盒子往左移动
垂直方向	margin-top	让当前盒子往上移动
垂直方向	margin-bottom	让当前盒子往下移动

# 清除默认内外边距

场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的margin和padding,后续自己设置

比如:body标签默认有margin:8px
比如:p标签默认有上下的margin
比如:ul标签默认有上下的margin和padding-left
...

解决方法:参考京东和淘宝的代码逻辑

# 外边距正常情况

场景:水平布局的盒子,左右的margin正常,互不影响

结果:最终两者距离为左右margin的和

# 外边距折叠现象

# 合并现象

场景:垂直布局的块级元素,上下的margin会合并

结果:最终两者距离为margin的最大值

解决方法:避免就好

只给其中一个盒子设置margin即可

# 塌陷现象

场景:互相嵌套的块级元素,子元素的margin-top会作用在父元素上

结果:导致父元素一起往下移动

解决方法:

给父元素设置border-top或者padding-top(分隔父子元素的margin-top)
给父元素设置overflow:hidden
转换成行内块元素
设置浮动

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

场景:给行内元素设置margin和padding时

结果:

水平方向的margin和padding布局中有效
垂直方向的margin和padding布局中无效

← 选择器进阶+背景相关属性+元素显示模式+三大特性浮动 →