CSS 布局核心：box-sizing 属性

Begindev 编辑部 March 25, 2026

CSS 中的 box-sizing 属性用于控制浏览器如何计算元素总尺寸。

默认情况下（content-box），你为元素设置的 width 和 height 仅适用于其内容区域。内边距（padding）和边框（border）随后会添加在这个尺寸之上，可能会使元素比你预期的要大。

box-sizing 属性允许你改变这种行为，提供更直观的尺寸控制。

本章节将涵盖 box-sizing 的值（content-box 和 border-box），它们对元素尺寸的影响，以及如何在你的 CSS 中有效地使用它们。

1. 理解 `content-box` (默认值)

box-sizing 属性的默认值是 content-box。

当 box-sizing: content-box 应用于元素时，width 和 height 属性仅定义元素内容区域的大小。内边距和边框会添加到这个内容区域之外，从而增加元素的总尺寸。

1.1 示例

<!DOCTYPE html>
<html>
<head>
<style>
.content-box-example {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box; /* 显式设置默认值 */
}
</style>
</head>
<body>
  <div class="content-box-example">
    这是一个 content-box 示例。
  </div>
</body>
</html>

计算逻辑：

总宽度 = 200px (内容) + 20px (左内边距) + 20px (右内边距) + 5px (左边框) + 5px (右边框) = 250px。
总高度 = 100px (内容) + 20px (上内边距) + 20px (下内边距) + 5px (上边框) + 5px (下边框) = 150px。

1.2 为什么 `content-box` 会带来问题？

当你试图创建特定尺寸的布局时，使用 content-box 可能会导致意外结果。如果你将元素的宽度设置为 200px，然后添加内边距或边框，该元素实际上会变得比 200px 更宽，这可能会破坏你的布局（例如导致侧边栏掉到下一行）。这使得计算元素实际占用的空间变得更加困难。

2. 探索 `border-box`

border-box 值提供了一种更直观的方式来控制元素尺寸。

当 box-sizing: border-box 应用时，width 和 height 属性定义的是整个元素的大小，包含内容、内边距和边框。内容区域会自动收缩以吸收任何内边距和边框值。

2.1 示例

<!DOCTYPE html>
<html>
<head>
<style>
.border-box-example {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}
</style>
</head>
<body>
  <div class="border-box-example">
    这是一个 border-box 示例。
  </div>
</body>
</html>

计算逻辑：

总宽度 = 200px (固定不变)。内容宽度会自动变为：200px - 40px (左右内边距) - 10px (左右边框) = 150px。
总高度 = 100px (固定不变)。内容高度会自动变为：100px - 40px (上下内边距) - 10px (上下边框) = 50px。

2.2 `border-box` 的好处

border-box 简化了布局计算，因为指定的 width 和 height 始终代表元素的可见尺寸。这使得创建精确适合其容器的元素变得更加容易，避免了意外的溢出或布局破坏。在使用百分比宽度时，这一点尤为重要。

3. 通用 Box-Sizing 声明 (最佳实践)

一种通用的最佳实践是使用以下 CSS 将 box-sizing: border-box 应用于页面上的所有元素：

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

3.1 代码解析

html { box-sizing: border-box; }：将根元素 html 的 box-sizing 属性设置为 border-box。这确保了 border-box 模型被确立为整个文档的默认值。
*, *:before, *:after { box-sizing: inherit; }：这行代码适用于所有元素 (*) 及其伪元素 (:before 和 :after)。通过设置 box-sizing: inherit，这些元素将从其父元素（最终从 html 元素）继承 box-sizing 值。

3.2 为什么要使用通用声明？

一致性 (Consistency)：它在整个网站上建立了统一的盒模型计算方式，让布局计算变得轻松许多。
可预测性 (Predictability)：你可以确信，你为元素设置的宽度和高度就是它的实际显示尺寸（包含内边距和边框）。
简化开发 (Simplified Development)：减少了由默认的 content-box 模型引起的意外布局问题的可能性。

4. 实战示例

4.1 示例 1：创建等宽列

想象一下你想在容器内创建三个等宽的列。

1. 不使用 border-box 的情况：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
}
.column {
  width: 33.33%;
  padding: 10px;
  border: 1px solid black;
}
</style>
</head>
<body>
  <div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</body>
</html>

结果：在这种情况下，因为 box-sizing 默认为 content-box，内边距 (padding) 和边框 (border) 会被额外添加到宽度上。这使得每一列的实际宽度都超过了 33.33%，从而导致它们换行到下一行，或者溢出容器（取决于容器的 overflow 属性）。

2. 使用 border-box 的情况：

<!DOCTYPE html>
<html>
<head>
<style>
html {
  box-sizing: border-box; /* 全局设置 */
}
*, *:before, *:after {
  box-sizing: inherit;    /* 继承设置 */
}
.container {
  display: flex;
}
.column {
  width: 33.33%;
  padding: 10px;
  border: 1px solid black;
}
</style>
</head>
<body>
  <div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</body>
</html>

结果：通过应用通用 border-box 声明，这些列现在将完美地适应容器。

每一列恰好占据可用空间的三分之一（包含内边距和边框）。
浏览器会自动减小内容区域的宽度以容纳内边距和边框，从而确保总宽度保持为 33.33%。

4.2 示例 2：带有内边距 padding 和边框 border 的输入框

试想一下，为输入框设置内边距和边框样式的情况。

1. 不使用 border-box：
如果你为输入框设置了固定宽度，然后添加内边距或边框，输入框的总宽度将超出你指定的宽度。这可能会导致对齐问题或布局混乱。

2. 使用 border-box：

<!DOCTYPE html>
<html>
<head>
<style>
html {
  box-sizing: border-box; /* 全局设置 */
}
*, *:before, *:after {
  box-sizing: inherit;    /* 继承设置 */
}
input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>
</head>
<body>
  <input type="text" placeholder="Enter text">
</body>
</html>

结果解析：使用 border-box 后，无论内边距和边框如何设置，输入框的宽度将始终保持为 200px。

浏览器会自动收缩内容区域（输入文字的地方）以腾出空间给内边距和边框，确保输入框能整齐地放入容器中，不会撑破布局。

1. 理解 content-box (默认值)