box-sizing: border-box 全局重置可解决 width: 100% 撑破容器问题，因 content-box 下 padding/border 会额外增加宽度；需用 、::before、*::after 统一设置，并配合 max-width: 100% 等约束替换元素与表格等特殊情况。
它解决了「设了 width: 100% 却撑破容器」这个最常见、最隐蔽、最容易在小屏或第三方组件里突然爆发的布局问题。
为什么 width: 100% 会溢出父容器
因为默认 box-sizing: content-box 下，width 只管内容区；一旦元素有 padding: 12px 和 border: 1px，实际宽度就是 100% + 24px + 2px——哪怕只多出 1px，也足以触发横向滚动条或 Flex 换行。
- 典型场景：表单输入框在 iOS Safari 弹出键盘时横向溢出
- 高频翻车点：卡片内
.card-header加了 padding 后文字被右侧切掉 - 调试线索：DevTools 的 Layout 面板显示“总宽 > 父容器”，但 Computed 里
width还是100%
为什么必须用 *, *::before, *::after 全局重置
只给父容器或个别 class 加 box-sizing: border-box 基本无效——子元素（尤其是 input、textarea、svg 包裹层）仍走默认逻辑，padding/border 继续外扩。
- 伪元素（
::before/::after）是独立渲染节点，漏掉它们会导致清除浮动、装饰图标等悄悄撑开布局 - 第三方 UI 库（如 Element Plus、Ant Design）常在后期加载 CSS，覆盖你的通配符规则；必须确保该规则位于
<link>之后，或加!important（仅限调试） -
html { box-sizing: border-box }+* { box-sizing: inherit }看似优雅，但部分浏览器对伪元素继承支持不一致，实测不如通配符可靠
box-sizing: border-box 解决不了的溢出，要盯住这些地方
它只改尺寸计算逻辑，不压制内容本身。以下情况即使开了 border-box，仍需额外约束：
立即学习“前端免费学习笔记（深入）”；
-
img、svg、iframe：必须加max-width: 100%和height: auto（iframe还得补width: 100%） - Flex 子项中的替换元素（
input、button）：默认min-width: auto会锁死最小宽度，得显式写min-width: 0 - 表格：
table完全无视box-sizing和max-width，必须配table-layout: fixed+width: 100% - 带
white-space: nowrap的长文本：得靠overflow: hidden+text-overflow: ellipsis或word-break: break-word
真正容易被忽略的是：改完 CSS 不进 DevTools 的 Computed 面板确认 box-sizing 值是否为 border-box，等于没改——尤其当项目用了 CSS-in-JS 或 SSR 时，首屏样式注入顺序错乱会让重置失效。
