必须全局设置*, *::before, *::after { box-sizing: border-box; }，因box-sizing不继承，仅设父容器无效；伪元素未重置仍按content-box计算，易导致布局溢出；还需配合max-width: 100%、min-width: 0等处理替换元素和文本溢出。
box-sizing: border-box 要全局写，不是只写父容器
只给 .card 或 body 加 box-sizing: border-box 没用。因为 box-sizing 不继承，子元素（比如 input、button、.card-header）依然按默认的 content-box 算尺寸——有 padding: 16px 和 border: 1px 时，width: 100% 实际变成 100% + 32px + 2px，必然撑破容器。
真正生效的写法只有一种：
*,
*::before,
*::after { box-sizing: border-box; }
- 必须覆盖伪元素：很多组件靠
::before/::after插入装饰、清除浮动，它们若没重置，照样按content-box计算 - 别用
*:not(img)这类排除写法——svg、iframe、canvas的 wrapper 也得算进去 - Bootstrap、Ant Design 等框架的 reset 通常不含伪元素，得自己补
为什么伪元素不重置就会悄悄溢出
伪元素本身不可见，但参与布局。比如一个 div 用 ::after 清除浮动，它默认是 content-box，一旦加了 padding 或 border，就会额外撑开父容器宽度，而你在 DOM 里根本看不到这个“罪魁祸首”。
调试时进浏览器「Computed」面板，手动点开目标元素的伪元素，确认它的 box-sizing 值是不是 border-box——光看 CSS 文件写了没用，优先级可能被其他规则覆盖。
box-sizing 解决不了的三类溢出，得另配样式
box-sizing: border-box 只改尺寸计算逻辑，不压制内容本身。以下情况即使开了它，仍会溢出：
立即学习“前端免费学习笔记（深入）”；
-
img、svg、iframe：必须加max-width: 100%和height: auto（iframe还要补width: 100%） - Flex 子项里的替换元素（
input、textarea、button）：默认min-width: auto阻止收缩，得显式写min-width: 0 - 带
white-space: nowrap的文本：需要overflow: hidden+text-overflow: ellipsis，或word-break: break-word
CSS-in-JS 或 SSR 场景下重置样式容易失效
在 styled-components 或 emotion 中，全局重置可能因 SSR 注入顺序错乱，导致首屏闪动——伪元素一开始按 content-box 渲染，JS 注入后才变 border-box。
解决办法只有一个：
把 *{box-sizing:border-box} 这段 CSS 提前塞进 HTML 的 最顶部，最好用 <style></style> 标签硬编码，别依赖 JS 注入。
最常被忽略的其实是 computed 值验证——你写了，不等于它真生效；你看到布局正常，不等于所有伪元素都受控。真要稳，每个关键容器都得手动点开开发者工具挨个查。
