css盒模型是网页布局中的基石，就好比大盒套小盒，环环相扣，缺一不可。那接下来就简单的介绍一下盒模型。Come on,逆战来也！！！
1. 盒模型的结构
从里到外包括：content（内容）-----------------手机
padding（内填充 补白）----泡沫
border（边框） -----------------包装盒
margin（外边距）---------------盒子与外部的距离
有图有真相，如图：
2．padding的用法：
1）padding是长在内容和盒子之间的，在盒子内部，上图黄色区域。
2）padding是为了调整 子元素 在 父元素里面的位置关系。
3）padding的特点：padding值会把盒子撑大。（比如说泡沫多了，会把包装盒挤大）
4）如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值。（放个小手机）
5）给单一方向设置padding值：
padding-left/right/top/bottom:;
6）padding的设置方法：
padding:1个值 四周
padding:2个值 上下 左右
padding:3个值 上 左右 下
padding:4个值 上 右 下 左
7: padding不能设置负值
8: padding不会对背景图造成影响。
9：如果一个盒子没有设置固定的宽和高，添加padding是不用减的。（手机外没有包装盒，放再多泡沫都不用换小手机）
3. margin的用法
1) margin是长在元素之外的。（上图淡青色区域）
2) margin控制的是 同级元素 之间的位置关系。
3) margin不会对盒子本身的宽高造成影响。
4) 给单一方向添加margin值
margin-left/right/bottom/top:;
5) margin的设置方法：
margin:1个值 四周
margin:2个值 上下 左右
margin:3个值 上 左右 下
margin:4个值 上 右 下 左
6) margin可以设置负值。
7) margin常出现的BUG:
a：当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top 会错误的把margin-top加在父元素上面。
b: 上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置。
8) margin:0 auto; 让当前元素在父元素里面左右居中。
4. 盒子在网页中真正所占据的空间
代码显示：
效果图：
原文：https://www.cnblogs.com/blog-ln/p/12595409.html