什么是盒模型
所有HTML元素可以看作盒子。
我们可以将它想象成礼品包装：
首先我们有一些魔方，它们有自己的大小；
我们要将些魔方送人，这时候我们就要找一些礼盒来包装它们；
礼盒与魔方之间一般有些充气薄膜；
接下来我们将它们摆放在一个更大的容器里面，礼盒与礼盒之间也会有些距离。
类比盒模型就是这个样子的
魔方——content
礼盒与魔方的内距——padding
礼盒——border
礼盒与礼盒之间的间距——margin
下面的图片说明了盒子模型(Box Model)：
CSS box-model
盒模型都有哪些
现在常见的有两种盒模型，一种是标准盒模型，另一种是IE盒模型
这两种盒模型有什么区别
借用一下两张图来说明它们之间的区别
PS：w3c值得就是标准盒模型
这两张图是非常相似的，从外到内都是margin->border->padding->content
他们之间的不同就是width以及height的划定范围：
在标准盒模型中，width = content的宽度
在IE盒模型中，width = content的宽度 + padding的宽度 + border的宽度
在CSS中如何指定盒模型呢？
要实现指定盒模型只需要一个属性：box-sizing
标准盒模型：
box-sizing :content-box;
实际上它是默认的，我们可以不用设置。
IE盒模型：
box-sizing :border-box;
这里需要说明一下，box-sizing还有一个值是padding-box，对于这个属性我了解的少，大家可自行查阅。
我的看法
两种盒模型的选用都要结合实际。
IE盒模型更加适合计算，在布局严格的的时候可以选用它。
