它们不一定可以互换。

该行为将主要取决于元素在DOM中的位置，因为这将决定元素的包含块是什么。如果元素的宽度为100%，则它的宽度将为包含块宽度的100%。如果元素的宽度为100vw，则它的宽度将为视口宽度的100%（视口可能不是元素的包含元素，但视口百分比单位将始终相对于视口）。

严格基于百分比的宽度总是相对于另一个元素的宽度，但是当使用视口百分比长度时，元素的宽度实际上可以相对于视口的高度。例如，如果一个元素的宽度为100VH，那么它的宽度将为视口高度的100%。当使用严格基于百分比的宽度时，这是不可能的。

viewport-百分比长度总是相对于它们的初始包含块，即viewport：

5.1.2.viewport-百分比长度：“vw”,“vh”,“vmin”,“vmax”单位

视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度改变时，它们会相应地缩放。

而基于百分比的单元将是相对于其父元素（即，其包含块）的，其父元素可能碰巧是body/HTML元素，在这种情况下，它们将类似于视口百分比长度。

4.3.百分比：“”类型

百分比值总是相对于另一个值，例如长度。允许百分比的每个属性还定义百分比引用的值。该值可以是同一元素的另一个属性的值、祖先元素的属性或格式化上下文的值（例如，包含块的宽度）。当为根元素的属性设置百分比值，并且将百分比定义为引用某个属性的继承值时，结果值是百分比乘以该属性的初始值。