padding-top：100％如何运作？

Question

我有以下代码：

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

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

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

由于某种原因，孩子成为一个完美的广场。这至少是奇怪的，因为没有任何div有任何高度分配给他们。为什么会这样？

padding-top: 100%做了什么？

Fiddle

Answer 1

您的孩子div以100％宽度填充父母。以百分比表示的填充顶部属性由div宽度确定。因此，您的孩子的父母宽度为100％（30％），填充顶部100％表示该元素的宽度为100％。这同样适用于由宽度计算的margin-top。