<p>box-sizing: border-box 使 width 等于元素总宽度（含 padding 和 border），避免 content-box 下的叠加溢出；全局重置 * { box-sizing: border-box } 是推荐做法，但需注意第三方库兼容性、遗留 JS 逻辑及 margin 始终不参与计算。</p>
box-sizing: border-box 能让 width 真正等于“盒子占多大地方”
你设 width: 300px，它就真占 300px 水平空间——不管有没有 padding: 16px 或 border: 2px solid #333。而 content-box（默认）下，这三者是叠加关系，实际宽度会变成 300 + 32 + 4 = 336px，极易撑破容器或破坏栅格对齐。
常见错误现象：
- 给卡片加了
padding后，width: 100%溢出父容器 - Flex 容器里子项设了
border，结果换行或错位 - 用 JS 读取
offsetWidth做计算，但样式里混用了两种box-sizing，值忽大忽小
全局重置 *, *::before, *::after { box-sizing: border-box; } 是最稳妥的起点
这条规则把所有元素（含伪元素）统一为 border-box 行为，省去逐个声明的麻烦。它从 IE8+ 就完全支持，移动端无兼容性顾虑。
但要注意几个边界条件：
立即学习“前端免费学习笔记（深入）”；
- 第三方 UI 库（如 Ant Design、Element Plus）内部通常已设
border-box，你自己的基础样式若没重置，同级元素就会行为不一致 - 老项目中若存在依赖
content-box计算逻辑的 JS（比如动态调整width时手动减去了padding），直接全局切换可能让布局偏移 -
margin始终不参与box-sizing计算——哪怕用了border-box，margin: 20px仍会让总占位多出 40px
哪些场景必须保留 content-box？
不是所有地方都适合一刀切。以下情况建议显式保留或局部覆盖：
- Canvas、SVG 或需要精确控制绘图区域尺寸的容器：内容区大小必须严格等于你写的
width/height，不能被padding或border挤压 - 某些表单控件（如原生
<input type="file">）在部分浏览器中对box-sizing支持不稳定，强行设border-box可能导致光标错位或点击热区异常 - 需要与遗留 CSS 模块共存时，优先在组件级 scope 内声明
box-sizing: border-box，而非污染全局
box-sizing 不解决 margin 溢出，这点最容易被忽略
很多人以为设了 border-box 就“万事大吉”，结果发现卡片还是撑出容器——问题往往出在 margin 上。
例如这段代码：
.card {
width: 300px;
box-sizing: border-box;
margin: 20px;
}
它的水平总占位是 300px + 20px × 2 = 340px，box-sizing 对 margin 完全无效。要真正控住整体尺寸，得靠 margin 自身的策略：用 gap 替代 margin（Flex/Grid）、用 container 配合 inset、或显式限制父容器 overflow: hidden。
