css常见问题：盒模型，外边距合并

盒模型

标准盒模型
IE盒模型

区别：

• W3C标准盒模型：padding、border所占的空间不在width、height范围内。chrome， ie9+, ie678(添加 doctype) 使用标准盒模型， 宽度= 内容宽度
• IE的盒模型：width包括content尺寸＋padding＋border。ie678怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度

css3新样式box-sizing

box-sizing: content-box;  /*w3c标准盒模型*/
box-sizing: border-box;  /*IE盒模型*/

<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;"> </div>

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并形式：

• 相邻。example

xl.png

• 空元素自身上下边距合并。无border无padding无content的空元素，上下边距分别和相邻元素合并，然后自己的上下边距合并。example

k.png

• 父子。父元素中不设置padding和border时，父元素和子元素的外边距重合。当只设置子元素的margin-top，父子元素发生外边距合并，整体下移，。example

fz.png

同理，若要子元素居中显示，就需要在父元素中加padding或者border，让父子元素的外边距分离。之后无论是在父元素中通过padding还是在子元素中通过margin都能实现子元素居中显示。

注：段落间设置间距，防止合并的方式是，都只设置margin-top