利用padding-top/padding-bottom百分比，進行占位和高度自適應

在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值為百分比的時候，參照的是父元素的寬度。

比如：父元素寬度是100px, 子元素padding-top:50%，那么padding-top的實際值就是100*50%=50px

這個小小的知識點，其實有很大的用處，應用也很廣泛，就是進行提前占位，避免資源加載時候的閃爍，還可以讓高度自適應。

 

舉例：

一般來說，想要自適應屏幕大小，我們設置元素的寬度自適應是完全沒有問題的，比如希望一行顯示5個元素，那么我們設置每個元素width:20%就可以了（box-sizing需要為border-box）。

但是高度就比較尷尬了，因為高度都是被內容撐開的，一般不定，那么通過百分比來設置高度，就變得不是很實用。

而且，對於圖片等資源來說，加載是需要時間的，即便網頁加載速度已經很快了，由於高度被圖片撐開的過程，不可避免會出現閃爍，這時候我們的padding-top等就發揮大用處啦。

如下面一段代碼，圖片的寬高比為1:1.3

    <ul>
        <li class="item placeholder"><img class="img"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532110043386&di=dc7277a3b566e40a9d98d736f1613dd2&imgtype=0&src=http%3A%2F%2Fpic.qqtn.com%2Fup%2F2016-5%2F201605301928431736188.png">
        </li>
        <li class="item placeholder"><img class="img"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532110043386&di=dc7277a3b566e40a9d98d736f1613dd2&imgtype=0&src=http%3A%2F%2Fpic.qqtn.com%2Fup%2F2016-5%2F201605301928431736188.png">
        </li>
    </ul>        

 

我們設置如下的樣式，即可實現每個li的寬高比為1:1.3

.item {
    width: 20%;
}

.placeholder {
    padding-top: 26%;
}

實際上這時候，每個li的實際高度並沒有受到約束，內容多高（圖片）li就多高，想要實現寬高等比？

我們需要設置圖片的定位為絕對定位，並且為.item添加相對定位

.item {
    width: 20%;
    position: relative;
}

.placeholder {
    padding-top: 26%;
}

.img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

這樣就實現了我們想要的效果了。

但是有一個問題，假如我們想要設置max-width的話，在上面樣式的基礎上，為.item添加max-width 是不起作用的，原因max-width只有在內容撐開高度的時候才起作用，而.item並不是被內容撐開的，為了解決這個問題，還可以使用偽類元素:after，:before，修改之后的樣式如下

.item {
    width: 20%;
    position: relative;    
}

.placeholder:after {
    content: '';
    display: block;
    padding-top: 130%; // 這里的比例是相當於自身來說的，由於寬高比是1:1.3，所以這里要設為130%
}

.img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

 

本文就到這里結束，謝謝閱讀。