box-sizing: border-box 使 width/height 包含 padding 和 border，避免尺寸计算偏差；全局推荐用 *, *::before, *::after 设置，少数场景如 canvas 容器需手动切回 content-box。
box-sizing: border-box 是什么，为什么它能少写几行代码
它让元素的 width 和 height 包含 padding 和 border，而不是只算 content 区域。默认的 content-box 下，设 width: 200px + padding: 10px + border: 1px，实际占宽是 222px —— 这在栅格、卡片、表单控件里特别容易错位。
用 border-box 后，同样设置下，元素就老老实实占满 200px，padding 和 border 往里“挤”，不用反复心算。
全局设置 box-sizing: border-box 的安全写法
直接在 :root 或 * 上设会出问题：表单控件（比如 <input>、<textarea></textarea>）在某些浏览器里有固有样式，粗暴重置可能破坏默认外观或焦点表现。
推荐这样写：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after {
box-sizing: border-box;
}
这个写法覆盖所有元素及其伪元素，同时避开部分旧版 Safari 对 *::after 的兼容性 bug。别漏掉 ::before 和 ::after，否则你用伪元素做装饰边框时，它们还是按 content-box 算尺寸。
哪些地方必须手动切回 content-box
极少数场景下，border-box 反而会让逻辑变复杂：
- 需要精确控制 content 区域大小的 canvas 或 svg 容器（比如
width: 100%但要求内部绘图区域严格为 500px） - 使用
background-size: contain且依赖原始 content 尺寸对齐的图片容器 - 某些 CSS-in-JS 库动态注入的内联样式，若未继承全局 box-sizing，可能意外失效
这时加一行 box-sizing: content-box; 即可，不需要改整个组件结构。
和 flex / grid 布局混用时的常见错觉
很多人以为用了 display: flex 就不用管 box-sizing 了——其实不是。flex item 的 flex-basis 默认仍受 box-sizing 影响；grid item 的 minmax() 或 fr 单位虽不直接受影响，但一旦你给 item 设了固定 width，就又回到 box-sizing 规则里。
典型错误现象：
- flex 容器里两个
width: 50%的子项，右边总多出 1–2px 缝隙 - grid 中设了
grid-template-columns: 1fr 1fr，但加了padding后内容不对齐
根本原因：没统一 box-sizing，导致 padding/border 没被纳入计算基准。只要确保父容器和子项都走 border-box，这类缝隙基本消失。
真正容易被忽略的是：第三方 UI 组件库（比如 antd、element-plus）往往自带重置样式，可能局部覆盖你的全局设置。检查 computed styles 时，盯着 box-sizing 这一行看，别只看 class 名。
