平博开户平博开户

平博官方网站
平博体育

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

 

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

 

欢迎阅读本文章: 朱秒

平博博彩公司

平博官方网站