CSS: 盒子模型

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 是这样的：

内容区就是 100px * 100px

border-box 是这样的：

整个 div 才是 100px * 100px

公式

1. content-box (width: 100px, height: 100px)
   div 的 width = 设置的 width = 100px
   div 的 height = 设置的 height = 100px

2. border-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 的宽高，虽然感觉很简单但是这个方法真的很实用。