Tailwind CSS - 盒模型

Tailwind CSS 现代指南：盒模型（Box Sizing）

box-sizing 工具类控制元素总宽度和高度的计算方式。理解这一点对于创建可预测且易于维护的 CSS 布局至关重要。

现代默认设置：box-border

默认情况下，Tailwind CSS 会对每个元素应用 box-sizing: border-box;。这是一种使布局计算直观的现代最佳实践。当您设置元素的宽度时，该宽度将包括其内边距（padding）和边框（border），而不仅仅是其内容（content）。

• box-border (border-box)：width + height = 内容 + 内边距 + 边框。如果您设置 w-32，则无论其内边距或边框厚度如何，元素的最终渲染宽度都将是 8rem (128px)。
• box-content (content-box)：width + height = 仅内容。如果您设置 w-32 并添加 p-4，则元素的最终渲染宽度将是 8rem（内容） + 1rem（左内边距） + 1rem（右内边距） = 10rem (160px)。

盒模型工具类

虽然 box-border 是默认设置，但您可以在需要时覆盖它。

Class	CSS 属性	描述
box-border	box-sizing: border-box;	宽度和高度属性包含内容、内边距和边框。这是 Tailwind 的默认设置。
box-content	box-sizing: content-box;	宽度和高度属性仅包含内容。内边距和边框在此基础上额外添加。

可视化差异

以下示例清楚地说明了 box-border 为何如此有用。两个蓝色盒子都指定了 w-48，但其中一个使用了 box-content。请注意，box-content 元素变得更宽，因为其内边距和边框是额外添加到其宽度上的。

示例代码 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Box Sizing Example</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100 p-8 font-sans">

  <div class="space-y-6">
    <div>
      <h2 class="text-2xl font-bold mb-2 text-slate-800">`box-border` (Default)</h2>
      <p class="mb-3 text-slate-600">Final width is exactly `w-48`. Padding and border are contained within.</p>
      <div class="box-border w-48 h-32 p-4 border-8 border-blue-600 bg-blue-300">
        <div class="bg-blue-800 text-white p-2">Content</div>
      </div>
    </div>

    <div>
      <h2 class="text-2xl font-bold mb-2 text-slate-800">`box-content` (Override)</h2>
      <p class="mb-3 text-slate-600">Final width is `w-48` + padding + border. The element is visibly wider.</p>
      <div class="box-content w-48 h-32 p-4 border-8 border-blue-600 bg-blue-300">
         <div class="bg-blue-800 text-white p-2">Content</div>
      </div>
    </div>
  </div>

</body>
</html>

何时使用 box-content？

在现代开发中，您很少需要使用 box-content。它的主要用例是与第三方组件或期望 content-box 行为的传统 CSS 进行集成。通过提供 box-content 工具类，Tailwind 为您提供了一个应对这些特定情况的灵活方案，同时不会干扰项目中其他部分的 border-box 默认设置。