当对一个文档进行布局(laying out)的时候，浏览器渲染引擎会根据 CSS-Box 模型（CSS Basic Box model）将所有元素表示为一个矩形盒子（box)。CSS决定这些盒子的大小，位置以及属性（颜色，背景，边框尺寸...).

可以认为每个HTML标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型。

盒模型分为 IE 盒模型和 W3C 标准盒模型。

W3C 标准盒模型 content-box

属性 width，height 只包含内容 content，不包含 border 和 padding。

width = content

height = content

IE 盒模型 border-box

属性 width，height 包含 border 和 padding，指的是 content + padding + border。

width = border + padding + content

height = border + padding + content

在 IE8+ 浏览器中使用哪个盒模型可以由 box-sizing(CSS 新增的属性)控制，默认值为 content-box，即标准盒模型；如果将 box-sizing 设为 border-box 则用的是IE盒模型。如果在 IE6、7、8 中 DOCTYPE 缺失会触发 IE模式。在当前W3C标准中盒模型是可以通过 box-sizing 自由的进行切换的。

margin

CSS 的盒模型由 content(内容)、padding(内边距)、border(边框)、margin(外边距) 组成。

但盒子的大小由 content + padding + border 这几部分决定，把 margin 算进去的那是盒子占据的位置，而不是盒子的大小！

盒子的大小为 content + padding + border 即内容的(width)+内边距的再加上边框，而不加上margin。

总结

我们在编写页面代码时应尽量使用标准的 W3C盒模型(需在页面中声明 DOCTYPE 类型)，这样可以避免多个浏览器对同一页面的不兼容。

因为若不声明 DOCTYPE 类型，IE浏览器会将盒子模型解释为 IE盒模型，FireFox 等会将其解释为 W3C盒模型；若在页面中声明了 DOCTYPE 类型，所有的浏览器都会把盒模型解释为 W3C盒模型。