1. 简介

还记得开幕式的例子吗？假设网页是一个队伍，那么元素就是其中的一个个队员。每个队员有高有矮，有胖又瘦，队员之间的距离有远有近，组成一个理想的队形。网页中的元素是什么形状呢？这里再举个例子，不知道大家有没有见到过快递柜？现在快递员经常会将你的快递放到快递柜中通知你去取。元素就像快递柜的格子一样。假设你购买了一双鞋，鞋盒外面包裹有一层快递盒，鞋盒是实际你当时购买的内容，和快递盒的距离是内边距，盒子外表面到隔壁柜子外表面的距离就是外边距了。可以看下面这张图：

快递柜

上图中，我们只考虑快递纸箱会有厚度，鞋盒以及柜子的厚度忽略不计，并且元素盒模型不像现实中的快递一样有重力属性，底部是可以不必紧贴在一起的。我们来看一下抽象后的元素盒模型。

盒模型

不同部分的说明如下：

margin(外边距) - 清除边框外的区域，外边距是透明的。
border(边框) - 围绕在内边距和内容外的边框。
padding(内边距) - 清除内容周围的区域，内边距是透明的。
content(内容) - 盒子的内容，显示文本和图像。

2. 各执一词的W3C标准盒模型与IE盒模型

设想你是一位快递运输员，需要在你的货车撞上需要运输的货物。W3C快递公司的是按货物的实际大小计价的，你只知道货物的实际大小，还需要根据包裹货物的盒子厚度，盒子与实际货物的间隙来计算该快递包裹的实际占据空间。而当你精疲力尽摆好货物以后，顾客要求为他的贵重物品填充更多的保护泡沫，更换更厚的纸箱，你将要重新计算它的大小，重新摆放。想想都觉得麻烦。

而IE快递公司让收件员收货的时候将快递打包，根据包裹的大小计价，并告知你包裹的宽高，你只需要关注这个宽高以及包裹之间的距离即可，不用管里面包裹的物品，纸箱的厚度，或者纸箱和实际货品的间隙有多大。

你会选择就职于哪家公司呢？是的，被人吐槽的IE快递公司在这里的设计更为符合常理。我们来看一下两种盒模型的详细说明。

2.1 W3C标准盒模型

W3C标准盒模型

从上图可以看出，对于W3C盒模型：

总宽度 = width + padding + border + margin
总高度 = height + padding + border + margin

更具体来讲应该是如下公式：

总宽度 = width + padding-left +border-left + margin-left + padding-right + border-right + margin-right
总高度 = height + padding-top + border-top + margin-top + padding-bottom + border-bottom + margin-bottom