通栏横幅需重置 body/html margin 为 0，用 width: 100vw 配合负 margin 或 transform 实现真通栏，背景图设 background-size: cover 和 center center，且必须添加 viewport 元标签与图片懒加载。
通栏横幅不是靠“撑满屏幕”实现的，而是靠正确处理 margin、padding 和容器宽度计算逻辑。直接写 width: 100% 很可能被父元素内边距或默认 body 间距截断，导致左右留白或滚动条。
为什么 width: 100% 做不出真通栏
浏览器默认给 body 加了 margin: 8px（各浏览器略有差异），且很多 CSS 框架或重置样式没清干净。即使设了 width: 100%，实际渲染宽度 = 100% + body 的 margin，触发水平滚动条，视觉上就“没通栏”。
- 必须显式重置
body和html的外边距：margin: 0 -
width: 100%是相对于父容器内容区计算的，若父容器有padding，子元素仍会被挤缩 - 更稳妥的做法是用
width: 100vw—— 它始终等于视口宽度，绕过父容器限制
用 100vw + 负 margin 实现安全通栏
仅靠 100vw 还不够：当页面内容高度超过一屏、出现垂直滚动条时，滚动条会占用部分视口宽度（比如 17px），100vw 仍按原始视口算，导致横幅右侧溢出并触发隐藏的水平滚动条。解决方案是补上负边距抵消滚动条宽度。
- 基础结构：
<header class="banner"> <div class="banner-inner">这里是横幅内容</div> </header>
- CSS 关键段：
.banner { width: 100vw; margin-left: calc(-50vw + 50%); /* 或更兼容写法：margin-left: -50vw; transform: translateX(50%); */ } .banner-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 2rem; } - 不用
position: absolute—— 它会让横幅脱离文档流，影响后续元素布局
背景图居中且不拉伸的关键参数
通栏横幅常配大图背景，但 background-size: cover 在超宽屏下容易只显示人脸/局部，而 contain 又留白太多。真正可控的方式是组合使用 background-position 和明确尺寸约束。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
background-repeat: no-repeat，否则平铺会破坏设计感 - 推荐写法：
background-image: url(banner.jpg); background-size: cover; background-position: center center; background-attachment: scroll; /* 避免 fixed 导致 Safari 渲染异常 */
- 如果图太窄，用
min-width: 100vw强制撑开容器，再配合object-fit: cover（用于<img>标签）更可控
最易被忽略的是移动端 viewport 设置和图片加载性能：没有 <meta name="viewport" content="width=device-width, initial-scale=1">，通栏在手机上会缩放错乱；横幅图没压缩或没加 loading="lazy"，首屏加载延迟明显。这两项不改，再精美的设计也卡在用户打开前。
