什么盒模型（Box Model）
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容(图中蓝色部分)，显示文本和图像。
两种盒模型
内容盒(centent-box)
内容是盒子的边界，盒子的宽度width = 内容宽度。
.context-box {
box-sizing: content-box;
}
边框盒(border-box，推荐使用)
边框才是盒子的边界，盒子的宽度width = 内容宽度 + padding + border 。
.border-box {
box-sizing: border-box;
}
margin合并
定义
块级元素的上外边距或下外边距有时（直接接触/相邻时）会合并为一个外边距，这种合并行为叫做margin合并。注意浮动元素或者有绝对定位的元素不会发生margin合并的行为。
合并原则
正正取最大，负负取最负，正负就相加。
什么情况下会合并
- 父子元素间的margin合并
以父元素和第一个子元素为例。当第一个子元素设置margin-top时会‘溢出’到父元素上，如果父元素也存在margin-top属性，则按照合并规则进行计算。
- 兄弟元素间的margin合并
兄弟元素间的合并安装合并原则进行。
如何阻止合并
- 父子合并用
padding/border挡住 - 父子合并用
overflow:hidden挡住 - 父子合并用
display:flex - 兄弟合并可以用
display:inline-block消除，但兄弟合并一般是符合我们预期的
