微前端中全局 * { box-sizing: border-box } 会破坏子应用ui组件盒模型，需分层控制：主应用统一设置、子应用容器内还原content-box、第三方组件单独兜底。
不能靠全局重置“一刀切”解决，必须分层控制作用域：主应用统一 box-sizing，子应用容器内还原 content-box，第三方组件根节点单独兜底。
为什么 * { box-sizing: border-box } 在微前端里会出问题
主应用加了 * { box-sizing: border-box }，但子应用里的 Element Plus .el-input__inner 或 Ant Design 的 .ant-btn 依赖 content-box 计算 padding，结果输入框文字贴边、按钮高度塌陷；更麻烦的是，qiankun 的样式沙箱完全不拦截这类已存在于主应用的全局规则——它只管子应用新注入的 <style></style>，不管 document.head 里早就在那儿的 reset.css。
常见错误现象包括：input 内边距视觉消失、textarea 高度计算异常、CSS Grid 的 fr 单位在嵌套中错位。根本原因不是子应用写错了，而是盒模型上下文被主应用提前劫持了。
子应用容器内必须显式还原 content-box
不能指望子应用自己改所有组件样式，而应在挂载点容器上做隔离层。比如子应用挂载到 <div id="subapp-order" class="micro-app-container"></div>，就在主应用 CSS 中补这一段：
/* 主应用 scope 还原区 —— 仅作用于子应用容器内部 */
.micro-app-container * {
box-sizing: content-box !important;
}
.micro-app-container ::before,
.micro-app-container ::after {
box-sizing: content-box !important;
}
这样既不影响主应用其他区域，又让子应用所有元素回归原始盒模型行为。注意两点：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 必须用
!important，否则子应用里局部写的box-sizing: border-box（比如某些 UI 框架组件内部）会覆盖它 - 伪元素
::before/::after也要单独声明，否则像 Element Plus 的.el-input__suffix图标可能错位 - 不要写成
.micro-app-container *::before，这种写法在部分 Safari 版本中不生效
第三方 UI 组件需要额外兜底类名
即使加了容器级还原，某些组件仍会因内部强制设置 box-sizing: border-box 而失效。比如旧版 Bootstrap 表单控件或 PigX UI Pro 的 .pigx-form-item。这时得针对性覆盖：
.micro-app-container .el-input__inner,
.micro-app-container .ant-input,
.micro-app-container .pigx-form-item input {
box-sizing: content-box !important;
}
关键点：
- 选择器必须带容器前缀（如
.micro-app-container），避免污染主应用 - 优先用类名而非标签名（如
.el-input__inner而非input），防止误伤主应用表单 - 如果用 Vite + qiankun，这些规则要放在主应用的
main.css里，不能塞进子应用的style.scss——后者会被沙箱劫持，但还原逻辑必须由主应用主导
动画和滚动中千万别动态改 box-sizing
有团队试图在子应用激活时 JS 注入 document.documentElement.style.boxSizing = 'content-box'，再卸载时切回去。这会导致每帧触发同步 Layout，DevTools 的 “Layout” 面板疯狂闪烁，滚动卡顿明显。真正稳的做法是：
- 所有盒模型控制都在 CSS 层完成，JS 只负责切换容器 class
- 子应用内涉及尺寸变化的动画（比如展开面板），统一用
transform: scaleY()+ 固定 height，避开 box-sizing 参与计算 - 垂直留白用
gap或容器padding，而不是靠子元素margin-bottom堆叠——后者在content-box下更容易因 padding 溢出失控
最易被忽略的一点：子应用构建产物里若含 import 'normalize.css'，它会在 JS 执行时动态插入 <style></style>，qiankun 的 strictStyleIsolation 会劫持这个过程，但 normalize 本身含大量 button { margin: 0 } 这类规则，依然会污染主应用。正确做法是子应用彻底移除 normalize，由主应用统一提供基础重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
