文章详情页
没明白盒子的height随width的变化这段css是怎样实现的?
问题描述
刚看到这段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
相关文章:
1. docker不显示端口映射呢?2. 关docker hub上有些镜像的tag被标记““This image has vulnerabilities””3. 网页爬虫 - python爬虫翻页问题,请问各位大神我这段代码怎样翻页,还有价格要登陆后才能看到,应该怎么解决4. nignx - docker内nginx 80端口被占用5. 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败!6. dockerfile - 我用docker build的时候出现下边问题 麻烦帮我看一下7. golang - 用IDE看docker源码时的小问题8. python在list相加 求助9. mac连接阿里云docker集群,已经卡了2天了,求问?10. node.js - node中MYSQL的异步问题
排行榜