Press "Enter" to skip to content

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文档类型声明(<!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);
  • 以上三条可简记为“同正负取绝对值大的,一正一负取其和”;

Be First to Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注