必须全局设置 、::before、*::after 的 box-sizing: border-box，因其不继承，局部设置无效；flex/grid 溢出需子项加 min-width: 0 或 minmax(0, 1fr)；img/svg/iframe/table/绝对定位等需额外约束。
box-sizing: border-box 为什么必须全局写 *
只给某个容器或组件加 box-sizing: border-box 几乎没用，因为这个属性不继承。子元素（比如 input、.card-header、伪元素）依然按默认的 content-box 算尺寸——你设了 width: 100% + padding: 12px，它就真多占 24px。
真正生效的写法只有一条：
*, *::before, *::after { box-sizing: border-box; }
-
html或.container单独设无效，不传递 -
*:not(img)这类排除写法危险，svg、iframe的 wrapper 很可能漏掉 - 第三方 UI 库（如 Ant Design）可能用高权重规则覆盖它，得检查 DevTools 的「Computed」面板确认值是否真是
border-box
Flex/Grid 里 overflow: hidden 失效怎么办
不是 overflow 不起作用，是子项拒绝收缩——Flex 项默认 min-width: auto，Grid 项默认按 min-content 计算最小宽度，长文本、图片、white-space: nowrap 都会卡死收缩逻辑。
修复关键在子项加约束：
- Flex 子项加
min-width: 0（文字/图片类）或flex: 1替代width: 100% - Grid 子项加
min-width: 0，并把1fr改成minmax(0, 1fr) - 含长无空格字符串（如 URL）的元素，必须配
word-break: break-word或overflow-wrap: break-word
fit-content 和 letter-spacing 也会偷偷撑宽
width: fit-content 和 letter-spacing 看似无害，但它们叠加 content-box 就会放大溢出风险：
-
fit-content不计入padding和border，必须搭配box-sizing: border-box才稳 -
letter-spacing: 0.1em实际增加的宽度 = 字符数 × 0.1em，最后一个字符右侧还有“尾巴”，可用margin-right: -0.1em抵消，但仅适用于字符数固定的单行标题 - 动态内容（如用户输入的长文本）别硬套负 margin，改用
display: inline-block包一层再调更安全
哪些地方 box-sizing 压根不起作用
box-sizing: border-box 只改尺寸计算方式，对内容行为零约束。以下情况即使开了它，仍需单独处理：
-
img、svg、iframe：必须加max-width: 100%+height: auto（iframe还要补width: 100%） -
table：无视max-width和box-sizing，得配table-layout: fixed+width: 100% - 绝对定位元素：父容器必须有
position: relative，否则overflow: hidden裁剪不了它 - Flex/Grid 容器本身设了固定宽高，子项又写了
width: 100%，容易触发隐式尺寸冲突——优先用flex-basis或grid-column: span替代
最常被忽略的是：溢出未必来自盒模型，先看「Computed」里实际 width 是否膨胀，再决定动哪根弦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
