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

 

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