一道关于 Box-Sizing 的字节面试题

今天讲讲我很久以前面试字节时遇到的一道 CSS 面试题。

大家好，我是前端西瓜哥。今天讲讲我很久以前面试字节时遇到的一道 CSS 面试题。

有如下的 HTML 和 CSS 样式，问两个块橙色区域宽高分别为多少?

<style>
  .box {
    width: 10px;
    height: 10px;
    border: 1px solid #000;
    padding: 2px;
    margin: 2px;
    background-color: orange;
  }
  .content-box {
    box-sizing: content-box;
  }
  .border-box {
    box-sizing: border-box;
  }
</style>
<div class="box content-box"></div>
<div class="box padding-box"></div>

本题考查的是 CSS 盒子模型。

CSS 盒子模型

CSS 盒子组成由 4 个区域组成，从内到外依次为：

• Content box：内容盒子，用于显示内容(innerHTML)，默认通过 width 和 height 控制宽高。但如果
  box-sizing(盒模型的意思)属性设置为非 content-box 值，运用的规则会发生改变。
• Padding box：内边距盒子，通过 padding 属性可以设置内边距大小。
• Border box：边框盒子，通过 border 属性可以设置边框大小及样式。
• Margin box：外边距盒子，通过 margin 属性设置外边距大小。

需要注意的是，margin 不计入盒子的实际大小。比如盒子的背景色不会覆盖到 margin 的范围。你可以把 margin
当作多个盒子之间的空气墙，是用来控制盒子间的距离的。

我们可以通过 box-sizing 来控制 width 和 height 被应用到哪个盒子上，下面具体展开来说一说。

标准盒模型(content-box)

对于现代浏览器来说，元素默认应用标准盒模型。当然你也可以像下面这样做显式的设置。

.box {
  box-sizing: content-box;
}

标准盒模型中，width 和 height 属性用于设置 Content box 盒子。

我们回到题目，先看看第一个橙色块的宽高。

.box {
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  padding: 2px;
  margin: 2px;
  background-color: orange;
}
.content-box {
  box-sizing: content-box;
}

<div class="box content-box"></div>

content 的宽度为 10px。

padding 为 2px，这个 padding 是
padding-left、padding-right、padding-bottom、padding-left 的简写属性。盒子的宽需要将
padding-left 和 padding-right 都计算在内。

然后是左右两个 border 条。margin 不计算在盒模型中。

所以对于盒模型来说，宽度就是 16px(10 + 2 * 2 + 1 * 2)，高度同理，也是 16px。

这个就是答案了吗?

并不是，因为我们要找到的橙色块的宽高，其实就是 Padding box 的宽高，这个块并不包括黑色的 border 边框线。所以我们的第一个橙色块宽高为
14px。

我们再深挖一下，如果我们给 border 颜色设置为透明，比如 border: 1px solid rgb(0, 0, 0,
0)，你觉得橙色块宽高为多少?

答案是 16px。背景色会先填充整个盒子，然后再在其上添加 border。如果 border 变成透明了，就会将它原本覆盖的部分橙色区域显现出来。

怪异盒模型(border-box)

怪异盒模型，也叫 IE 模型。

IE 浏览器的早期版本没有遵循 CSS 标准，width 和 height 是用来设置 Border box 的宽高，而不是 Content box
的宽高，导致不同浏览器的表现不同，毫无疑问是个浏览器 bug。

后来 CSS3 引入了
box-sizing，让开发者可以选择使用哪种盒模型，提供更好的灵活性。通过下面的设置，我们可以将元素的盒模型设置为怪异盒模型。

.box {
  box-sizing: border-box;
}

怪异盒模型中，width 和 height 属性用于设置 Border box 盒子。即我们直接给元素对应的盒子设置了宽高，再通过 padding 和
border，才能计算出 Content box。

我们看看题目中第二个橙色块的宽高如何计算。

.box {
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  padding: 2px;
  margin: 2px;
  background-color: orange;
}
.border-box {
  box-sizing: border-box;
}

<div class="box border-box">

盒模型宽为 10px，减去 border 的 2px(左右两条 1px 的边框线)，计算出来的就是 Border box 盒子的宽度
8px。高度计算同理。

所以本题的答案是：第一个橙色块的宽高为 14px，第二个橙色块的宽高为 8px。

结尾

对于 DOM 元素来说，我们有两种盒模型：

1. box-sizing: content-box：width 和 height 对 Content box 生效的标准盒模型，是默认的盒模型;
2. box-sizing: border-box：width 和 height 对 Border box 生效的怪异盒模型。

另外，box-sizing 仅支持上面两种值，是没有 padding-box 这种盒模型的，不要想太多。