box-sizing: inherit对第三方组件无效，因其依赖父元素明确声明的box-sizing值，而第三方组件常挂载到body下（body未设该值），导致继承链断裂；伪元素、动态插入节点及shadow dom内节点均不自动继承，需显式声明；且受css优先级约束，可能被!important覆盖，运行时父级变更亦不会自动同步子元素尺寸。
box-sizing: inherit 为什么对第三方组件没用
因为 inherit 只继承父元素明确声明的值，而第三方组件根节点往往没被你控制——它可能直接挂载到 body 下，或包裹在未设 box-sizing 的容器里。此时父级是 body，而 body 默认没声明 box-sizing，继承链就断了。
常见表现：你在 .my-app 上写了 box-sizing: border-box，内部自写组件都正常，但弹出的 .ant-modal 或 .flatpickr-calendar 仍错位——它们 DOM 节点不在 .my-app 内部，而是 document.body 直接 append 的。
伪元素和动态插入内容不继承
即使父容器正确设置了 box-sizing: border-box，它的 ::before 和 ::after 依然按 UA 默认的 content-box 计算尺寸。第三方组件大量依赖伪元素实现图标、遮罩、清浮动，漏掉它们就会撑破布局。
- 必须显式覆盖：
.ant-input::before, .ant-input::after { box-sizing: inherit; } - 动态插入的子元素（如 Tooltip、Popconfirm）若挂载到
body，也不走你的继承链，得单独给其根节点加box-sizing: border-box - Shadow DOM 内部的
inherit只在 shadow 树内生效，无法穿透到 light DOM
加载顺序和选择器权重让 inherit 失效
inherit 不是魔法，它照样受 CSS 优先级约束。如果第三方 CSS 用 !important 强制写了 box-sizing: content-box，那你的 inherit 就会被覆盖——哪怕它写在后面，只要权重低或没 !important，就赢不了。
排查方法：
- 打开 DevTools → 选中异常元素 → 查「Computed」面板里的
box-sizing值，看是否被划掉 - 点开「Styles」面板，找到生效的那条规则，确认它是不是来自第三方 CSS，且带
!important - 若确认被压，只能用更高权重的选择器 +
!important强制覆盖，比如：body .flatpickr-input { box-sizing: border-box !important; }
真正容易被忽略的是运行时继承不同步
父元素运行时切换 box-sizing（比如主题切换、暗色模式 toggle），子元素不会自动重绘盒尺寸。视觉上会残留旧宽高，尤其在动画过渡中特别明显。
这不是 bug，是浏览器行为：CSS 继承不触发 layout reflow。修复方式很简单但常被跳过：
- 手动触发重排，例如：
el.style.width = el.offsetWidth + 'px'; - 或者强制重绘：
el.offsetHeight;（读取一个布局相关属性即可） - 对批量节点，别用循环改 style，改 class 更稳妥，再配合
getBoundingClientRect()验证实际占位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
