文章详情页
css3 - 没明白盒子的height随width的变化这段css是怎样实现的?
浏览:123日期: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. angular.js - angular内容过长展开收起效果2. angular.js - angularjs的自定义过滤器如何给文字加颜色?3. javascript - 如何让移动端网页的输入框固定在底部?4. docker镜像push报错5. MySQL中无法修改字段名的疑问6. javascript - 微信小程序封装定位问题(封装异步并可能多次请求)7. python的前景到底有大?如果不考虑数据挖掘,机器学习这块?8. 网页爬虫 - 用Python3的requests库模拟登陆Bilibili总是提示验证码错误怎么办?9. android - QQ物联,视频通话10. 请教各位大佬,浏览器点 提交实例为什么没有反应
排行榜
