您的位置:首页技术文章
文章详情页

没明白盒子的height随width的变化这段css是怎样实现的?

【字号: 日期:2023-02-05 16:29:48浏览:31作者:猪猪

问题描述

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

.item {

width: 20%;background-color: red;

}

.item:before {

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

}

问题解答

回答1:

伪元素 item:before 是 item 的子元素,其内容插入在 item 之前。content: '' 使伪元素起作用,但内容高度为0。padding 的百分比根据父元素宽度而定。padding-top: 100% 就是 item 宽度的 100%,所以是 1:1 关系。

标签: CSS
相关文章: