CSS盒模型

什么是盒模型

所有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盒模型更加适合计算，在布局严格的的时候可以选用它。