利用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; }

 

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