主页 / 问题 / 1115367
Accepted
Денис Беспалов
Asked:2020-04-25 10:25:34 +0800 CST2020-04-25 10:25:34 +0800 CST

解释它为什么起作用？

  • 772

我找到了一个 css 代码，它给了我们一个固定比例的橡胶方块。那些。无论我们如何改变 brazuru 的宽度，正方形仍然是正方形。我不明白为什么 div 的高度值取宽度值？

div {
  width: 50%;
  /* Задаём ширину */
  margin: auto;
  /* Размещаем по цетру */
  background: silver;
  /* Задаём фон */
  overflow: hidden;
  /* Скрываем всё, что выходит за границы*/
}

div:before {
  /* Добавляем свойства в конец элемента */
  content: "";
  padding-top: 100%;
  /* Отступ сверху */
  float: left;
  /* Приковываем к левому краю */
}
<div></div>

html

1 个回答

  1. Best Answer

    如规范中所述：

    指定为百分比的填充值是相对于包含块的宽度计算的。

    因此，通过要求padding-top: 100%我们扩展 before 元素，并通过扩展 div 本身，到 div 宽度的 100%，从而产生方形外观。

    • 0

相关问题