必须用 *、*::before、*::after 三者联合选择器一次性覆盖，缺一不可；因伪元素不继承 box-sizing，默认 content-box，易导致撑开、溢出等问题，且第三方库重置规则不统一，须确保全局规则置于其后，并对表单控件单独加固，同时注意 JS 尺寸计算和 min/max-width 的适配。
必须用 *、*::before、*::after 三者联合选择器一次性覆盖，缺一不可——只写 * 或只写 html 都会漏掉关键节点，撑开问题照旧。
为什么只写 * 不够
伪元素（如 ::before 和 ::after）不继承 box-sizing，它们默认仍是 content-box。哪怕父元素设了 border-box，一个用于清除浮动或画装饰边框的 ::after 仍可能悄悄加出额外宽度。
常见翻车点：
- 用
::before做三角箭头时，width: 0; height: 0; border: 6px solid transparent;在content-box下实际占位比预期大 - Grid 容器里子项用
::after模拟分隔线，叠加 padding 后整体溢出 - DevTools「Computed」里看到元素是
border-box，但盒子还是撑开——大概率是伪元素在捣鬼
全局规则必须放在第三方 CSS 之后
很多 UI 库（如 Bootstrap 5、Element Plus、Ant Design）自己带了 box-sizing 重置，但写法不统一：有的只写 *, *::before, *::after，有的只写 html，有的甚至没覆盖伪元素。如果你的重置规则写在它们前面，就会被覆盖。
实操建议：
- 把
*规则放在所有第三方 CSS 引入语句的 最后 - 用
@import加载时，确保你的重置 CSS 是最后一个@import - 检查 DevTools 的「Styles」面板，确认生效的规则来自你写的那条，而不是某个库的内部样式
表单控件要单独加固
input、textarea、select、button 这些元素在旧版 Safari（≤12）和部分 Android WebView 中，对通配符设置响应不稳定：光标错位、高度塌陷、边框渲染异常。
稳妥做法是显式声明：
input,
textarea,
select,
button {
box-sizing: border-box;
}
这行代码不会和全局规则冲突，反而能兜底那些通配符失效的边缘场景。
box-sizing 切换后 JS 尺寸读取会变
如果你项目里用了 element.offsetWidth、getBoundingClientRect().width 或基于 clientWidth 做动态计算（比如弹窗定位、拖拽缩放、Tooltip 自动翻转），切换到 border-box 后，这些值会变小——因为现在返回的是“含 padding + border”的总宽，不再是 content-box 下的“纯内容宽 + 额外累加”。
容易被忽略的点：
- 不是报错，而是计算结果偏移，调试时很难联想到是
box-sizing导致的 -
min-width和max-width同样受border-box影响，但很多人只改width，忘了同步检查这两个 - flex 子项的
min-width: auto行为在border-box下依然存在，它才是长文本溢出的真正推手，不是box-sizing本身
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
