搜尋

首頁  >  問答  >  主體

css3 - 没明白盒子的height随width的变化这段css是怎样实现的?

刚看到这段css代码,实现了一个1:1长宽比例并且随网页变化的盒子,没有明白它设置height的原理是什么?

.item {

width: 20%;
background-color: red;

}

.item:before {

content: '';
display: block;
padding-top: 100%;

}

伊谢尔伦伊谢尔伦2768 天前537

全部回覆(2)我來回復

  • PHP中文网

    PHP中文网2017-04-17 11:52:38

    偽元素 item:before 是 item 的子元素,其內容插入在 item 之前。
    content: '' 讓偽元素起作用,但內容高度為0。
    padding 的百分比是根據父元素寬度而定。
    padding-top: 100% 是 item 寬度的 100%,所以是 1:1 關係。

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 11:52:38

    padding-top: percent 是根據包含區塊寬度的比例來計算的

    回覆
    0
  • 取消回覆