box-sizing: border-box使width/height直接等于元素最终占位尺寸，包含padding和border，避免content-box下因额外叠加导致的布局错位、溢出与换行。
它让 width 和 height 直接等于元素最终占位尺寸，而不是只算内容区。 这不是“锦上添花”，而是避免布局错位的底层前提——尤其当你加了 padding 或 border 时，content-box 下的实际宽度会悄悄变大，而 border-box 把这个“悄悄”给堵死了。
为什么全局设 box-sizing: border-box 是默认操作
不是为了炫技，是为省掉大量心算和调试时间：
- 响应式栅格里，
width: 33.33%的列加了padding: 16px，content-box下直接撑破容器；border-box下它就老老实实卡在 33.33% 内 - 表单控件（
<input>、<textarea></textarea>）浏览器自带padding和border，不重置的话，跟自定义卡片对不齐是常态 - Flex/Grid 里设了
flex: 1或grid-column: span 2，但子项有padding，content-box会让内容被截断或溢出 - 第三方组件库（如 antd）可能局部覆盖你的样式，
box-sizing没统一，Computed Styles 里一眼就能看出谁“掉队”了
*, *::before, *::after 这个写法为什么不能简写成 *
因为伪元素（::before、::after）不继承 box-sizing，且某些旧版 Safari 对 *::after 有解析 bug。漏掉它们，你用伪元素画边框或装饰块时，尺寸还是按 content-box 算——看着像没生效。
正确写法必须显式包含：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after {
box-sizing: border-box;
}别信“html { box-sizing: border-box } + * { box-sizing: inherit }”这种写法：伪元素不继承，inherit 在这里无效。
哪些地方必须手动切回 content-box
不是所有场景都适合一刀切。真遇到以下情况，得局部覆盖：
-
<canvas></canvas>容器：若设width: 100%且依赖 JS 读取canvas.width像素值，border-box会让绘图区域被padding挤压，导致模糊或拉伸 - 用
background-size: contain对齐图片时，若背景图需严格匹配原始content尺寸，border-box会干扰比例计算 - CSS-in-JS 动态注入的内联样式（比如 emotion 的
css函数），若未显式设置box-sizing，可能沿用浏览器默认值，造成局部不一致
这时加一行 box-sizing: content-box; 即可，别动全局规则。
真正容易被忽略的，是第三方组件内部的 box-sizing ——它们常带 reset 样式，但未必覆盖全部伪元素或深层嵌套节点。调试时别只看 class 名，直接在 DevTools 的 Computed 面板里查 box-sizing 行，确认它到底是什么值。
