什么是盒模型

引用MDN官方的解释：

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。 每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

文字看起来有些苍白，我们举例说明（Talk is cheap，show me code）

定义一个样式：

.

应用样式

<

那么他的盒子模型是这样的（chrome浏览器）：

这张图可以清晰的反应出来元素的内容尺寸、边框大小、内边距大小和外边距大小。这样就是理想的展现方式，也是符合我们的理解逻辑的：

盒模型 = 内容尺寸 + 内边距 + 边框尺寸 + 外边距（内边距、边框、外边距各个方向上需要计算2倍）

一切都是这么完美。但是，IE来了...

IE的特殊盒子模型

我们以同样的样式和元素来作为例子，在ie浏览器中的盒子模型则有很大的不同

我们在样式中定义的尺寸很明显：width:100px;height:100px; 但是这里的内容尺寸则为122 x 122；这个数字刚好是 内边距(10*2) + 边框(1*2) 的和，所以IE的内容边界包括了内边距和边框。所以在IE中：

盒模型 = 内容（内容边界+内边距*2+边框*2）+ 外边距