84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
刚看到这段css代码,实现了一个1:1长宽比例并且随网页变化的盒子,没有明白它设置height的原理是什么?
.item {
width: 20%; background-color: red;
}
.item:before {
content: ''; display: block; padding-top: 100%;
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...
伪元素 item:before 是 item 的子元素，其内容插入在 item 之前。content: '' 使伪元素起作用，但内容高度为0。padding 的百分比根据父元素宽度而定。padding-top: 100% 就是 item 宽度的 100%，所以是 1:1 关系。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
伪元素 item:before 是 item 的子元素，其内容插入在 item 之前。
content: '' 使伪元素起作用，但内容高度为0。
padding 的百分比根据父元素宽度而定。
padding-top: 100% 就是 item 宽度的 100%，所以是 1:1 关系。