当我们使用CSS来书写网页布局内容的时候，一定离不开CSS中盒子模型的属性。盒子模型是CSS布局的基石，它规定了网页元素该如何显示以及元素和元素之间的相互关系。CSS中定义所有的元素都可以有像盒子一样的外形和平面空间。HTML中的所有元素都可以看作是盒模型，即都包含内容区、补白（填充）、边框、边界（外边距）。如下图示：
一、盒模型的组成：content+padding+border+margin
1、content是盒子的内容区，是元素的宽高大小决定的；
2、border是盒子的边框，是在元素定义的宽高之外的；
3、padding是盒子的填充区，是内容区和边框之间的内容，用来控制父元素和子元素之间的位置关系，也可以控制元素和内容之间的关系；
4、margin是盒子的外边距，用来控制同辈元素之间的位置关系；
二、盒模型的使用以及特点
在盒模型中，广泛应用的属性是padding和margin，也是在进行网页布局时经常使用到的功能属性。
1、padding不仅可以控制父子元素之间的位置，也可以控制元素和内容之间的位置。在元素中添加了padding值之后，padding值会把元素原有的大小撑大，所以在添加padding值之后，我们还要在元素原有的宽高减掉所加的padding值。
padding值的具体使用方法：
-
-
padding-right: 30px; 右填充
-
padding-bottom: 30px;下填充
-
padding-left: 30px; 左填充
-
padding：1 2 3 4； 复合式写法上右下左
-
padding: 1 2 3；1上 2左和右 3下
- padding:1 2；1上下 2左右
1 /*未加padding*/
<!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .box{ 8 width: 100px; 9 height: 100px; 10 background: #acc; 11 border: 1px solid #fbc; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="box"> 17 好一朵迎春花啊啊 18 </div> 19 </body> 20 </html>
图示：
<!-- 加上padding --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; background: #acc; border: 1px solid #fbc; padding: 20px; } </style> </head> <body> <div class="box"> 好一朵迎春花啊啊 </div> </body> </html>
图示：
对比两个div可以看出内容区和边框之间的距离变大了，同时div块状元素的宽和高都增加了，我们要想保持父元素的宽高不变就需要在原来的基础上减掉增加的大小。这就是padding的作用。
若是在子元素是设置padding大小，则父元素的宽高不会改变，只会改变子元素和父元素的距离：
<!-- 在子元素上加上padding --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; background: #acc; border: 1px solid #fbc; } .box p{ padding: 20px; } </style> </head> <body> <div class="box"> <p>好一朵迎春花！！！</p> </div> </body> </html>
图示：
2、margin是盒子的外边距，作用是用来控制同辈元素之间的位置关系。
margin的使用方法：
-
-
margin-right: 30px; 右边距
-
margin-bottom: 30px;下边距
-
margin-left: 30px; 左边距
-
margin：1 2 3 4；复合式写法参考padding
margin用来实现水平居中的方法：
-
-
margin-left：auto；margin-right：auto
margin的特点：
-
-
margin不会影响元素的实际大小，但是也会增加他的所占区域
-
margin的bug：
-
上下的两个元素的margin值会重叠显示谁的值大，就以谁的margin值显示（BFC解决）
-
当父元素里的第一个子元素，添加margin-top的时候，会错误的把margin-top值添加给父元素。建立在当前的元素们没有添加边框和浮动的前提下。
-
解决方法：1）给父元素添加overflow：hidden；推荐使用
2）给父元素和子元素添加浮动属性
3）可以给父元素添加边框
4）把margin改成padding
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; background: #acc; border: 1px solid #fbc; } .box2{ width: 100px; height: 200px; background: #F15A23; } </style> </head> <body> <div class="box"> 好一朵迎春花！！！ </div> <div class="box2"> 今天是个好日子。。。。。。 </div> </body> </html>
图示：
<!-- 加上margin控制同辈元素边距 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; background: #acc; border: 1px solid #fbc; margin-bottom: 50px; } .box2{ width: 100px; height: 200px; background: #F15A23; } </style> </head> <body> <div class="box"> 好一朵迎春花！！！ </div> <div class="box2"> 今天是个好日子。。。。。。 </div> </body> </html>
图示：
三、标准盒模型和怪异盒模型
-
-
元素宽度占用的位置大小：宽+左右的padding+左右border+左右margin
-
元素高度占用的位置大小：高+上下的padding+上下的border+上下的margin
-
-
怪异盒模型：比如提交按钮
-
元素的宽度：width（content+border+padding）+margin
-
属性：box-sizing：border-box（怪异盒模型）/ content-box（标准盒模型）
tips：li是块状元素，当不给他设置width属性的时候，他默认的宽度是100%，也就是跟父元素等宽，当你给他添加padding左右值的时候，li会重新进行宽度的计算，也就是加上padding值之后依然等于父元素的宽度。
-