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

Question

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

Answer 1

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

Answer 2

根本不是对照试验。
/*ul{
padding:3%003%;
//width:100%;这个没加
//overflow:hidden;
}
ulli{
width:30%;
padding:30%000;
background-color:orange;
border-radius:10px;
float:left;
margin-right:3%;
margin-bottom:3%;
}*/
ul{
padding:3vw003vw;
width:100vw;
overflow:hidden;
}
ulli{
width:30vw;
height:30vw;
background-color:orange;
border-radius:1vw;
float:left;
margin-right:3vw;
margin-bottom:3vw;
}