box-sizing: inherit的作用是强制子元素无条件继承父级box-sizing值，规避ua样式覆盖、权重冲突及shadow dom通配符失效；伪元素不继承，需显式声明，动态节点需挂载于已设border-box的父容器内，且继承非响应式，父级变更需手动触发重排。
box-sizing: inherit 的作用不是“让子元素更聪明”，而是让子元素无条件服从父级的盒模型规则——只要父级明确设了 box-sizing: border-box，子元素就跟着用，不讲道理，也不看全局重置有没有生效。
为什么 * { box-sizing: border-box } 会失效？
很多项目靠这条规则兜底，但它在真实场景里常被绕过：
-
input[type="search"]、textarea等表单控件，UA 样式权重高，直接覆盖通配符 - 第三方 UI 库（比如旧版 Ant Design 或某些 Web Component）内部节点可能带
!important或更高特异性选择器 - Shadow DOM 内部，
*根本不生效，通配符只作用于 Light DOM
一旦某个子元素回退到 content-box，加个 padding: 8px 就撑出容器，布局立刻错位。而 box-sizing: inherit 不依赖选择器权重，只认父级声明值。
::before 和 ::after 伪元素会继承吗？
不会。伪元素默认不继承 box-sizing，哪怕父元素写了 inherit，它们仍按 UA 默认值（通常是 content-box）计算尺寸。
必须显式声明：
.component::before {
box-sizing: inherit;
}
否则，带 padding 或 border 的伪元素（比如装饰性边框、遮罩层）容易意外溢出，尤其在固定宽高的容器里。
动态插入的节点能继承吗？
能，但有前提：
- 新节点必须挂载在已设
box-sizing: border-box的父容器内，不能直接appendChild到document.body - 父容器的
box-sizing必须是显式声明的（比如box-sizing: border-box），不能靠继承得来 - 父级运行时切换
box-sizing（如主题切换），子元素不会自动重绘尺寸——需要手动触发重排，例如：el.style.width = el.offsetWidth + 'px'
真正容易被忽略的是：继承不是响应式同步。它只在节点初始化时读一次父级值，之后父级改了，子元素尺寸不会变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
