老师,为什么wrapper中要设overflow,高度要设置成0，padding-bottom宽高比怎么计算

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

1、为了防止内容超出外层盒子区域，影响后面元素的布局，所以设置了overflow:hidden;属性，让超出部分隐藏。

2、直接写成height:200px;，在改变屏幕宽度后，height属性值始终是200px，可能会导致图片宽高比不成比例，出现变形的情况，效果不美观，所以老师这里通过padding-bottom设置盒子实际高度，所以将height设置为0。

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

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

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

祝学习愉快~