固定像素宽度是溢出的直接推手，必须改用max-width + width: 100% + margin: 0 auto组合，并配合flex子项放弃绝对尺寸、图片设max-width: 100%和height: auto、table-layout: fixed三件套，才能根治响应式溢出问题。
响应式模板溢出，基本就是固定像素宽度在小屏上硬撑出来的结果——width: 1280px、min-width: 1220px、width: 300px 这类写法，遇到 iPhone 或高缩放系统时，浏览器不会帮你“智能压缩”，只会原样渲染，然后把多余部分推到屏幕外，触发横向滚动条或内容裁剪。
为什么 width: 100% 单独用还不行
只写 width: 100% 是“按父容器当前宽度算”，但如果父容器本身被 width: 1280px 或 min-width: 1220px 锁死，子元素再怎么 100% 也还是撑出视口。必须配合 max-width 才能设上限。
-
max-width: 1280px控制大屏不拉太开，width: 100%保小屏自动收缩 - 缺
margin: 0 auto会导致右侧留白或偏移，尤其在桌面端居中失效 - 若祖先链里有未约束的
display: flex容器，它可能把子项撑宽，得逐层检查max-width是否漏设
flex-wrap: wrap 为什么加了还溢出
常见误判是“只要加了 flex-wrap: wrap 就能换行”，但若父容器自己被 width: 2000px 或 min-width: 1220px 锁死，子项再怎么换行，整个 flex 容器仍占满 2000px，右侧照样滚动条常驻。
- 先确保父容器用了
max-width + width: 100% + margin: 0 auto - Flex 子项别写
width: 300px或margin-right: 20px，它们会锁死弹性逻辑 - 改用
flex: 1 1 calc(33.333% - 1rem)或更稳的flex: 1; min-width: 280px; - 图片必须加
max-width: 100%和height: auto，object-fit单独用没用
表格和 <pre class="brush:php;toolbar:false;"></pre> 这类“隐形溢出源”怎么治
表格不溢出≠排版正常；<pre class="brush:php;toolbar:false;"></pre> 看似在框里，实则内部文本早把容器顶破了——它们默认无视 flex 收缩和百分比逻辑。
- 表格必须三件套齐备：
table { table-layout: fixed; width: 100%; }+ 至少一个<col width="30%">+td, th { word-break: break-word; white-space: normal; } -
<pre class="brush:php;toolbar:false;"></pre>、<code>、<textarea></textarea>要单独加white-space: pre-wrap或overflow-x: auto - 绝对定位元素（比如右上角图标）必须让父容器设
position: relative，否则脱离文档流后直接飘走 - 别在 flex 项里用
white-space: nowrap，它会让flex-wrap彻底失效
真正难的不是写对某一条规则，而是所有嵌套层级都放弃硬编码尺寸——从 的 font-size 到最内层 <img> 的 max-width，只要漏一层，溢出就从那里开始裂开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
