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

Question

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

.item {

width: 20%;
background-color: red;

}

.item:before {

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

}

Answer 1

The pseudo element item:before is a child element of item, and its content is inserted before item.
content: '' makes the pseudo-element work, but with a content height of 0.
The percentage of padding is based on the width of the parent element.
padding-top: 100% is 100% of the item width, so it is a 1:1 relationship.

Answer 2

padding-top: percent is calculated based on the ratio of the width of the containing block