为什么CSS盒模型问题在组件化开发里更常见？

组件化开发中box-sizing易失效，主因是样式隔离导致全局重置无法穿透：第三方库硬编码content-box、Shadow DOM/CSS Modules阻断全局规则、动态组件绕过主样式表。

因为组件封装隔离了样式作用域，但盒模型计算却不受隔离影响——box-sizing 不是继承属性，也不会随组件边界自动重置。

第三方组件内部强制使用 content-box

很多 UI 库（比如旧版 Ant Design、Element UI）为兼容历史逻辑，在组件根元素上硬编码了 box-sizing: content-box。你在外层设了全局 border-box，但它的样式优先级被组件内联或高权重选择器覆盖。

1. 检查方式：在 DevTools 里点开组件节点，看 box-sizing 是否被 strike-through（划掉），被划掉说明被更高优先级规则覆盖
2. 修复手段：用更具体的选择器覆盖，例如 .ant-input, .el-input__inner { box-sizing: border-box !important; }（仅必要时加 !important）
3. 风险提示：加 !important 后可能干扰库自身尺寸适配逻辑，建议优先查文档看是否有配置项关闭默认盒模型重置

Shadow DOM 或 CSS Modules 下全局重置失效

当组件用 Shadow DOM 封装（如 Lit、Stencil），或启用 CSS Modules 的 :global 范围不全时，* { box-sizing: border-box } 根本进不去组件内部样式表。

1. 现象：父页面布局正常，嵌入的自定义组件一加 padding 就撑破容器，宽度超 100%
2. 解法：在组件自己的样式入口里单独写一遍重置，例如 Lit 中的 static styles = css`*, *::before, *::after { box-sizing: border-box; }`
3. 注意点：CSS Modules 需显式导出全局规则，不能只写 :global(*)，要写成 :global(*), :global(*::before), :global(*::after)

动态插入的弹窗/提示组件漏掉重置

像 message、notification、tooltip 这类由 JS 动态挂载的 DOM，往往绕过主样式表加载流程，直接插入 document.body，导致全局 box-sizing 规则不生效。

1. 典型错误：弹窗内容区设了 width: 300px; padding: 16px;，实际占宽 332px，右侧被截断
2. 验证方法：打开弹窗后，在 Elements 面板里选中其最外层节点，看 computed 样式里的 box-sizing 是不是 content-box
3. 稳妥做法：给这类组件的根元素加 class（如 dynamic-modal），再补一条 .dynamic-modal, .dynamic-modal * { box-sizing: border-box; }

真正麻烦的不是不知道该设 border-box，而是它在组件边界处会“断连”——没有显式声明的地方，浏览器就按默认 content-box 算，而这个默认值在组件化场景下比传统单页更容易被掩盖和忽略。