Dra*_*ght 7 css user-interface sizing width
1vw = 1%,如果它们100%可互换,为什么它们都存在？我觉得%取决于包装标签的大小,但无论包装标签的大小如何,vh总是依赖于窗口大小.谢谢,
它们不一定是可以互换的.
行为将主要取决于元素在DOM中的位置,因为这将确定元素的包含块是什么.如果元素的宽度为100%,则其宽度为100%包含块的宽度.如果元素的宽度为100vw,则100%视口的宽度将为视口宽度(视口可能不是元素的包含元素,但视口百分比单位将始终相对于视口).
基于百分比的严格宽度始终相对于另一个元素的宽度,但在使用视口百分比长度时,元素的宽度实际上可以相对于视口的高度.例如,如果元素的宽度为100vh,则其宽度将为100%视口的高度.使用严格基于百分比的宽度时,这是不可能的.
视口百分比长度始终相对于其初始包含块(即视口):
5.1.2.视口百分比长度:'vw','vh','vmin','vmax'单位
视口百分比长度相对于初始包含块的大小.当初始包含块的高度或宽度改变时,它们相应地缩放.
而基于百分比的单位将相对于其父元素(即它们的包含块),这可能恰好是body/ html元素,在这种情况下,它们将类似于视口百分比长度.
百分比值始终相对于另一个值,例如长度.允许百分比的每个属性还定义百分比所引用的值.该值可以是同一元素的另一个属性的值,祖先元素的属性或格式化上下文的值(例如,包含块的宽度).当为根元素的属性设置百分比值并且百分比被定义为引用某个属性的继承值时,结果值是该属性的初始值的百分比倍.