标签：速度 before 需要 ima 完全 item 样式 pre play
在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百分比，进行占位和高度自适应
标签：速度 before 需要 ima 完全 item 样式 pre play
原文地址：https://www.cnblogs.com/daisygogogo/p/9344727.html
