标准的CSS的盒子模型与低版本IE的盒子模型有什么不同

CSS中盒子模型的组成由内容区（content）、内边距（padding）、边框（border）、外边距（margin）组成。

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

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

margin：10px； border：2px； padding：5px； width：200px；height：100px，那么：

一、W3C标准

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

整个盒子模型的宽是： margin2 + border2 + padding*2 + width（严格来说是：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right）

整个盒子模型的高是： margin2 + border2 + padding*2 + height（严格来说是：margin-left + border-left + padding-left + height + padding-right + border-right + margin-right）

如下图：

则整个盒子模型的宽是：10px2 + 2px2 + 5px2 + 200px = 234px
则整个盒子模型的高是：10px2 + 2px2 + 5px2 + 100px = 134px

二、低版本IE浏览器（主要是指IE5和（IE6的怪异模式），不过现在这两个版本的浏览器的市场占有率已经很低了）的标准：

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

整个盒子模型的宽是： margin*2 + width（严格来说是：margin-left + width + margin-right）

整个盒子模型的高是： margin*2 + height（严格来说是：margin-left + height + margin-right）

如下图：

则整个盒子模型的宽是：10px2 + 200px = 220px
则整个盒子模型的高是：10px2 + 100px = 120px