{ box-sizing: border-box } 不够用，必须显式声明 , ::before, ::after 和表单控件；伪元素默认 content-box 会撑开布局，旧版 safari 中表单控件继承不稳定，js 尺寸计算需适配 border-box 含边距逻辑。
直接写 * 不能统一盒模型，必须显式包含伪元素和表单控件——否则布局会在 Safari、旧版 Chrome 或第三方组件中意外溢出。
为什么 * { box-sizing: border-box } 不够用
通配符 * 只匹配真实 DOM 元素，不覆盖 ::before 和 ::after 生成的内容。而这些伪元素默认是 content-box，一旦你用它们画装饰边框、三角箭头或做布局辅助，padding/border 就会额外撑开容器。
- 常见错误现象：卡片加了
::after { content: ""; display: block; width: 100%; height: 2px; }，但底部多出滚动条或换行 - 原因不是代码写错，而是这个伪元素仍按
content-box解析，2px 高度 + 自身 margin/padding（如有）叠加导致超限 - 某些 UI 库（如 Ant Design）内部已设
box-sizing: border-box，但你外层容器加了padding后又没重置，尺寸会二次膨胀
*::before, *::after 必须显式声明
这是最容易被跳过的三行代码，却是真正生效的最小完整集：
*, *::before, *::after {
box-sizing: border-box;
}
- 它覆盖所有动态插入的节点、JS 创建的伪元素、CSS-in-JS 注入的样式
- 不依赖继承，每个选择器独立生效，避免“看似写了却漏掉”的情况
- 若项目用 Web Components 或 Shadow DOM，该规则对外部无效，需在组件
:host或style标签内重复写一遍
表单控件要单独补一句
原生 <input>、<textarea></textarea>、<select></select>、<button></button> 在旧版 Safari（≤12）或部分 Android WebView 中，对 box-sizing 的继承行为不稳定——即使父级写了全局规则，它们仍可能按 content-box 渲染，造成光标偏移、高度塌陷或宽度不准。
- 必须加显式声明：
input, textarea, select, button { box-sizing: border-box; } - 不要用
input[type="text"]这类细化选择器，会漏掉type="email"、type="search"等 - SVG 元素（如
<circle></circle>、<rect></rect>）和替换元素（如<img>）不受影响，但若设了display: block再加padding，border-box就会生效——这点常被忽略
切换后 JS 尺寸读取逻辑会变
如果你代码里用了 element.offsetWidth、getBoundingClientRect() 或基于 clientWidth 做动态计算（比如弹窗定位、Tooltip 翻转、Canvas 映射），切换到 border-box 后，这些值代表的是「含 padding + border」的总宽，不再是 content-box 下的「纯内容宽 + 手动累加」。
- 不会报错，但计算结果会整体偏小，导致位置偏移、缩放失准
- 重点检查：表单校验提示的 left/top 计算、拖拽缩放的边界判断、响应式图表的 canvas.width 推导
- 调试技巧：在 DevTools 里临时删掉全局
box-sizing规则，对比offsetWidth值变化，快速定位是否是它引发的问题
真正难的不是写出那几行 CSS，而是后续有人加了 .legacy-widget { box-sizing: content-box !important; }，或者某插件 CSS 漏写了伪元素——这种问题只在 Safari 上复现，还很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
