2回答

好帮手慕久久

2020-12-18

同学你好，2:1的原因如下：

由于padding-bottom会增大元素的高度。初始时，元素高度是0，而父元素宽度是200px，那么padding-bottom设置成50%后，padding-bottom的实际值就是100px，所以元素的高度就是100px，如下：

而padding-left、padding-right会增大元素的宽度而非高度，所以我们不使用padding-left、padding-right（我们想让元素有高度，并且宽高比成固定比例）。

祝学习愉快!

0

好帮手慕久久

2020-09-08

同学你好，问题解答如下：

1.“height: 0;padding-bottom: 50%;”这句代码，是设置给“.swiper-container”的，如下：

目的就是让“.swiper-container”的宽高比始终为2:1。

由于“.swiper-container”的宽度是100%（它是块级元素，宽度默认是100%），所以在不同的屏幕下，它的实际宽度是不同的，所以如果想实现其宽高比始终为2：1，就可以采用“height: 0;padding-bottom: 50%;”这两句代码实现。

这两句代码具体含义如下：

由于padding会增大元素的尺寸，所以设置height:0;时，再设置padding，元素的尺寸会被增大，如下：

当padding-bottom设置成百分比时，它参考的是父元素的宽度，所以padding-bottom: 50%;的含义就是padding-bottom的值，是父元素宽度的一半，假如父元素宽度是200px，那么padding-bottom: 50%;就对应着padding-bottom:100px;，这样就实现了宽高比是2：1（200:100）。

2. 下面的那句解释中，“padding-bottom：25%；”是设置“icon”的样式，即让icon的宽度是25%的正方形，如下：

实现方式，依旧是利用padding，即设置“padding-bottom: 25%;”，含义就是，padding-bottom的值，是父元素宽度的25%，即等价于icon的高度是父元素宽度的25%，而icon的宽度也是25%，这样icon就实现了宽高相等。比如父元素宽度是200px，那么icon的宽度就等于50px（icon样式中，设置了   width: 25%；），高度也等于50px（padding-bottom：25%；），因此icon的宽高一样。

同学再试着理解一下。

如果我的回答帮到了你，欢迎采纳，祝学习愉快！

0

hyperse

hp>看了那么多关于padding-bottom的解答，终于在这里看明白了，但是我还有一点疑问就是：假如父元素宽度是200px，那么padding-bottom: 50%;就对应着padding-bottom:100px;，这样就实现了宽高比是2：1（200:100）   

这句话里面，我可以理解padding-bottom为什么最终值是100px，但是为什么宽高比的值2：1呢？因为padding-bottom指定为父元素宽度的一半？bottom不是下方向的吗，为啥不是padding-left或者padding-right跟父元素宽度关联呢。。。

h020-12-17

共1条回复