必须用、::before、*::after三者联合重置，缺一不可；因为伪元素不继承父级box-sizing，默认content-box，漏写会导致装饰内容撑开容器、换行或定位偏移。
必须用 *、*::before、*::after 三者联合重置，缺一不可；否则伪元素仍走 content-box，悄悄破坏布局。
为什么只写 * { box-sizing: border-box; } 不够
很多初学者照着教程只加了通配符规则，结果发现某些图标、提示气泡或动态插入的内容尺寸还是不对——问题出在 ::before 和 ::after 生成的伪元素上。它们不继承父级 box-sizing，浏览器默认仍按 content-box 解析。
-
*::before和*::after常被用于图标字体（如font-icon）、装饰线、tooltip 箭头等，一旦尺寸算错，就可能溢出或错位 - 即使你没主动写伪元素，某些 UI 库（如 Element Plus 的
el-tooltip）或 CSS 框架会内部生成，不受*规则影响 - Chrome DevTools 的“Computed”面板里，伪元素的
box-sizing值显示为content-box，就是典型信号
全局重置必须放在所有自定义样式之前
顺序错了，等于白设。第三方组件库（比如 Ant Design 或 MUI）的 CSS 文件如果后加载，很可能用 !important 或更具体的选择器把你的 border-box 覆盖掉。
- 推荐位置：CSS 文件最顶部，甚至在
@import其他 reset 文件之前 - 不要塞进某个组件 scoped style 里——它只作用于该组件，且可能被
:deep()外部样式穿透覆盖 - 若用 PostCSS 或构建工具，确保这条规则不被 autoprefixer 或其他插件误删或拆分
第三方组件兼容性怎么处理
不是所有库都适配 border-box。有些老组件（尤其依赖 canvas 或 SVG 容器的图表库）内部硬编码了 content-box 行为，强行统一反而出问题。
- 先观察异常：比如
input[type="file"]在 Safari 中高度塌陷、canvas容器宽高错乱、某些 tooltip 宽度撑开 - 针对性回退：用更具体的选择器单独设回
content-box，例如.ant-input, .echarts-container canvas { box-sizing: content-box; } - 避免对
button、textarea、select等原生表单控件无差别重置——部分旧版 WebKit 对它们的box-sizing渲染有差异
SVG 元素和 Flex/Grid 中的隐性陷阱
box-sizing 对 SVG 根本无效，而 Flex/Grid 里它只影响单个项的尺寸解析逻辑，不改变分配规则本身。
-
<rect></rect>、<circle></circle>、<text></text>等 SVG 元素永远按content-box计算，写width就是内容区宽度，padding/border 不存在 - Flex 项设了
flex: 1后，width属性会被忽略，真正起作用的是flex-basis——而它受box-sizing影响，但调试时容易误以为 width 没生效 - Grid 中混用
200px和1fr，若前者元素有 padding，border-box虽保证总宽 200px，但内容区压缩可能导致文字换行或图标裁切
真正麻烦的不是设不设 border-box，而是设完之后旧代码里那些靠“多留 content 宽度抵 padding”的数值全部失效——你得一行行去校准，而不是期待它自动变好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
