width: 100%和 width: 100vw这两种写法有什么区别
width: 100%; 和 width: 100vw; 是两种不同的 CSS 写法，它们在实际应用中会有不同的效果。以下是这两种写法的主要区别：
-
width: 100%;- 定义：将元素的宽度设置为其包含块（通常是父元素）宽度的 100%。
- 效果：元素会根据其包含块的宽度进行调整。如果包含块的宽度发生变化，元素的宽度也会相应变化。
- 应用场景：适用于需要根据父元素宽度进行调整的元素，比如在响应式布局中，根据父容器的宽度来动态调整元素宽度。
-
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;：相对于视口宽度，适用于需要占据整个视口宽度的情况。
