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

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

1. width: 100%;

   • 定义：将元素的宽度设置为其包含块（通常是父元素）宽度的 100%。
   • 效果：元素会根据其包含块的宽度进行调整。如果包含块的宽度发生变化，元素的宽度也会相应变化。
   • 应用场景：适用于需要根据父元素宽度进行调整的元素，比如在响应式布局中，根据父容器的宽度来动态调整元素宽度。

2. width: 100vw;

   • 定义：将元素的宽度设置为视口宽度（viewport width）的 100%。
   • 效果：元素的宽度等于浏览器窗口的宽度，不受父元素宽度的影响。如果浏览器窗口宽度发生变化，元素的宽度也会相应变化。
   • 应用场景：适用于需要占据整个视口宽度的元素，比如全屏背景图片或者横幅。

举例说明

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

• 使用 width: 100%;

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

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

• 使用 width: 100vw;

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

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

总结

• width: 100%;：相对于父元素宽度，适用于需要根据父元素宽度调整的情况。
• width: 100vw;：相对于视口宽度，适用于需要占据整个视口宽度的情况。