box-sizing未生效主因是覆盖不全、加载顺序错或被高权重样式覆盖，而非被删除；须用, ::before, *::after{box-sizing:border-box;}全局声明并置于CSS最顶部，结合Computed面板验证。
旧版重置样式（比如只写 * 重置 margin/padding）本身不破坏 box-sizing，但会间接导致它“看起来失效”——根本原因是没同步重置伪元素、加载顺序错、或被高权重覆盖，不是 box-sizing 被删了，而是压根没生效。
为什么 * { margin: 0; padding: 0; } 会让 box-sizing 像没写一样
这类老式重置常单独放在 CSS 开头，但只处理边距，完全不碰盒模型。结果：box-sizing: border-box 往后写，却被后续引入的 Normalize.css、UI 库或自定义样式用更高权重覆盖。更糟的是，它没包含 *::before 和 *::after，而这些伪元素默认仍是 content-box，一画 tooltip 箭头或图标字体就撑出容器。
-
* { margin: 0; padding: 0; }权重极低（0,0,0,0），连button这种带强 user agent 样式的元素都压不住，更别说对抗.ant-btn { box-sizing: content-box !important; } - 很多旧重置文件（如早期 HTML5 Boilerplate）压根没声明
box-sizing，你后来加的全局规则如果顺序靠后，等于白写 - 某些构建流程里，SCSS
@import顺序混乱，可能把你的box-sizing规则插在 UI 库之后，直接被覆盖
第三方 UI 库如何悄悄绕过你的 box-sizing 设置
像 Ant Design、Element Plus 这类库，内部组件样式往往带 !important 或用更具体的选择器（如 .el-input__inner）硬设 box-sizing: content-box。你在 DevTools 的 “Computed” 面板里看到该属性被划掉或显示为灰色，基本就是它干的。
- 检查异常元素 → 打开 “Computed” → 搜
box-sizing，值是content-box？说明被覆盖了 - 不要用
* { box-sizing: border-box !important; }全局强刷——会把input[type="file"]、canvas容器等依赖原生尺寸逻辑的控件全搞乱 - 精准覆盖：定位到具体类名，例如
.el-input, .el-input__inner, .el-input__inner::before, .el-input__inner::after，并显式加!important - Shadow DOM 组件（如某些 Web Components）外部样式完全无效，得用
:host或::part()在组件内部调整
DOCTYPE 缺失和 IE8 前缀缺失让 box-sizing 彻底不解析
哪怕你写了最标准的 *, *::before, *::after { box-sizing: border-box; }，只要 HTML 文件第一行不是 <!DOCTYPE html>，IE8 及以下就进怪异模式——此时整个 CSS 解析引擎回退，box-sizing 属性直接被忽略，开发者工具里显示为灰色或带删除线。
立即学习“前端免费学习笔记（深入）”；
-
<!DOCTYPE html>必须是文件第一个字符，前面不能有空格、BOM、XML 声明或注释 - IE8 需要
-ms-box-sizing: border-box，且必须写在标准属性之前：-ms-box-sizing: border-box; box-sizing: border-box;，否则它只认前缀版 - PostCSS autoprefixer 默认不处理 IE8，得显式配置
browsers: ["IE >= 8"]才能补全 - 现代项目若已放弃 IE8，可省略前缀，但别假设所有环境都支持——某些内网系统仍跑着 IE8
真正容易被忽略的不是“有没有写那三行”，而是每次加新组件、改构建配置、或者接手别人代码时，没人去翻 Computed 面板确认 box-sizing 是否真生效；更没人检查 ::before 和 ::after 的尺寸是否还在偷偷撑开容器。
