84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
刚看到这段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 关系。
伪元素 item:before 是 item 的子元素,其内容插入在 item 之前。
content: '' 使伪元素起作用,但内容高度为0。
padding 的百分比根据父元素宽度而定。
padding-top: 100% 就是 item 宽度的 100%,所以是 1:1 关系。