鍍金池/ 問(wèn)答/HTML/ 為什么vw和百分比設(shè)置的數(shù)值不相等?

為什么vw和百分比設(shè)置的數(shù)值不相等?

代碼如下:
https://jsfiddle.net/ffn1vce5/
如果把li元素的寬度30vw換成30%,然后審查元素查看會(huì)發(fā)現(xiàn)寬度比原來(lái)要小了,這是為什么呢?

回答
編輯回答
薄荷糖

...因?yàn)槟惆俜直鹊膗l沒有寫width:100%;width默認(rèn)auto了.
而且本身你的容器內(nèi)的元素總寬就超出了100vw,你的(30+3)*3+3 > 100
vw單位下,它是基于整個(gè)文檔寬度計(jì)算,是恒定的值.
而百分比下的ul的3%實(shí)際像素值(基于body總寬)是不等于li的3%右邊距的(基于ul的總寬,少了3%的內(nèi)邊距)

2017年8月13日 03:10
編輯回答
爛人

根本不是對(duì)照試驗(yàn)。

/*ul{
        padding: 3% 0 0 3%;
        // width: 100%; 這個(gè)沒加
        // 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;
    }
2017年7月17日 22:50