box-sizing: inherit 表示子元素继承父元素的 box-sizing 值，确保盒模型一致；它比直接设 border-box 更安全，因能规避 ua 样式覆盖、选择器权重冲突及 shadow dom 中通配符失效问题，且兼容 ie8+。
box-sizing: inherit 被广泛使用，不是因为它“强大”或“高级”，而是它在组件化、跨框架协作和渐进式升级场景中，能最轻量地规避盒模型不一致引发的布局错位——尤其当父容器已统一设为 border-box，而子元素又来自第三方库或未重置样式时。
为什么 box-sizing: inherit 比直接写 border-box 更安全
很多项目全局重置用的是 * { box-sizing: border-box; }，但这条规则对某些特殊元素（如 input[type="search"]、textarea、自定义 Web Component）可能被浏览器 UA 样式或框架内部样式覆盖。一旦子元素的 box-sizing 被重置回 content-box，padding 和 border 就会撑出预期宽度。
而 inherit 强制子元素“看爹脸色”，只要父级没意外被改，子元素就一定和父级保持一致：
- 避免因选择器权重冲突导致的
box-sizing回退 - 不依赖全局通配符，对 legacy CSS 更友好
- 在 Shadow DOM 或 scoped style 场景下，比通配符重置更可控
box-sizing: inherit 在组件封装中的典型误用
常见错误是只在组件根元素上写 inherit，却忘了其内部子节点（尤其是伪元素或动态插入的节点）：
-
::before/::after不继承box-sizing，需显式声明 - 通过 JS 动态创建的子元素（如弹层、tooltip）默认是
content-box，除非父容器明确设了inherit且该元素能继承到 - 部分 UI 库（如早期 Ant Design）的内部组件会强制设置
box-sizing: content-box，此时inherit会被覆盖，得靠更高优先级选择器兜底
兼容性与真实生效条件
box-sizing: inherit 在 IE8+、所有现代浏览器中完全支持，但它是否真起作用，取决于两个前提：
- 父元素的
box-sizing值必须是明确声明的（border-box或content-box），不能是未设置导致的计算值 - 不能被
!important的其他box-sizing声明覆盖；CSS 优先级仍起效 - 若父元素是
display: inline元素，某些旧版 Safari 可能不触发继承（极少见，但测试过 iOS 9.3 确有此问题）
真正容易被忽略的是：继承不是“自动同步”。父元素 box-sizing 改变后，子元素不会重绘盒尺寸——这在 runtime 动态切换主题或 layout mode 时，可能造成视觉残留。这时候需要手动触发重排，比如 el.style.width = el.offsetWidth + 'px'。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
