css3 - 没明白盒子的height随width的变化这段css是怎样实现的?
本文介绍了css3 - 没明白盒子的height随width的变化这段css是怎样实现的?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
刚看到这段css代码,实现了一个1:1长宽比例并且随网页变化的盒子,没有明白它设置height的原理是什么?
.item {
width: 20%;
background-color: red;
}
.item:before {
content: '';
display: block;
padding-top: 100%;
}
解决方案
伪元素 item:before 是 item 的子元素,其内容插入在 item 之前。
content: '' 使伪元素起作用,但内容高度为0。
padding 的百分比根据父元素宽度而定。
padding-top: 100% 就是 item 宽度的 100%,所以是 1:1 关系。
这篇关于css3 - 没明白盒子的height随width的变化这段css是怎样实现的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文