必须用, ::before, *::after三者联合声明并置于css最顶部，否则伪元素不继承box-sizing仍按content-box计算，导致图标、装饰线等撑开容器错位；devtools中伪元素box-sizing显示content-box即为典型信号。
必须用 *、*::before、*::after 三者联合声明，且这条规则必须出现在所有 CSS 的最顶部——否则伪元素仍走 content-box，布局会悄悄错位。
为什么只写 * { box-sizing: border-box; } 不够
伪元素（比如 ::before 和 ::after）不继承父级的 box-sizing，浏览器默认按 content-box 解析。你写了图标、装饰线、tooltip 箭头，甚至某些 UI 库（如 el-tooltip）内部生成的伪元素，只要没被覆盖，就可能撑开容器、换行或定位偏移。
DevTools 的 “Computed” 面板里如果看到伪元素的 box-sizing 是 content-box，就是典型信号。
正确写法是：
*, *::before, *::after {
box-sizing: border-box;
}
这条规则必须放在所有样式最前面
顺序错了等于白设。第三方组件库（如 Ant Design、MUI）的 CSS 文件如果后加载，很可能用更具体的选择器或 !important 覆盖你的设置。
- 推荐位置：项目主 CSS 入口文件（如
base.css或reset.css）的第一行 - 不要塞进某个 Vue/React 组件的
<style scoped></style>里——它只作用于该组件，还可能被:deep()外部样式穿透覆盖 - 若用 PostCSS，确认 autoprefixer 或其他插件没误删或拆分这条规则
哪些地方容易漏掉或需要回退
box-sizing 对 SVG 元素完全无效；<input>、<textarea></textarea>、<select></select> 在 Safari / 旧版 Edge 中有特殊渲染逻辑；Flex/Grid 子项设了 flex-basis 后，width 会被忽略，但 box-sizing 仍影响内容区大小计算。
常见需单独回退的场景：
-
.ant-input, .echarts-container canvas { box-sizing: content-box; }—— 针对图表或表单控件异常 -
input[type="file"], textarea { box-sizing: content-box; }—— 避免 Safari 中高度塌陷 -
.legacy-editor * { box-sizing: content-box; }—— 第三方富文本编辑器内部
动态插入节点和 Shadow DOM 也要兜住
这条规则生效的关键，不是“写了就行”，而是它从 HTML 第一个字节开始就控制了每个新插入节点的尺寸逻辑——包括 JS 动态创建的元素、第三方 SDK 插入的广告位、甚至 SVG 内嵌的 <foreignobject></foreignobject>。
Shadow DOM 或 iframe 里的样式不会继承主页面的 box-sizing，得在对应上下文里单独重置。
真正难的不是写对这一行，而是确保它在所有边界情况里都起效：伪元素、动态节点、iframe、第三方组件、SVG 容器……漏掉任何一个环节，偏差就藏在那里，等你深夜调试时突然跳出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
