必须重置 body 默认 margin 和 padding 并逐层验证盒模型：所有浏览器默认 body margin: 8px，导致视口两侧白边；需设 body { margin: 0; padding: 0; }，配合 * { box-sizing: border-box; }，优先用 width: 100% 替代 100vw，并检查 pre/code/图片等隐藏溢出源。
检查 body 默认 margin 是否被忽略
几乎所有浏览器都会给 body 元素加默认 margin: 8px，哪怕你没写任何样式。这个看似微小的边距会直接导致整个页面向内缩进，视口左右各空出 8px —— 在深色背景或全宽背景图下，就是两条明显的“水平白边”。更糟的是，移动端缩放时这个固定像素值会被放大，白边更刺眼。
实操建议：
- 立即在 CSS 开头加：
body { margin: 0; padding: 0; }
- 不要只重置
margin 而漏掉 padding，某些框架或重置库可能偷偷加了 padding- 避免用
overflow-x: hidden 掩盖问题，它不解决溢出根源，还可能干扰 iOS 滚动行为验证元素总宽度是否超出 100vw
常见陷阱是用了 width: 100vw 却忘了它和 body 的 margin、自身 padding 或 border 叠加后实际超宽。比如 .hero { width: 100vw; padding-left: 5vw; }，总宽就变成 105vw，必然向右溢出。
实操建议：
- 打开开发者工具 → 选中疑似元素 → 查看右侧 Box Model 面板里的 “Total Width” 像素值，是否 > window.innerWidth
- 控制台运行 document.body.scrollWidth > window.innerWidth，返回 true 就确认存在横向溢出
- 优先用 width: 100% 替代 100vw，它基于父容器计算，天然规避视口边距干扰
- 若必须用 vw，配合 box-sizing: border-box 并显式减去 padding/border：例如 width: calc(100vw - 16px)
排查浮动、Flex 或 Grid 子项的盒模型偏差
浮动元素没设 box-sizing: border-box，又加了 padding 或 border，就会按 content-box 计算，实际宽度 = 百分比 + 像素值，轻松突破 100%；Flex/Grid 里子项设了 min-width: fit-content 或未启用 flex-shrink: 1，也会拒绝压缩，把父容器撑破。
实操建议：
- 全局加 * { box-sizing: border-box; }，一劳永逸避免 padding/border 溢出
- 对所有浮动容器或 Flex/Grid 父项，检查子项是否有未约束的固有尺寸（如图片没设 max-width: 100%、table 没设 table-layout: fixed）
- 用 * { outline: 1px solid red !important; } 快速定位哪个元素真正顶到最右边界
- 避免在响应式容器上混用 width: 100% 和 max-width，优先只用后者 + margin: 0 auto
注意 pre、code、长文本等隐藏溢出源
pre 和 code 块默认 white-space: pre，长代码行不会换行；含长英文/数字串的段落若没设 word-break: break-word 或 overflow-wrap: break-word，也会横向撑开。这些元素不报错、不显眼，但极易成为滚动条的幕后推手。
实操建议：
- 给所有 pre 加 overflow-x: auto 或 white-space: pre-wrap
- 对可能含长串文本的容器，统一加：
word-break: break-word;<br>overflow-wrap: break-word;
- 第三方组件（地图、图表）内部常有固定宽或
position: absolute 偏移，检查其容器是否设置了 overflow: hidden 或需手动加 max-width: 100%- 不要依赖
html 或 body 上的 overflow-x: hidden，它只是视觉掩耳盗铃，无法阻止内容真实溢出最常被忽略的点是：问题往往不在你写的那几行“全宽”样式里，而在 body 的默认边距、子元素的固有尺寸、以及盒模型计算方式这三者的叠加效应中。修复必须从根元素开始，逐层验证真实渲染宽度，而不是靠猜或加 !important。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
