CSS `Box Sizing` (`content-box`, `border-box`) 在复杂布局中的作用 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！我是你们的老朋友，Bug终结者。今天咱们不聊风花雪月，来点硬核的——CSS 的 box-sizing 属性，这玩意儿在复杂布局中可是个隐藏的大 Boss。别看它只有 content-box 和 border-box 两个兄弟，但用不好，能让你对着屏幕挠头三天三夜。

准备好了吗？系好安全带，咱们要起飞了！

开场白：Box Model 的爱恨情仇

要理解 box-sizing，就得先跟 CSS 的 Box Model（盒子模型）打个照面。这玩意儿就像一个俄罗斯套娃，每个 HTML 元素都是一个盒子，从里到外依次是：

Content（内容）： 盒子的核心，放文本、图片的地方。
Padding（内边距）： 内容和边框之间的空隙，让内容不紧贴边框。
Border（边框）： 盒子的外壳，可以设置粗细、颜色、样式。
Margin（外边距）： 盒子与其他盒子之间的距离，让盒子们不挤在一起。

问题就出在这个 Box Model 的计算方式上。默认情况下（也就是 box-sizing: content-box），你设置的 width 和 height 属性仅仅指的是 Content 区域的宽高。Padding 和 Border 会额外增加盒子的总宽高。

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
}

在这个例子中，.box 元素的实际宽度是 200px + 20px + 20px + 5px + 5px = 250px，高度是 100px + 20px + 20px + 5px + 5px = 150px。

是不是感觉有点坑爹？明明想让盒子是 200px 宽，结果加上 padding 和 border 就超出了。这在简单布局中可能问题不大，但在复杂布局中，尤其是在需要精确控制元素尺寸的情况下，简直就是噩梦。

content-box：默认的烦恼

content-box 是 box-sizing 的默认值。这意味着，如果你不显式地设置 box-sizing 属性，所有的元素都会按照 content-box 的方式来计算尺寸。

<div class="container">
  <div class="box content-box-example">Content Box</div>
</div>

.container {
  width: 300px;
  border: 1px solid red;
}

.box {
  width: 100%; /* 期望占据容器的全部宽度 */
  padding: 10px;
  border: 1px solid blue;
}

.content-box-example {
  box-sizing: content-box; /* 显式指定，虽然默认就是这个值 */
}

在这个例子中，我们期望 .box 元素占据 .container 的全部宽度（300px）。但是，由于 content-box 的计算方式，.box 元素的实际宽度会超出 .container，导致布局错乱。实际宽度为 300px + 10px + 10px + 1px + 1px = 322px。

border-box：救星降临

border-box 才是真正的英雄。当你设置 box-sizing: border-box 时，width 和 height 属性就包含了 content、padding 和 border。也就是说，你设置的宽高就是盒子的 总宽高，padding 和 border 会在 content 区域内部进行分配。

<div class="container">
  <div class="box border-box-example">Border Box</div>
</div>

.container {
  width: 300px;
  border: 1px solid red;
}

.box {
  width: 100%; /* 期望占据容器的全部宽度 */
  padding: 10px;
  border: 1px solid blue;
}

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

现在，.box 元素仍然占据 .container 的全部宽度（300px），padding 和 border 不会增加盒子的总宽度。

全局设置 border-box：一劳永逸

为了避免每次都要单独设置 box-sizing 属性，最佳实践是在 CSS 中全局设置 border-box。

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

这段代码的意思是：

首先，给 html 元素设置 box-sizing: border-box。
然后，给所有元素（*）以及它们的 ::before 和 ::after 伪元素设置 box-sizing: inherit。inherit 的意思是继承父元素的 box-sizing 属性。

这样，所有元素都默认使用 border-box，除非你显式地覆盖它。

border-box 在复杂布局中的应用

border-box 在复杂布局中简直就是神兵利器。它可以帮助你轻松实现各种复杂的布局效果，而不用担心尺寸计算的问题。

1. 网格布局（Grid Layout）

在网格布局中，经常需要将元素放置在特定的网格单元格中。使用 border-box 可以确保元素的大小与网格单元格的大小完全匹配。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 创建两列，每列占据剩余空间的 1/2 */
  gap: 10px; /* 设置网格单元格之间的间距 */
}

.grid-item {
  box-sizing: border-box; /* 关键！ */
  padding: 20px;
  border: 1px solid black;
}

在这个例子中，grid-template-columns: repeat(2, 1fr) 创建了两列，每列占据剩余空间的 1/2。如果没有 box-sizing: border-box，.grid-item 元素的实际宽度会超出网格单元格的宽度，导致布局错乱。

2. 弹性盒子布局（Flexbox Layout）

在弹性盒子布局中，可以使用 flex-basis 属性来设置元素的初始大小。使用 border-box 可以确保元素的大小与 flex-basis 属性的值完全匹配。

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.flex-container {
  display: flex;
}

.flex-item {
  box-sizing: border-box; /* 关键！ */
  flex-basis: 200px; /* 设置元素的初始大小 */
  padding: 20px;
  border: 1px solid black;
}

在这个例子中，flex-basis: 200px 设置了 .flex-item 元素的初始大小为 200px。如果没有 box-sizing: border-box，.flex-item 元素的实际宽度会超出 200px，导致布局错乱。

3. 百分比布局

在百分比布局中，经常需要让元素占据父元素的特定百分比的宽度或高度。使用 border-box 可以确保元素的大小与百分比值完全匹配。

<div class="container">
  <div class="percentage-box"></div>
</div>

.container {
  width: 500px;
}

.percentage-box {
  box-sizing: border-box; /* 关键！ */
  width: 50%; /* 占据父元素宽度的一半 */
  padding: 20px;
  border: 1px solid black;
}

在这个例子中，width: 50% 设置了 .percentage-box 元素占据父元素宽度的一半。如果没有 box-sizing: border-box，.percentage-box 元素的实际宽度会超出父元素宽度的一半，导致布局错乱。

4. 固定宽度元素与自动宽度元素混合布局

假设我们有一个容器，需要放置一个固定宽度的侧边栏和一个自动宽度的内容区域。

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

.container {
  width: 500px;
  display: flex; /* 使用 flexbox 布局 */
}

.sidebar {
  box-sizing: border-box;
  width: 150px; /* 固定宽度 */
  padding: 10px;
  border: 1px solid #ccc;
}

.content {
  box-sizing: border-box;
  flex-grow: 1; /* 占据剩余空间 */
  padding: 10px;
  border: 1px solid #ccc;
}

在这个例子中，.sidebar 的宽度固定为 150px，.content 使用 flex-grow: 1 占据剩余空间。由于都使用了 box-sizing: border-box，padding 和 border 不会影响总宽度，布局更加稳定可靠。

案例分析：一个响应式导航栏

咱们来个更实际的例子：一个响应式导航栏。这个导航栏在桌面端水平排列，在移动端垂直排列。

<nav class="navbar">
  <ul class="nav-list">
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item"><a href="#">Services</a></li>
    <li class="nav-item"><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 水平排列 */
  justify-content: space-around; /* 平均分配空间 */
}

.nav-item {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .nav-list {
    flex-direction: column; /* 垂直排列 */
  }

  .nav-item {
    width: 100%; /* 占据全部宽度 */
  }
}

在这个例子中，box-sizing: border-box 保证了每个导航项在桌面端和移动端都能正确地占据空间，padding 和 border 不会影响总宽度。

box-sizing 的兼容性

box-sizing 属性具有良好的浏览器兼容性，几乎所有现代浏览器都支持它。

浏览器	支持版本
Chrome	1.0
Firefox	1.0
Safari	1.0
Opera	7.0
Internet Explorer	8.0
Edge	所有版本

总结：box-sizing 的最佳实践

全局设置 border-box： 这是最佳实践，可以避免每次都要单独设置 box-sizing 属性。
```
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
```
理解 content-box 和 border-box 的区别： 这是使用 box-sizing 的基础。
在复杂布局中使用 border-box： 它可以帮助你轻松实现各种复杂的布局效果，而不用担心尺寸计算的问题。
避免混用 content-box 和 border-box： 尽量保持一致，避免出现意外的布局问题。

常见问题答疑

为什么默认的 box-sizing 是 content-box？

历史原因。在 CSS 诞生之初，content-box 是唯一的选择。后来，border-box 的出现解决了 content-box 的一些问题，但为了保持向后兼容性，content-box 仍然是默认值。
什么时候应该使用 content-box？

很少情况下需要显式使用 content-box。除非你有一个非常特殊的需求，需要精确控制 content 区域的大小，否则建议使用 border-box。
box-sizing 会影响 JavaScript 中获取元素尺寸的方式吗？

是的。在使用 JavaScript 获取元素尺寸时，需要注意 box-sizing 的设置。例如，offsetWidth 和 offsetHeight 属性会返回元素的总宽度和高度，包括 content、padding 和 border。如果使用 content-box，你需要手动计算 padding 和 border 的值才能得到 content 区域的宽度和高度。

结束语

好了，今天的 box-sizing 讲座就到这里。希望大家通过今天的学习，能够更好地理解和运用 box-sizing 属性，在复杂布局中游刃有余。记住，border-box 是你的好朋友，用好它，可以让你少掉几根头发！

下次再见，祝大家 Bug 越来越少，代码越来越香！

发表回复 取消回复

发表回复取消回复