翻看别人代码的时候,看到 padding-top:70%, 当时不理解这个70%是相对于哪个元素的。查了一下w3school,当margin/padding取百分比的值时,无论是 left/right 还是 top/bottom,都是基于父元素的宽度的。
萌新虽然知道margin/padding设置为百分比是基于父元素宽度的了,但是不知道这有什么用,于是看了看大佬的分析:巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)
在我练习的那个项目里,图片所在的div并没有定义高度,而是使用padding-top占位,效果图如下所示:
可以看到 .bg-image 的高度 height: 0,使用padding占位以显示背景图:
PS:萌新第一次写文章,不忍直视。。。