box-sizing 必须在每个组件作用域内显式声明，因第三方库硬编码 content-box、shadow dom/css modules 隔离、动态挂载组件绕过样式链等原因，全局重置失效，需针对性覆盖。
组件库开发中，box-sizing 不是“设一次就完事”的属性，而是必须在每个组件作用域内显式声明的尺寸契约。
第三方组件内部硬编码 content-box 怎么办？
很多 UI 库（如旧版 Ant Design、Element UI）为兼容历史逻辑，在根元素上直接写了 box-sizing: content-box。你全局设了 * { box-sizing: border-box }，但它的声明优先级被组件内部更具体的选择器覆盖。
- 检查方式：在 DevTools 中点开组件节点，看
box-sizing是否被 strike-through（划掉） - 修复建议：用更高权重选择器覆盖，例如
.ant-input, .el-input__inner { box-sizing: border-box; } - 慎用
!important：它可能破坏库自身对尺寸的适配逻辑，比如弹窗宽度计算或栅格缩放
Shadow DOM 或 CSS Modules 下全局重置不生效
当组件使用 Shadow DOM（Lit、Stencil）或启用了 CSS Modules 且 :global 范围未完整包裹时，* { box-sizing: border-box } 根本进不去组件样式表——它只作用于 light DOM 主样式流。
- 表现：组件内元素明明写了
width: 100%，却撑破父容器 - 解决方法：在组件样式中显式重申，例如
:host, :host * { box-sizing: border-box; }（Shadow DOM）或在模块样式顶部加:global(*) { box-sizing: border-box; }（需确认构建工具支持） - 注意：CSS Modules 的
:global不会穿透到动态子组件，需逐层覆盖
动态挂载组件（如 message / tooltip）漏掉盒模型控制
这类组件由 JS 直接插入 document.body，绕过主样式表加载链，box-sizing 规则无法自动继承。
- 典型现象：弹窗内容区设了
width: 300px; padding: 16px;，实际占宽 332px，右侧被截断 - 验证方法：打开弹窗后，选中最外层节点，看 computed 样式中
box-sizing是否为content-box - 稳妥做法：给动态组件根元素加统一 class（如
dynamic-portal），再补一条.dynamic-portal, .dynamic-portal * { box-sizing: border-box; }
真正麻烦的不是忘记写 box-sizing，而是在组件边界处它默认“消失”——没有显式声明的地方，浏览器就按 content-box 算，而这个默认值在封装隔离场景下极难被察觉和追踪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
