基本概念
盒模型由 margin + border + padding + content 四个属性组成，分为两种：W3C的标准盒模型和IE盒模型。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像
W3C的标准盒模型
width = content，不包含 border + padding
IE盒模型
width = border + padding + content
相互转换
二者之间可以通过CSS3的 box-sizing 属性来转换。
box-sizing: content-box 是W3C盒模型
box-sizing: border-box 是IE盒模型
赋值
margin和padding为负值情况请参考：https://www.cnblogs.com/zhangzhiyong1998/p/10924891.html
一、不赋值
默认情况下为0，也就是不会有内外边距
2.两个值时
Padding：10px 20px; 上下内边距为10px，左右内边距为20px
3.三个值时
Padding：10px 20px 30px；上10px,左右20px，下30px
4.四个值时
Padding：10px 20px 30px 40px;上右下左分别为10 20 30 40
margin塌陷
普通文档流中父子块级元素，子元素的上边距会和父元素的上边距重合，以他们两个之间最大上边距为准，与距离他们最近的盒子隔开。父子之间的margin就消失了。下边距同理，左右margin不会发生塌陷。
解决方法：
1.给父级设置边框或内边距(记得设置透明)
2.触发bfc(块级格式上下文),改变父级的渲染规则
方法：
（1）为父盒子添加overflow：hidden；
（2）为父盒子设定padding值；
（3）为父盒子添加position：fixed；
（4）为父盒子添加 display：table；
（5）利用伪元素给子元素的前面添加一个空元素
.son:before{ content:"";
overflow:hidden; }
margin合并
两个兄弟结构的元素在垂直方向上的margin是合并的，取两者最大值。（水平方向不会合并）
1 /*CSS部分*/ 2 <style> 3 .box1{ 4 width:400px; 5 height:400px; 6 background: pink; 7 margin-bottom: 50px; 8 } 9 .box2{ 10 width:200px; 11 height:200px; 12 background: lightblue; 13 margin-bottom: 40px; 14 } 15 </style> 16 /*HTML部分*/ 17 <body> 18 <divclass="box1"> 19 <divclass="box2"></div> 20 </div> 21 </body>
两个box的margin发生合并，两者上下仅距离50px；
解决方法
使用border或者padding。
设置float。
BFC可以参考：https://zhuanlan.zhihu.com/p/25321647?utm_source=qq&utm_medium=social&utm_oi=953258268978651136