CSS单位-vh / vw和％之间有什么区别？

  • Z时代
  • 2024-01-10
  • 分类：问答

我刚刚了解了一个新的不常见的CSS单元。vh并分别vw测量视口的高度和宽度百分比。

vw和vh分别是窗口宽度和高度的百分比：100vw是宽度的100％，80vw是80％，依此类推。

这似乎与%单位完全相同，这很常见。

在开发人员工具中，我尝试将值从vw / vh更改为％，反之亦然，并得到相同的结果。

两者之间有区别吗？如果没有，为什么要引入这些新单位CSS3？

回答：

100%可以达到100%任何高度。举例来说，如果我有一个父div那是1000px高大的，小时候div是在100%高度，那么这个孩子div可能理论上比视，或小于视口的高度小得多的高度高得多，即使是div设置在100%身高。

如果我改为将其子级div设置为100vh，则它将 仅填充100%视口的高度，而不必 填充 父级div。

body,
html {
    height: 100%;
}
.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}
.child {
    background: pink;
    height: 100%;
    width: 100%;
}
.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}
<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>
<div class="viewport-height">
    100vh height
</div>

以上是 CSS单位-vh / vw和％之间有什么区别？ 的全部内容， 来源链接： utcz.com/qa/435483.html

回到顶部