利用padding-top/padding-bottom百分比，进行占位和高度自适应

Posted 2020-12-05 daisygogogo

在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;
}

 

本文就到这里结束，谢谢阅读。