盒子模型（一）——block box

盒子模型

这就是我们所熟悉的盒子模型，包含了margin（外边距）、border（边框）、padding（内边距）、content（内容）。

Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明 Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响 Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响 Content（内容） - 盒子的内容，显示文本和图像

块级盒子（block box）

对于块级元素，浏览器会采用block box模型来进行渲染。 不过，早期的IE和W3C有不同的解释。

IE盒子模型

早期的IE浏览器（IE6之前）采用IE盒子模型，现在多采用标准模式（W3C模式）

(content)width = content-width + padding-width + border-width
(content)height = content-height + padding-height + border-height

标准盒子模型（W3C盒子模型）

标准模式看起更加容易理解一点。

(content)width = content-width 
(content)height = content-height

注意： 这里的高度和宽度并不是元素的真正宽高。这里的宽高指的是通过CSS设置的内容的宽高。 (吐槽：网上被广泛传播的这个图，我一直以为是错的…)

box-sizing属性

box-sizing属性可以让我们自由选择盒子的模式。

box-sizing:content-box/border-box/inherit content-box——默认值，采用Standard box model border-box——采用IE box model inherit——继承父元素属性值

借助这个属性，我们来看看到底IE盒子和W3C标准盒子到底有什么不同。

IE和W3C盒子的异与同

这里的padding和margin以及border为了书写方便，全部假定为左右值都相等，大家懂这个意思就好了。

W3C盒子

通过设置 box-sizing: content-box;，我们选定了W3C盒子模型。 图-W3C1：

图-W3C2：

通过W3C2我们可以明显的看出，contentWidth=width；即图阴影部分。 那么这个div元素的实际宽度（个人认为这个应该被称为做像素宽度）为：

contentWidth+padding*2+border*2+margin*2
=
100+50*2+0*2+200*2
=600px

IE盒子

IE盒子相比之下就显得很怪异了。 图-IE1：

在IE盒子的模式下，

contentWidth=width+padding*2+border*2

也就说我们设置了contentWidth=100px，但是由于padding*2=100px，所以把width的宽度消除了。 如果我们让padding=0，那么width则会恢复正常。 图-IE2

所以图-IE1中div元素的实际宽度(像素宽度)为：

width+margin*2
=
100+200*2
=500px

这里另外提一点， 如果 border+padding>width， 那么 width=border+padding; contentWidth=0;。 图—IE3

参考资料：