文章详情页
css3 - 没明白盒子的height随width的变化这段css是怎样实现的?
浏览:122日期:2023-07-02 14:33: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 关系。
回答2:padding-top: percent 是根据包含块宽度的比例来计算的
标签:
CSS
相关文章:
1. MySQL中无法修改字段名的疑问2. angular.js - angularjs的自定义过滤器如何给文字加颜色?3. docker镜像push报错4. angular.js - angular内容过长展开收起效果5. javascript - 如何让移动端网页的输入框固定在底部?6. 请教各位大佬,浏览器点 提交实例为什么没有反应7. python的前景到底有大?如果不考虑数据挖掘,机器学习这块?8. python - flask表单 如何把提交多行数据在服务端读取出来?9. 大家好,请问在python脚本中怎么用virtualenv激活指定的环境?10. 网页爬虫 - 用Python3的requests库模拟登陆Bilibili总是提示验证码错误怎么办?
排行榜
