浏览器默认 box-sizing: content-box，width 仅控制内容区；需显式设置 border-box 并覆盖伪元素、第三方组件；flex 子项还需 min-width: 0；max/min-width 等尺寸属性同样受 box-sizing 影响；内容溢出（如图片、文本）需单独处理。
因为浏览器默认用 box-sizing: content-box，你写的 width 只管内容区，padding 和 border 是额外加在外面的——这不是写错了，是规范行为。
box-sizing: border-box 必须显式生效，不能只靠通配符
很多人写了 * { box-sizing: border-box; } 就以为万事大吉，但 ::before 和 ::after 伪元素默认仍是 content-box，它们一插入就可能悄悄撑破布局。必须连带覆盖：
* { box-sizing: border-box; }*::before, *::after { box-sizing: border-box; }- 第三方 UI 组件（比如
.ant-input）常显式设回content-box，得单独加固：input, textarea, button { box-sizing: border-box; } - 打开 DevTools →「Computed」面板，直接查目标元素的
box-sizing值，别只看 Styles 面板有没有那行代码
flex 子项光有 border-box 还不够，min-width: 0 得跟上
哪怕 box-sizing 已确认为 border-box，input、img 或含长文本的子项仍可能拒绝收缩，根源是它们默认带 min-width: auto。Flex 容器不会强制压缩它，结果 padding 一加，照样溢出。
- 必须给 Flex 容器的**直接子元素**加
min-width: 0 -
input、textarea等替换元素自身也得加min-width: 0，否则浏览器 UA 样式会维持最小宽度（如 Chrome 的 ~13ch） - 如果子项内部还有嵌套 Flex，内层容器也得单独加
min-width: 0
max-width / min-width 同样受 box-sizing 控制，漏掉就白改
box-sizing: border-box 不只影响 width，所有涉及尺寸的属性都走同一套计算逻辑。很多人只改了 width，却忘了 max-width: 90% 或 min-width: 320px 也会被 padding 推爆。
立即学习“前端免费学习笔记（深入）”；
- 检查所有尺寸相关声明：
width、max-width、min-width、height、max-height - 移动端尤其危险：
width: 100vw+padding: 16px= 实际宽度 > 视口，必然触发横向滚动条；应改用width: 100%并确保父级有明确 content width - 安全写法示例：
width: 100%; max-width: 500px; padding: 16px; box-sizing: border-box;
真正容易被忽略的，是 padding 本身不溢出，但里面的内容会——比如没设 max-width: 100% 的 img、没配 overflow: hidden 的 white-space: nowrap 文本、或没加 gap 却乱用 margin 的 Flex 子项。盒模型只是第一道防线，内容行为才是最终决定因素。
