组件化开发中box-sizing易失效，主因是样式隔离导致全局重置无法穿透：第三方库硬编码content-box、Shadow DOM/CSS Modules阻断全局规则、动态组件绕过主样式表。
因为组件封装隔离了样式作用域，但盒模型计算却不受隔离影响——box-sizing 不是继承属性，也不会随组件边界自动重置。
第三方组件内部强制使用 content-box
很多 UI 库（比如旧版 Ant Design、Element UI）为兼容历史逻辑，在组件根元素上硬编码了 box-sizing: content-box。你在外层设了全局 border-box，但它的样式优先级被组件内联或高权重选择器覆盖。
- 检查方式：在 DevTools 里点开组件节点，看
box-sizing是否被 strike-through（划掉），被划掉说明被更高优先级规则覆盖 - 修复手段：用更具体的选择器覆盖，例如
.ant-input, .el-input__inner { box-sizing: border-box !important; }（仅必要时加!important） - 风险提示：加
!important后可能干扰库自身尺寸适配逻辑，建议优先查文档看是否有配置项关闭默认盒模型重置
Shadow DOM 或 CSS Modules 下全局重置失效
当组件用 Shadow DOM 封装（如 Lit、Stencil），或启用 CSS Modules 的 :global 范围不全时，* { box-sizing: border-box } 根本进不去组件内部样式表。
- 现象：父页面布局正常，嵌入的自定义组件一加
padding就撑破容器，宽度超 100% - 解法：在组件自己的样式入口里单独写一遍重置，例如 Lit 中的
static styles = css`*, *::before, *::after { box-sizing: border-box; }` - 注意点：CSS Modules 需显式导出全局规则，不能只写
:global(*)，要写成:global(*), :global(*::before), :global(*::after)
动态插入的弹窗/提示组件漏掉重置
像 message、notification、tooltip 这类由 JS 动态挂载的 DOM，往往绕过主样式表加载流程，直接插入 document.body，导致全局 box-sizing 规则不生效。
立即学习“前端免费学习笔记（深入）”；
- 典型错误：弹窗内容区设了
width: 300px; padding: 16px;，实际占宽 332px，右侧被截断 - 验证方法：打开弹窗后，在 Elements 面板里选中其最外层节点，看 computed 样式里的
box-sizing是不是content-box - 稳妥做法：给这类组件的根元素加 class（如
dynamic-modal），再补一条.dynamic-modal, .dynamic-modal * { box-sizing: border-box; }
真正麻烦的不是不知道该设 border-box，而是它在组件边界处会“断连”——没有显式声明的地方，浏览器就按默认 content-box 算，而这个默认值在组件化场景下比传统单页更容易被掩盖和忽略。
