Html—盒子模型

标准盒子模型和IE盒子模型的区别是width的区别，

CSS盒模型图解

下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示。

在本篇文章中，所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的，所以我们将更多的精力放在padding和border属性上。

W3C盒模型

首先看一下《 the W3C box model》，这里所写出的标准，如果没问题的话，是应该被所有标准的现代浏览器及IE6和它的后续版本所遵循的。在W3C盒模型中，一个块级元素的总宽度按照如下的方程式计算：

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

对于高度也使用同样的计算方法，但是为了简便起见从现在开始我只说width。

IE盒模型

IE盒模型的计算方式和W3C的很相似，但有一点是非常不同的，这就是：填充和边框并不被包含在计算的范围内。

总宽度 = margin-left + width + margin-right

这就意味着一旦元素拥有横向的填充和/或边框，实际的内容区域（content area ）就要扩大来创造出他们占据的空间。

http://www.osmn00.com/translation/213.html