一、谈谈你理解的盒子模型
盒子模型是描述元素大小的一种模型，由四部分组成，分别是：内容、内边距、边框、外边距；3+1+3
二、具体使用
margin：上 右 下 左
margin：上 左右 下
margin：上下 左右
margin：0 auto（自动）
*{margin:0;padding:0}
三、margin溢出与合并（高频笔试题）
1、合并：当两个垂直方向的元素，上下外边距相遇时，将合并为一个外边距；最终实现边距取决于两元素外边距中的较大一方
2、溢出：通常发生在为父元素的第一个子元素设置了上外边距，而父元素没有设置设置上边框时
3、margin溢出与合并只会出现在垂直方向，不会出现在水平方向
（1）当父元素和子元素都设置了外边距，最终取谁的？——还是取大原则
（2）如何解决
（2-1）加border：为父元素增加上边框，阻止内层元素上外边距溢出————缺点：UI不允许加边框；
（2-2）加padding：为父元素加上内边距，取代子元素的上外边距————缺点：对父元素高度有影响，且本意是给子元素加外边距，此时改成给父元素加内边距了，语义不通；
（2-3）加table：为父元素的第一个子元素前加个添加空<table></table>标记来阻隔溢出————缺点：添加无效代码使协同开发很烦；
（2-4）加overflow：设置父元素overflow：hidden属性————缺点：万一父元素需要在内容超出范围时，不隐藏超出部分，就会有冲突；
（2-5）终极解决:before，为父元素添加内容生成样式————优点：看不见不代表不存在，不影响样式展示，且阻止溢出
```
.test:before{content:"";display:table}
```
（3）同理（2-5），解决margin合并
（3-1）给“出现margin合并的上面元素”外围包成div，设置.test:after{}
四、其他特殊情况
1、行内元素的垂直方向外边距失效（img除外）
2、行内块元素其中一个设置上间距，则整行向下移动
五、box-sizing
1、指定盒子模型的计算方式
2、取值：content-box和border-box
3、默认取值即为：content-box，即3+1+3计算方式
4、取值改成border-box：即margin2+width计算方式，内容部分实际宽=width-border2-padding*2
