盒模型有两类: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文档类型声明(<!DOCTYPE html>),所以并不用担心这个问题,知道有这么回事就可以了。
一个元素的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);
- 以上三条可简记为“同正负取绝对值大的,一正一负取其和”;