盒模型！！

当我们学习 CSS 的时候，总是会听到一个盒模型的概念。它是 CSS 的基础，如果你不能理解盒模型，那你就无法学好 CSS 。

在 HTML文档结构中，每一个元素都有属于自己的一个矩形框。这个矩形框被称之为：元素框(Element box) ，它描述了一个元素在文档布局中的位置以及所占大小。同样，每一个元素框也会影响其他元素框。

盒模型

盒模型由内部的元素，元素外层的 padding ，以及边框 border ，和边框外部的 margin 组成。

盒模型的区别 ？？

HTML

view

假设现在我们有这样一个盒模型，我们希望 box-child 的元素宽度和高度都为 100px ，然后我们又给他添加了一个 10px 的边框。
那么问题来了？？ 现在这个 box-child 的宽高分别是多少？？

CSS

content-box

很显然，内容的宽度还是 100px ，并没有改变。只是在 border 上添加了 10px 。

但是如果我们给上面的 CSS 样式添加一句呢？

CSS

border-box

结果变了！！
width 和 height 的 100px 变成了 内容和 border 的总和。不是向上面那样直接进行加法计算了！

这是由于盒模型不同的计算方式导致的计算结果不同。

W3C盒模型

content-box

在 W3C 制定的规范中，盒模型的宽度和高度所指都是内容区域(content)的高度和宽度。

不论你外层的 padding 、 border 、 margin 如何变化，都不会影响你内容的宽高。

默认情况下我们所用盒模型都为 W3C 的盒模型。

IE盒模型

border-box

IE盒模型 一般针对于 IE5.5及更早的版本之中。IE6之后在标准兼容模式下所使用的为 W3C 的盒模型。
在 IE盒模型中，width 和 height 包含了内容区域(content) 以及 padding 和 border 。所以 IE盒模型在计算时，实际上只包含两部分， width/height 以及 margin 。

更改计算方式

在 CSS3 新增了一个属性 box-sizing ，它可以控制当前文档内盒模型的计算方式。

box-sizing: border-box || content-box || inherit

border-box：将当前盒模型更改为 IE盒模型。即 width/height = content + padding + border 的计算方式；
content-box(默认)：当前盒模型为 W3C盒模型。即 width/height = content ；
inherit：继承父元素的盒模型。