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

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

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

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

CSS（10）盒子模型