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

.item {

width: 20%; background-color: red;

}

.item:before {

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

}