width: 100%和 width: 100vw这两种写法有什么区别

舒一笑2024-06-08 8:20

width: 100%; 和 width: 100vw; 是两种不同的 CSS 写法，它们在实际应用中会有不同的效果。以下是这两种写法的主要区别：

width: 100%;
- 定义：将元素的宽度设置为其包含块（通常是父元素）宽度的 100%。
- 效果：元素会根据其包含块的宽度进行调整。如果包含块的宽度发生变化，元素的宽度也会相应变化。
- 应用场景：适用于需要根据父元素宽度进行调整的元素，比如在响应式布局中，根据父容器的宽度来动态调整元素宽度。
width: 100vw;
- 定义：将元素的宽度设置为视口宽度（viewport width）的 100%。
- 效果：元素的宽度等于浏览器窗口的宽度，不受父元素宽度的影响。如果浏览器窗口宽度发生变化，元素的宽度也会相应变化。
- 应用场景：适用于需要占据整个视口宽度的元素，比如全屏背景图片或者横幅。

假设浏览器窗口宽度为 1200px，包含块（父元素）宽度为 800px：

使用 width: 100%;

html 复制代码

<div style="width: 800px;">
  <div style="width: 100%; background-color: lightblue;">
    这个 div 的宽度是 800px
  </div>
</div>

在这个例子中，内层 div 的宽度是父元素的 100%，即 800px。

使用 width: 100vw;

html 复制代码

<div style="width: 800px;">
  <div style="width: 100vw; background-color: lightgreen;">
    这个 div 的宽度是 1200px
  </div>
</div>

在这个例子中，内层 div 的宽度是视口宽度的 100%，即 1200px。