W3C标准盒模型及IE盒模型 ​

盒模型有两类：W3C标准盒模型和IE盒模型。

W3C标准盒模型 ​

一个元素的W3c标准盒模型由margin、border、padding、content四个区块构成。在box-sizing: content-box;时，元素的宽度、高度指的是content的宽度、高度。在box-sizing: border-box;时，元素的宽度、高度是content、padding、border三者的合计值，与IE盒模型一致。

IE盒模型 ​

如果html文件头部没有有效地声明文件类型的话，IE6、7、8下的盒模型解析情况会跟W3C标准盒模型不一致，我们称之为IE盒模型。由于现在我们写html页面时都会在头部加上html5文档类型声明（），所以并不用担心这个问题，知道有这么回事就可以了。 一个元素的IE盒模型也是由margin、border、padding、content四个区块构成的。在IE盒模型里，元素的宽度、高度是content、padding、border三者的合计值。

Margin特别说明 ​

margin-top和margin-bottom对display: inline;的元素无效（margin-left、margin-right是有效的）。 display: inline-block|block;的垂直相邻元素间距离的计算规格：

• margin-top和margin-bottom均为正数，取最大值；
• margin-top和margin-bottom均为负数，取最小值（-2px、-10px，取-10px）；
• margin-top和margin-bottom一正一负，取其和（-2px、10px，取8px；2px、-10px，取-8px）；
• 以上三条可简记为“同正负取绝对值大的，一正一负取其和”；