默认情况下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 包含 content + padding + border：- 设置的 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 和易于维护。不复杂但容易忽略。
