CSS 盒子模型基本上是面试的必考题，因为实在是太重要了。以前写 CSS 总是感觉元素的宽高十分难调，其中一个很大的问题就是忽略了盒子模型的重要性。
说到 CSS 盒子模型，你可能会说我知道呀，就是 margin 包 border, border 包 padding, padding 包 content 嘛，这就是盒子模型。这样理解也是对的，但是这样的理解忽略了盒子模型有两种的概念。一个是 content-box 另一个是 border-box。
你有没有这样的经历：在这个网页上宽高都是调对的，但是引入了一个带有自己 CSS 文件的第三方库或者插件后，全乱了。一个主要的原因有可能就是你本来的网页使用了默认的 content-box，而引入的库使用了 border-box，他把你的覆盖了。你所设置的 width 和 height 就是不再是内容区 content 的宽高，而是 2border + 2padding + width 和 2border+2padding+width。
例子
假如有两个 div 代码在这里
<div class="content-box"></div>
<div class="border-box"></div>
都设置他们的宽高是 100px，加上一背景色和 border。唯一区别是 box-sizing 不一样。
div {
height: 100px;
width: 100px;
padding: 10px;
border: 3px solid green;
background: red;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
可以看到结果，content-box 是这样的：
border-box 是这样的：
公式
content-box (width: 100px, height: 100px)
div 的 width = 设置的 width = 100px
div 的 height = 设置的 height = 100pxborder-box (width: 100px, height: 100px)
div 的 width= 设置的 width + 2 * 设置的 padding + 2 * 设置的 border-width
div 的 height = 设置的 height + 2 * 设置的 padding + 2 * 设置的 border-width
万能调试法
如果你实在晕，又想确定这个 div 的宽高如何，可以加一个
div {
border: 1px solid red;
}
来看这个 div 的宽高，虽然感觉很简单但是这个方法真的很实用。
