当我们学习 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：继承父元素的盒模型。
网友评论