1回答

好帮手慕慕子

2020-12-04

同学你好，对于你的问题解答如下：icon的高度为25%并不是因为设置了height:0;属性，而是因为设置了padding-bottom:25%;属性。

具体可以参考如下解析：

因为padding-bottom的百分比的值是按照父元素宽度的值计算，我们假设屏幕的总宽度是800px

icon所在区域的高度，是由给swiper-container设置的padding-bottom:50%;撑起来的，即：400px

icon设置width:25%;后，那么此时每个icon的宽度就是200px，给icon设置padding-bottom：25%; 它会参考他的父元素宽度800计算，即200px，所以就形成了每个icon的高度为icon所在区域高度的一半的效果，如下图所示：

因为overflow:hidden;属性生效的条件是元素设置了固定的height属性值，所以设置height:0;属性，是为了结合overflow:hidden;属性实现超出隐藏的效果。

祝学习愉快~

0