第三方组件样式错乱应先检查computed面板中box-sizing是否被覆盖；若显示content-box而全局已设border-box，说明第三方样式用!important或高权重覆盖，需精准定位类名（如.el-input）单独覆盖，并显式包含::before/::after伪元素。
第三方组件样式错乱，先看 computed box-sizing 是否被覆盖
引入 UI 库（如 Ant Design、Element Plus、Bootstrap）后布局崩了，大概率不是你写错了，而是它们内部的 box-sizing 声明和你的全局重置打架了。打开 DevTools → 选中异常元素 → 看「Computed」面板里的 box-sizing 值：如果显示为 content-box，但你的 CSS 里写了 * { box-sizing: border-box; }，说明第三方样式用 !important 或更高权重覆盖了它。
覆盖第三方组件的 box-sizing 要精准，别用 * 强刷
全局重置 * { box-sizing: border-box; } 在第三方组件里常失效，因为它们的 CSS 文件加载顺序靠后，或用了 !important。硬刷会导致按钮、输入框等控件内边距/边框被压缩，反而更难看。
- 定位到具体组件类名，比如
.el-input、.ant-btn、.btn，再单独覆盖：.el-input, .el-input__inner { box-sizing: border-box !important; } - 若组件用 Shadow DOM（如某些 Web Components），外部样式完全无效，只能在组件内部或通过
:host/::part()调整 - 避免对整个
body或html下手——这会把所有子树都拖进 border-box，包括那些依赖 content-box 行为的老代码
遇到 Bootstrap 4+ 之类已设 border-box 的库，要反向隔离
Bootstrap 4 及以上版本自己就声明了 * { box-sizing: border-box; }，如果你项目开头也写了同样规则，叠加后看似没问题，但一旦你局部想回退某个区域为 content-box（比如兼容某段旧逻辑），就会因权重相同而失败。
- 用命名空间隔离：给自定义容器加 class，比如
.legacy-layout，再写.legacy-layout * { box-sizing: content-box !important; } - 检查是否重复引入：有些构建工具（如 Vite + SCSS）会把 normalize.css 和 Bootstrap 的重置混在一起，导致
box-sizing被声明两次，实际生效的是后加载的那份 - 表单控件（
<input>、<textarea></textarea>）在 Safari 旧版中无视box-sizing，哪怕写了border-box也可能回退 —— 这时得加width: calc(100% - 2px)手动容错
伪元素和 ::slotted 内容最容易漏掉
第三方组件常靠 ::before / ::after 实现图标、装饰、清浮动，而这些伪元素默认不继承 box-sizing。就算你写了 * { box-sizing: border-box; }，它们仍按 content-box 计算，多出几像素就可能让按钮图标错位、下拉箭头偏移。
- 必须显式包含伪元素：
.my-component *, .my-component *::before, .my-component *::after { box-sizing: border-box; } - Web Components 中的
::slotted内容不受宿主样式影响，需在组件内部或通过slot元素直接设box-sizing - React 组件若用
style属性内联样式，box-sizing不会自动透传给子元素，得靠 className 或 CSS-in-JS 显式控制
真正麻烦的不是改一行 box-sizing，而是第三方组件把 padding、border、font-size 和 box-sizing 绑定成一套视觉体系——你只动一个，其他参数就全不对劲。调试时别只盯着 width，顺手点开「Layout」面板看 actual width 和 padding/border 分解值，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
