Published on

padding-top:100%的秘密

Authors
  • avatar
    Name
    Joy Peng
    Twitter

今天面试的时候被问到了一个问题：padding-top:100%做了什么？确实之前没有深入了解过，所以回来查了一下资料，发现这个问题还是挺有意思的。

首先来看这样一个例子：

<style>
  .parent {
  width: 30%;
  border: 1px dotted red;
}

.child {
  padding-top: 100%;
  border: 1px solid black;
}


</style>
 <div class="parent">
  <div class="child"></div>
</div>

最后的结果是:

padding

一个完美的正方形!!!!!? 这看起来很奇怪，我们没有给任何div分配高度。

要解答这个问题，首先要知道padding-top或 padding-bottom的值为百分比时，"the percentage refer to the width of the containing block"，百分比是相对于包含块的宽度计算的。

什么又是包含块呢？MDN上的定义是“containing block is the content area of an element's nearest block-level ancestor”，也就是说包含块是元素最近的块级祖先的内容区域。

详细解答

基于这个原理，我们来解释一下上面的例子：

  1. 首先，我们给.parent设置了一个宽度为30%，这个宽度是相对于.parent的父元素的宽度计算的。由于.parent的父元素是body，所以.parent的宽度是body的宽度的30%。
  2. 然后，我们给.child设置了padding-top:100%，这个100%是相对于.child的包含块（也就是.parent）的宽度计算的，所以.child的padding-top是.parent的宽度的100%。
  3. 由于child的宽度本身就会继承parent的宽度，所以此时child的宽高比就为1:1，最终的结果就是一个正方形。

应用场景

使用这种 CSS 技巧，不需要通过 JavaScript 动态计算和设置高度。只要设置适当的 padding 值，CSS 会自动调整元素的高度，保持所需的纵横比。这种方法简洁且不容易出错，因为它完全依赖于 CSS 的布局机制，而不是需要额外的脚本来处理布局。

比如，我们可以用这种方法设置一个宽高比为16:9的视频播放器：

<style>
  .video-wrapper {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
  }

  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>