第三方UI组件无法自适应容器，八成是box-sizing被覆盖为content-box，需查Computed面板确认，并精准覆盖类名、伪元素及子容器，同时显式设置表单控件box-sizing。
第三方UI组件无法自适应容器，八成不是你没写width: 100%，而是它的box-sizing被自身样式覆盖回content-box，导致padding和border额外撑开——查「Computed」面板确认值，比调样式快十倍。
先看Computed面板里box-sizing到底是不是border-box
打开 DevTools → 选中错位的组件元素（比如.el-date-picker、.ant-input或.react-datepicker__input-container）→ 切到「Computed」→ 搜索box-sizing：
- 显示
content-box：说明组件 CSS 用!important或更高权重覆盖了你的全局声明 - 显示
border-box但依然错位：大概率是::before/::after伪元素没设，或者子容器（如.ant-input-affix-wrapper）漏掉了 - 根本搜不到
box-sizing：该组件可能用了 Shadow DOM，外部样式完全无效，!important也白搭
精准覆盖第三方类名，别硬刷*
* { box-sizing: border-box !important; }会把<input type="range">、<svg></svg>、甚至canvas全拖进border-box，反而破坏原生控件对齐。应该只打具体类名：
- 右键错位元素 →「Copy」→「Copy selector」，拿到类似
.flatpickr-input或#chart-1 .series-item的选择器 - 在你自己的 CSS 文件顶部（确保加载顺序在 UI 库之后）加一句：
.el-input__inner, .el-textarea__inner { box-sizing: border-box !important; } - 必须显式带上伪元素：
.ant-btn::before, .ant-btn::after { box-sizing: border-box !important; } - 若组件有嵌套容器（如
.ant-modal-body、.react-select__control），一并覆盖，否则padding仍会撑开
表单控件必须单独声明，通配符继承基本失效
哪怕你写了* { box-sizing: border-box; }，<input>、<textarea></textarea>、<select></select>、<button></button>在 Safari 15+ 和多数 Android WebView 中仍按 UA 样式解析为content-box——它们不继承父级box-sizing。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写：
input, textarea, select, button { box-sizing: border-box; } - 搭配
box-sizing还得同步控制：padding（各浏览器默认值不同）、border（避免 Firefox 的inset干扰）、line-height（配合min-height做高度归一） - Flex 容器里按钮宽度异常？Safari 会因
content-box触发隐式min-width: min-content，加min-width: 0才能关掉
遇到Shadow DOM或动态注入的CSS怎么办
某些 Web Components（如 Lit 封装的图表库）或通过import()异步加载的插件，CSS 是运行时插入的，你的样式表可能先加载、后被盖掉。
- 检查 Network 面板，确认 UI 库 CSS 文件是否晚于你所有样式加载；若是，改用
<style></style>标签内联，或在构建配置中调整注入顺序 - 若组件用
:host或::part()封装，外部样式无法穿透，只能：:host { box-sizing: border-box; }（需改组件源码），或用style属性内联设置 - 旧版 Safari 对
<input>支持不稳定，哪怕写了border-box，缩放时仍回退；补一行width: calc(100% - 2px);手动容错
最易被忽略的是伪元素和子容器——它们不继承box-sizing，但一个::before加padding: 4px就能让百分比布局偏移几像素；还有那些动态插入的 CSS，你以为它加载完了，其实它刚在你眼皮底下覆盖了你最后一行!important。
