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

Posted daisygogogo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用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;
}

 

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

 

以上是关于利用padding-top/padding-bottom百分比,进行占位和高度自适应的主要内容,如果未能解决你的问题,请参考以下文章

如何利用ArcGis生成TPK

MS16-032漏洞利用

如何利用Burp Suite进行爆破

自制ThinkPHP漏洞利用工具

RL - 09 探索与利用

Redis未授权漏洞利用方式