CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型

时间:2021-10-10 09:13:34

CSS中盒子模型的组成由内容区(content)、内边距(padding)、边框(border)、外边距(margin)组成。内边距可细分为 padding-top、padding-right、padding-bottom、padding-left;边框可细分为 border-top、border-right、border-bottom、border-left;外边距可细分为 margin-top、margin-right、margin-bottom、margin-left。

对于盒子模型,W3C标准和低版本IE浏览器是不一样的,主要区别是内容部分的width和height的定义不同。我们常说的盒子模型一般指W3C标准的盒子模型。下面对此做一个区分:

如果一个元素各组成部分如下:

margin:10px; border:2px; padding:5px; width:200px;height:100px,那么:

1、W3C标准

内容部分的width就单单指width,height就单单指height

整个盒子模型的宽是: margin*2 + border*2 + padding*2 + width(严格来说是:margin-left + border-left + padding-left + width + padding-right + border-right + margin-right)

整个盒子模型的高是: margin*2 + border*2 + padding*2 + height(严格来说是:margin-left + border-left + padding-left + height + padding-right + border-right + margin-right)

如下图

则整个盒子模型的宽是:10px*2 + 2px*2 + 5px*2 + 200px = 234px

则整个盒子模型的高是:10px*2 + 2px*2 + 5px*2 + 100px = 134px

CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型

CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型

CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型

2、低版本IE浏览器(主要是指IE5和(IE6的怪异模式),不过现在这两个版本的浏览器的市场占有率已经很低了)的标准:

内容部分的width和height是把内边距(padding)和边框宽度(border)也算进去

整个盒子模型的宽是: margin*2 + width(严格来说是:margin-left + width + margin-right)

整个盒子模型的高是: margin*2 + height(严格来说是:margin-left + height + margin-right)

如下图

则整个盒子模型的宽是:10px*2 + 200px = 220px

则整个盒子模型的高是:10px*2 + 100px = 120px

CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型

如下博文有对W3C标准有更详细的说明:

CSS(10)盒子模型