设置元素全屏宽度可使用CSS的100vw单位，但需重置body的默认margin为0，以防滚动条或错位；若出现水平滚动，可改用width:100%并确保父元素全宽，或在父容器设置overflow-x:hidden，也可通过calc(100vw - 滚动条宽度)微调，常用于通栏页眉、横幅等设计。
使用 CSS 的 vw（viewport width）单位可以轻松实现全屏宽度的元素。1vw 等于视口宽度的 1%，所以 100vw 就是整个屏幕宽度。
设置元素为全屏宽度
要让一个元素占满整个屏幕宽度，直接设置其宽度为 100vw：
.full-width {
width: 100vw;
margin: 0;
padding: 0;
}
这样该元素就会从屏幕最左侧延伸到最右侧，不受父容器宽度限制。
注意默认 body 边距问题
大多数浏览器会给 body 元素添加默认外边距（margin），这可能导致即使设置了 100vw 也会出现滚动条或错位。
立即学习“前端免费学习笔记（深入）”；
解决方法是重置 body 的 margin：
body {
margin: 0;
padding: 0;
}
避免水平滚动条
虽然 100vw 包含了滚动条的宽度（如果存在），有时会导致轻微的水平滚动。如果你发现页面出现不必要的滚动条，可以改用以下方式：
- 使用 width: 100% 并确保父元素是全宽
- 或者保持 100vw，但给父容器设置 overflow-x: hidden
- 也可以使用 calc(100vw - 17px) 扣除滚动条宽度（不推荐，因设备而异）
实际应用场景
常见用于页眉、横幅、分割区块等需要通栏显示的设计：
.banner {
width: 100vw;
height: 60vh;
background: #000;
color: #fff;
margin-left: calc(-50vw + 50%);
}
上面的例子中，通过负 margin 居中处理，使内容居中显示的同时保持宽度为全屏。
基本上就这些。合理使用 vw 能让你更灵活地控制响应式布局中的尺寸表现。
