老师你好为什么高度要设置成0，padding-bottom这个宽高比具体咋算的没看懂

同学你好， 可以使用padding-top设置盒子占据页面的高度，但是banner区域这里不可以使用padding-top替代padding-bottom实现效果。具体可以参考如下解析：

因为图片作为盒子的内容，默认从盒子内容的左上角显示，如果设置的是padding-top，盒子确实会有占据页面的高度，但是里面的内容会在padding-top下显示，由于设置了height:0; 和overflow:hidden;属性，导致无法看到图片，示例：

图片在padding-top下方显示，超出盒子被隐藏了。

设置padding-bottom，图片默认从盒子内容的左上角开始显示，刚好可以覆盖在padding-bottom区域上显示，如下：

祝学习愉快~

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

1、因为老师这里是想通过padding-bottom设置盒子实际高度，所以将height设置为0

2、padding-bottom值为百分比是根据父盒子宽度进行计算的。

图片设置宽度为100%，高度变为117px（这是浏览器取整后的，后面应该还有小数点，大概为117.1852，计算方式是200/(640/375)）

那么padding-bottom值计算出来的值与高度值一致需要为117.1852/375=0.3125，所以设置padding-bottom值为31.25% 。

祝学习愉快！