为什么宽度为100px，底部为100％的div的padding-bottom不是100px

Question

根据https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom，底部宽度为100％的值应与宽度为100px时将其设置为100px相同。

但是，用作width的值不是设置为div的宽度（100px），而是div容器的宽度，即此处的主体。为什么会这样？

当div的显示切换到table-cell时，填充变得100px，因为认真设置了div的宽度。否则，div会被视为遍及整个范围，就像没有设置宽度一样。

<div>hoho</div>

div {
    width: 100px;
    padding-bottom: 100%;
    background: lightcoral;
}

https://jsfiddle.net/citykid/zx5uptwy/4/

Answer 1

From MDN：

  

相对于包含块的宽度的填充大小（以百分比表示）

强调我的。

这意味着您正在寻找的是

.wrapper {
  width: 100px;
}

.content {
  padding-bottom: 100%;
  background: lightcoral;
}

<div class="wrapper">
  <div class="content">hoho</div>
</div>