最可靠方案是全局设置 box-sizing: border-box 和 max-width: 100%；因 content-box 下 width: 100% 不含 padding/border，易撑破父容器；需覆盖伪元素、约束父容器宽度、针对性处理替换元素与表单控件。
直接结论：用 box-sizing: border-box 全局重置 + max-width: 100% 配合约束条件，是当前最可靠、最省心的组合方案。
为什么 width: 100% 还会撑破父容器？
这不是你写错了，而是默认盒模型在“捣鬼”：box-sizing: content-box 下，width: 100% 只管内容区，padding 和 border 会额外叠加。比如父容器宽 400px，子元素设了 width: 100%、padding: 16px、border: 1px，实际占宽就是 400 + 32 + 2 = 434px。
常见错误现象包括：max-width: 100% 失效、横向滚动条意外出现、Flex 子项内嵌图片或输入框“顶出”边界。
- 必须全局设置：
* { box-sizing: border-box; }不够 —— 还得加上*::before, *::after，否则伪元素仍按content-box计算 - 别只给父容器加
box-sizing，子元素不设等于白搭 - IE8+ 原生支持，现代项目无需前缀；IE7 及更早可忽略
max-width: 100% 什么时候不起作用？
max-width: 100% 看似万能，但它依赖父容器有明确的“可用宽度”。如果父容器本身没被框住，这个百分比就失去参照系。
典型失效场景：
- Flex 容器未设
width或max-width，它会随内容无限撑宽 →max-width: 100%的子元素永远不溢出（因为父容器根本没边界） - 绝对定位子元素，父容器没设
position: relative→ 定位参考变成视口，max-width对 top/left 无约束力 - 表格（
<table>）无视 <code>max-width，得靠table-layout: fixed+width: 100%真正起效的前提是：父容器有明确宽度来源（比如块级默认撑满、
width显式设定、或flex-basis稳定）。哪些元素需要额外处理？
box-sizing: border-box和max-width: 100%解决不了所有问题——有些元素天生“不听话”。-
<img>、<svg></svg>、<iframe></iframe>：必须显式加max-width: 100%和height: auto，否则原始尺寸照常溢出 - 表单控件如
<input>、<button></button>：它们有内置min-width: auto，即使box-sizing正确，也得加min-width: 0才能随 Flex 容器收缩 - 含
white-space: nowrap的文本：盒模型再准也没用，得配text-overflow: ellipsis或用flex+overflow: hidden
这些不是 bug，是浏览器对替换元素和表单控件的默认行为，绕不开，只能针对性补漏。
响应式容器宽度怎么设才稳？
单纯
width: 100%在大屏下容易导致阅读体验崩坏，max-width和min-width是配套护栏。推荐写法：
.container { width: 100%; max-width: 1200px; min-width: 320px; margin: 0 auto; }注意点：
-
width: 100%保证小屏下撑满，max-width防止大屏过宽，min-width避免窄屏文字挤成一团 - 别用
width: 1200px替代max-width，否则小屏直接横向滚动 - 如果父容器用了
display: flex，子项要收缩还得加flex-shrink: 1或min-width: 0
真正麻烦的从来不是某一行 CSS，而是各种元素默认行为叠加后产生的“静默溢出”——比如一个带 padding 的卡片里放了没设
max-width的图片，再嵌套进没设position: relative的弹窗，三层叠加下来，连开发者自己都找不到溢出源头。 -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
