84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
刚看到这段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] Démarrage rapide de Node.js](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 关系。