文章详情页
css3 - 没明白盒子的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 关系。
回答2:padding-top: percent 是根据包含块宽度的比例来计算的
标签:
CSS
相关文章:
1. javascript - webpack build出错后如何定位文件?2. java - springboot使用容器加载时,如何预先获取ClassLoader资源?3. html5 - 想要写一个H5页面,就微信打开来那种,然后几个输入框,把数据保存在我后台(java)的数据库里,实现思路是怎样的?4. boot2docker无法启动5. android - 百度地图加载大量marker点有没有比较好的解决方案6. 怎么在phpstudy中用phpexcel上传数据到MYSQL?7. 请在微信客户端打开链接怎么在PC端打开8. java - AtomicInteger等原子类,是不是不用volatile修饰,自带volatile属性?9. vue.js - 为什么我的vue项目上传到github不能预览?10. css3 邊框漸層 及 ios背景模糊?
排行榜