没明白盒子的height随width的变化这段css是怎样实现的?
高洛峰
高洛峰 2016-11-01 10:24:28
0
1
819

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

.item {

width: 20%;
background-color: red;

}

.item:before {

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

}

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

모든 응답(1)
三叔

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!