当前位置: 首页 > 知识库问答 >
问题:

%和vw在CSS方面有什么区别?[副本]

满增
2023-03-14

1vw=1%,那么如果它们是100%可互换的,为什么它们都存在呢?我觉得%依赖于包装标签的大小,但vh总是依赖于窗口大小,无论包装标签的大小。谢谢,

共有1个答案

荣晨朗
2023-03-14

它们不一定可以互换。

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

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

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

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

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

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

4.3.百分比:“ ”类型

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

 类似资料:
  • 问题内容: 我刚刚了解了一个新的不常见的CSS单元。并分别测量视口的高度和宽度百分比。 vw和vh分别是窗口宽度和高度的百分比:100vw是宽度的100%,80vw是80%,依此类推。 这似乎与单位完全相同,这很常见。 在开发人员工具中,我尝试将值从vw / vh更改为%,反之亦然,并得到相同的结果。 两者之间有区别吗?如果没有,为什么要引入这些新单位? 问题答案: 可以达到任何高度。举例来说,如

  • 我刚刚了解了一个新的不常见的CSS单元。和分别测量视口的高度和宽度的百分比。 我从Stack Overflow看这个问题,但它使单元看起来更加相似。 vw和vh单元是如何工作的 答案特别说 vw和vh分别是窗口宽度和高度的一个百分比:100vw是宽度的100%,80vw是80%等。 这似乎与单元完全相同,后者更为常见。 在Developer Tools中,我尝试将vw/vh的值更改为%,反之亦然,

  • 我已经使用SOF很长时间了,但从来没有问过一个问题。今天我在Firefox的网站上,注意到它谈到了px和%就好像它已经过时了。该网站建议使用ViewHeight和view width或view像素(vh和vi或vpx)。用... 而且 ..????他们为什么要做出改变?

  • Java的和有什么区别?

  • 返回此枚举常量的名称,与在其枚举声明中声明的名称完全相同。大多数程序员应该使用toString方法而不是这个方法,因为toString方法可能返回一个用户更友好的名称。此方法主要是为在特定情况下使用而设计的,在特定情况下,正确与否取决于获得准确的名称,而准确的名称不会因发布而异。 特别是,即使文档中说更喜欢,Java自己的StandardLocation枚举使用了而我认为文档中的建议是相反的。 此

  • 问题内容: 我知道CSS重置是什么,但是最近我听说了这个叫做Normalize.css的新东西。 Normalize.css和ResetCSS有什么区别? 标准化CSS和重置CSS有什么区别? CSS重置只是一个新的流行词吗? 问题答案: 我在normalize.css上工作。 主要区别在于: Normalize.css保留有用的默认值,而不是“取消样式化”所有内容。 例如,在包含normaliz