标准 CSS 盒模型采用给定元素的宽度，然后在该宽度上添加 padding 和 border，这意味着元素占用的空间大于给定的宽度。
以下图片说明了盒模型（Box Model）的层级分部：
由内到外，分别是：
-
content（内容）：盒子的内容，其中显示文本和图像 -
padding（填充）：围绕内容的透明区域（即边框和内容之间的空间） -
border（边框）：围绕在内边距和内容外的边框。 -
margin（边界）：边距周围的透明区域（即边距与任何相邻元素之间的空间）
IE 盒模型和 W3C 盒模型
这里需要介绍一下 IE 盒模型和 W3C 盒模型的区别。
盒模型分为两类：W3C 标准盒模型和 IE 盒模型。
盒模型：内容（content）、填充（padding）、 边框（border）、边距（margin）。
W3C 标准盒模型：height 和 width，包含 padding 和 border。
IE 盒子模型：height 和 width，不包含 padding 和 border。
.box {
width: 200px;
padding: 10px;
border: 5px solid plum;
margin: 0;
}
以上元素的宽度在 IE 盒模型和 W3C 盒模型中是不同的：
- W3C 盒模型：
200px + 10px + 10px + 5px + 5px = 230px，加上padding和border - IE 盒模型：
200px
如何进行不同盒模型的切换？
CSS3 box-sizing 属性提供给我们切换盒模型的权利，它有如下三个值：
-
content-box： 默认的标准（W3C）盒模型元素效果 -
border-box：触发怪异（IE）盒模型元素的效果 -
inherit：继承父元素box-sizing属性的值
.box {
box-sizing: content-box | border-box | inherit;
}
我们可能不明确或者总是去计算加上 padding 和 border 才能获取元素的实际大小，这变的很麻烦。这时，我们可以使用 box-sizing: border-box 设置有 padding 和 border 值时不把元素的宽度撑开。
