在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

 

我们设置如下的样式，即可实现每个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;}

 

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