为什么vw和百分比设置的数值不相等？

Question

代码如下：
https://jsfiddle.net/ffn1vce5/
如果把li元素的宽度30vw换成30%，然后审查元素查看会发现宽度比原来要小了，这是为什么呢？

Answer 1

...因为你百分比的ul没有写width:100%;width默认auto了.
而且本身你的容器内的元素总宽就超出了100vw,你的(30+3)*3+3 > 100
vw单位下,它是基于整个文档宽度计算,是恒定的值.
而百分比下的ul的3%实际像素值(基于body总宽)是不等于li的3%右边距的(基于ul的总宽,少了3%的内边距)

Answer 2

根本不是对照试验。

/*ul{
        padding: 3% 0 0 3%;
        // width: 100%; 这个没加
        // overflow: hidden;

    }
    ul li{
        width: 30%;
        padding: 30% 0 0 0;
        background-color: orange;
        border-radius: 10px;
        float: left;
        margin-right: 3%;
        margin-bottom: 3%;
    }*/

    ul{
        padding: 3vw 0 0 3vw;
        width: 100vw;
        overflow: hidden;
    }
    ul li{
        width: 30vw;
        height: 30vw;
        background-color: orange;
        border-radius: 1vw;
        float: left;
        margin-right: 3vw;
        margin-bottom: 3vw;
    }

Answer 3

vw计算的是整个视口的宽度，包括滚动条
百分比计算宽度的会后不包括滚动条