box-sizing 不继承，html 上设置无效；必须用 { box-sizing: border-box; } 并配合 ::before, ::after（IE8 用 :before）才能全局生效，且需注意 shadow DOM、命名空间及旧项目兼容性。
box-sizing 不会从父元素继承，html 上设了也没用
很多人以为在 html 元素上写 box-sizing: border-box，子元素就能自动继承——其实不会。box-sizing 是一个**不继承属性**（non-inherited property），哪怕你给 html 或 body 设了，所有子元素默认值仍是 content-box。
常见错误现象：
– 页面里写了 html { box-sizing: border-box; }，但 div、input 依然按 content-box 计算宽高
– 调试时发现元素尺寸“莫名变大”，其实是边框/内边距额外加进去了
- 真正生效的写法是：用通配符强制重置所有元素，即
* { box-sizing: border-box; } - 必须搭配
*::before, *::after，否则伪元素仍走默认content-box（它们也受该规则影响） - 注意：IE8+ 支持
box-sizing，但 IE8 不支持*::before写法，得写成*:before（单冒号）
* { box-sizing: border-box } 的实际作用范围和边界
这个规则看似简单，但它的“覆盖力”有明确限制：
- 它只作用于**匹配到的元素**，比如
svg、math等命名空间内的元素不会被*匹配（除非显式声明） - 某些内置表单控件（如
input[type="range"]在 Chrome 中的滑块轨道）可能忽略该设置，因为浏览器用 shadow DOM 渲染，外部样式无法穿透 - 使用 Web Components 时，
*不会进入自定义元素的 shadow root，需在内部单独设置 - 性能上几乎无影响——现代浏览器对
*的优化已很成熟，别被老资料吓住
为什么不能只靠 inherit 手动继承？
有人想绕过通配符，改用 box-sizing: inherit 让子元素“主动继承”父级值。这理论上可行，但实操中极易断裂：
- 只要中间某层元素没显式设
box-sizing（比如某个第三方组件的 wrapper），继承链就断了，下游全退回content-box -
inherit只继承计算后的值，而box-sizing没有“计算”过程，它就是字面值；一旦父级是默认值（content-box），子级继承的还是content-box，起不到统一效果 - 很多 CSS 重置库（如 Normalize.css）根本没碰
box-sizing，你手动加inherit会跟它们冲突或被覆盖
兼容旧项目时，* { box-sizing: border-box } 的安全落地方式
老项目突然加这条规则，常导致布局错位——不是规则不对，而是原有代码已按 content-box 做了尺寸预设。
- 先用 DevTools 的“Computed”面板批量检查关键容器的
box-sizing实际值，确认哪些地方已被第三方库（如 Bootstrap、Ant Design）覆盖 - 如果用了 CSS-in-JS（如 Emotion、styled-components），确保全局注入在最顶层，且没被局部
!important覆盖 - 极少数情况需保留
content-box（比如依赖精确 content 宽高的 canvas 容器），可用html.no-boxsize * { box-sizing: content-box !important; }局部关闭 - 别忘了测试打印样式（
@media print），有些打印 CSS 会重置box-sizing，导致纸张溢出
真正麻烦的从来不是怎么写这一行 CSS，而是你不知道哪段遗留代码正偷偷依赖着 content-box 的行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
