必须重置body { margin: 0; padding: 0; }，因所有浏览器默认设margin: 8px，不随缩放变化，手机上放大后左右各8px即成肉眼可见白边；仅清margin不够，还需清padding，且width优先用100%而非100vw。
body 默认 margin 导致左右白边怎么清
几乎所有浏览器会给 body 加 margin: 8px，这不是 bug，是历史遗留行为。它不随缩放变化，但在手机上被放大后，左右各 8px 就变成肉眼可见的“白边”。哪怕你给容器写了 width: 100%、margin: 0，也挡不住这层外推力。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 最开头加
body { margin: 0; padding: 0; }，别只清 margin 忽略 padding —— 某些 CMS 模板会偷偷加padding - 用
* { outline: 1px solid red !important; }快速定位哪个元素真正顶到视口边缘 - 别用
overflow-x: hidden掩盖问题，它只是藏起滚动条，不解决横向溢出根源
全宽容器该用 100% 还是 100vw
width: 100vw 看似精准，但它按视口宽度计算，不扣除 body 的默认 margin，也不考虑滚动条宽度（尤其 Windows 下），实际总宽常超 window.innerWidth。而 width: 100% 基于父容器计算，天然绕过这些干扰。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 响应式全宽容器优先用
width: 100%+margin: 0 auto - 若必须用
vw（比如要撑满含滚动条的视口），搭配box-sizing: border-box和显式减法：width: calc(100vw - 16px) - 运行
document.body.scrollWidth > window.innerWidth在控制台验证是否真有横向溢出
img 底部间隙怎么彻底干掉
img 默认是 inline 元素，浏览器会为它预留基线（baseline）下方的空间——这是给字母 “g”“y” 留的 descender 区域，导致图片底部出现约 3–4px 的不可见间隙。这个间隙在深色背景或带边框的容器里特别扎眼。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 最通用解法：
img { display: block; }，块级元素不参与行内排版，间隙归零 - 需保留内联特性时（如和文字混排），用
vertical-align: top或middle，但注意它对display: block无效 - 别用
font-size: 0清除 inline 间隙却忘记给img单独设font-size: initial，否则图片可能消失
flex 居中时 align-items 不生效的常见原因
align-items: center 要起作用，前提是父容器有明确的高度参照。如果只写 display: flex; justify-content: center; align-items: center; 却没设高度，浏览器不知道“中心”在哪——因为子元素高度未定，父容器高度塌陷为 0。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
min-height: 100vh或height: 100vh（注意vh在 iOS Safari 中可能不准，可配合 JS 动态修正） - 用
flex-direction: column+justify-content: center替代align-items，更稳定 - 检查是否被
position: absolute或float干扰了 flex 布局上下文
真实项目里，白边、间隙、居中失效往往不是孤立问题，而是浏览器默认行为叠加盒模型计算偏差的结果。最容易被忽略的是：你改了某处样式，却没意识到它触发了另一处隐式继承或重排，比如给 section 加了 padding，结果把原本刚好的 100% 宽度推成了溢出。动手前先开 DevTools 看 computed styles，比猜快得多。
