box-sizing本身不可继承，是CSS规范明确设定的非继承属性；inherit值仅在父元素有明确声明且未被覆盖时生效，依赖计算后值而非显示值，且不响应运行时动态变更。
box-sizing 本身不可继承，这是 CSS 规范定义的
不是“继承失败”，而是 box-sizing 从一开始就被规范设为「不继承属性」。它的继承性明确标注为 inherit: no（见 CSS3 Box Model spec）。这意味着：即使父元素写了 box-sizing: border-box，子元素也不会自动获得该值——它会回退到浏览器默认的 content-box，除非你显式干预。
为什么用 * { box-sizing: border-box } 还是出问题？
全局重置看似稳妥，但实际容易被三类规则覆盖：
- 浏览器 UA 样式（如
input[type="search"]在 Chrome 中默认是content-box） - 第三方库内联样式或高权重选择器（比如
.ant-input { box-sizing: content-box !important; }） - Shadow DOM 或 scoped style 环境下，
*通配符根本无法穿透作用域
此时子元素的 box-sizing 值已脱离父级控制，inherit 也无从谈起。
box-sizing: inherit 是怎么起作用的？
inherit 不是魔法开关，它只做一件事：读取父元素当前**计算后生效的** box-sizing 值，并照搬过去。但它依赖两个硬条件：
- 父元素必须有**明确声明且未被覆盖**的
box-sizing（比如html { box-sizing: border-box; }） - 不能被更高优先级的规则（尤其是
!important）打断继承链
常见误判是：看到父元素 DevTools 里显示 border-box，就以为子元素能继承——其实那可能是 UA 样式或 computed 值，不是 cascade 后真正生效的声明值。
真正容易被忽略的点：继承 ≠ 同步更新
父元素运行时动态改了 box-sizing（比如主题切换），子元素不会自动重算盒尺寸。浏览器不会触发重排，旧的 layout 会残留。这时候必须手动触发重排，例如：el.style.width = el.offsetWidth + 'px'。这不是 bug，是继承机制的固有行为：它只在样式计算阶段起效，不监听 runtime 变更。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
