CSS 盒模型

盒模型的定义：

盒模型是页面设计和布局时用到一种思维模型。 盒模型由，Margin (外边距), Border (边框) ，Padding(内边距／填充) 和Content（内容）组成。其中外边距margin是透明的，不会遮挡周边的其他元素。

标准盒模型里，用CSS对元素设置width 和 height 属性时， 设置的其实是content 部分的宽和高，元素实际占位空间，还需要加上Padding ，border ，和Margin 。但是在IE 5.x 和 IE6 在怪异模式下，会使用非标准的盒模型，该盒模型下，对元素设置width 和 height 属性时，设置的其实是包括 border ， padding 和content部分的宽高。在这种非标准模型下，元素实际占用的空间只需要再加上 Margin。 对于这种非标准的盒模型的解决方案，就是在HTML 文档头部指定文档的DocType，让浏览器采用严格模式解析。

box-sizing属性：

在CSS3 中，新增的一个用户界面属性box-sizing 可以用来指定元素的盒模型计算方法。 box-sizing 有三种值：

box-sizing： content-box； 这是CSS2.1 中提出的标准盒模型的计算方式，即width和height属性指content部分的宽高；

box-sizing： border-box； 这就是IE怪异模式下的非标准盒模型的计算方式，即width和height属性指 border，padding，content 3部分的宽高；

box-sizing： inherit；从父元素继承；

Margin 的合并：

外边距的合并是指对于普通文档流中的块状元素，两个垂直相遇的外边距合并成一个外边距，合并后的外边距高度取两个合并外边距中的较大者。 

有三种情况会出现外边距垂直相遇：

1） 上下关系的块状元素；

这是最常见也是最容易理解的合并情况，上下两个段落之间就会存在外边距合并现象；

 

2） 父子关系的块状元素；

当父容器没有padding和border时，父容器的上下外边距就会直接遇上子元素的上下外边距，两个外边距就会发生合并。

要阻止父子外边距合并，需在父子外边距间设置隔离。隔离方法有，给父元素设置 border，设padding，加前置内容生成(即增加伪元素)，等。 加前置内容生成不会产生额外的影响，推荐使用：

.parent:before {
    content: '';
    display: table; // table会产生一些匿名盒子, 形成BFC
}table会产生一些匿名盒子, 形成BFC
}

3）元素自身上下margin

当元素没有content，padding和border时，上下margin 会相遇，发生合并. 这种情况如果在浏览器端试验，抓取到的空元素的高仍然是上下margin之和，而不是合并后的margin值。但是当有相邻块元素存在时，从相邻元素的位置就能看出效果。

margin 的合并还有很多规则，但整体有如下原则：常规文档流，块级元素，同一个BFC环境。关于BFC，后续。。

 

 

 

图片来自W3School