现在有这样一个场景:一个移动端页面的顶部有一个banner,这个banner图片的宽高比是2:1。往往用户第一次打开该页面时,banner图片的加载速度都会比较慢,在加载的过程中,banner的位置是没有东西的,请问如何只用CSS来设置该部分在图片还没加载好的样式(即图片未加载完成时,banner区域的宽高比也要是2:1)。

这是我前几天面试的时候遇到的题目,当时我就蒙圈了…这TM不用JS怎么搞?

我假装思考了十几秒后说:不知道…

随后 ,面试官告诉我使用padding设置成百分比,这个百分比是根据它的宽来进行计算的。

当时我就觉得我会永远记住这个知识点:padding设置成百分比时,是根据它的宽来进行计算的。没错,我的确记的很清楚。

几天后的今天,我自己来测试一下发现并不是那么回事儿:

See the Pen WGZwEW by blwoosky (@blwoosky) on CodePen.

上面的例子中,HTML中只有一个.box,我给它的宽度设置成了100px,此时,也设置了padding-bottom:50%,按照那个面试官的说法,此时.box的高度应该是50px才对,可是你会发现,它的高并不是50px

WOW!Interesting~看来那个面试官说的也不对,那怎样才是对的呢?还是来看一下比较靠谱文档吧,打开MDN关于padding的文档,可以看到这样一句话:

Percentages: refer to the width of the containing block

containing block!看到了吗?containing block是啥?包含块!包含它的块!也就是说是它的父层级。

所以,当padding的值设置为百分比的时候,是根据他父层的宽度来进行计算的。幸好我上面的例子给.box设置了一个宽度,要不然我一定会很天真的相信那个面试官了。

我把宽度去掉之后,它的宽度就会是100%,也就是body的宽度:

See the Pen bwbELL by blwoosky (@blwoosky) on CodePen.