现在有这样一个场景:一个移动端页面的顶部有一个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
的宽度:
支持,谢谢