padding-bottom:31.25%，我无法理解

Question

overflow: hidden
width: 100%
height: 0
padding-bottom: 31.25%
不明白上面4行css的意思，老师能不能帮我讲解下？

Answer 1

提问者 weixin_慕妹0008060 2019-12-04 09:50:28

如果height:0，那么content也为0，按道理是没有图片显示的。因为padding-bottom是代表content与border-bottom之间的距离大小。老师，我不太理解？

• Dell #1

  padding-bottom 的比例是相对于谁的呢？实际上是相对这个元素的宽度，所以相对于谁的百分比，这个清楚了你应该就理解这块的东西了。

• 提问者 weixin_慕妹0008060 回复 Dell #2

  我最新的理解是，padding-bottom是相对于目标元素的宽度的比例。比如你设置padding-bottom为50%,那么盒子模型就是一个正方形。还有，我现在对盒子模型最新的理解是，border和padding都可以显示目标元素的内容，margin不知道可不可以？