css vh单位和百分比的区别
首先，vw与vh是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
vh和vw是要优于rem的，但是兼容性比较差，建议PC端可以优先使用
百分比就不多解释了，都明白，那么来看看区别
首先，vw，在浏览器没有横向滚动条的时候，vw和百分比，没多少区别，可能唯一的区别在于，百分比依赖父级大小，而vw没有，vw的浏览器宽度是固定的(没有横向滚动条)
vh与百分比的区别就大了。
我们原先，要创建一个div与网页高度一直，必须要对html和body设置大小，因为百分比是根据父级标签大小来定的
html, body{
    height: 100%；
}
然后，才能设置：
div{
    height: 100%;
}
margin属性值可以为百分比
但是vh不用，vh可以直接使用
div{
    height: 100vh;
}
这是最舒服的。
当然，如果有滚动条，由于vw与vh是根据浏览器窗口大小，而窗口大小，是不会改变的，因此，在有滚动条的时候，如果想要沾满，最好使用百分比，比如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            width: 3000px;
            height: 3000px;
        }
        .div1{
            width: 80vw;
            height: 100vh;
            background-color: red;
        }
        .div2{
            width: 80%;
            height: 100%;
            background-color: palegreen;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>
这个时候，想要占满，div2的百分比写法，就会优于vh的写法

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。