17370845950

默认情况下CSS盒模型width仅包含内容，使用box-sizing: border-box可使width包含padding和border，推荐全局设置以统一布局计算，避免错位，提升可维护性。

在CSS中，默认情况下元素的宽度（width）只包含内容区域，不包括padding和border。这意味着当你设置一个元素的宽度为200px时，实际占用的空间会更大，如果加上了padding或border的话。

box-sizing: content-box（默认行为）

• 设置的 width = 内容宽度
• padding 和 border 会额外增加元素总宽度
• 例如：width: 200px; padding: 10px; border: 5px solid;
• 实际宽度 = 200 + 2×10 + 2×5 = 230px

box-sizing: border-box（推荐用于精确控制）

• 设置的 width = 内容 + padding + border 的总宽度
• 更直观地控制布局，尤其在栅格系统中非常有用
• 例如：width: 200px; padding: 10px; border: 5px solid;
• 实际宽度就是 200px，内容区域会被压缩为 170px

如何启用：只需添加以下CSS：

.element {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 5px solid #000;
}

建议在全局重置样式中统一设置：

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

这样可以避免大多数因盒模型计算导致的布局错位问题。基本上就这些，合理使用 box-sizing 能让你的布局更 predictable 和易于维护。不复杂但容易忽略。