如何使用CSS绘制一个响应式的矩形
时间:2022-05-10
本文章向大家介绍如何使用CSS绘制一个响应式的矩形,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
如何使用CSS绘制一个响应式的矩形
背景:
最近因为需要用到绘制类似九宫格的需求,所以研究了一下响应式矩形的实现方案。
有如下几种方案:
- 使用js来设置元素的高度
- 使用vw单位
div {width: 50vw; height: 50vw;}
- 使用伪元素设置padding的方式来实现正方形(也就是本次使用的方式)
实现一个正方形
.square {
position: relative;
width: 100%;
&::before {
content: '';
display: block;
padding-top: 100%;
}
}
<div class="square"></div>
我们的做法就是使用伪元素的padding-top: 100%
来撑开元素本身。
因为pading-top
与padding-bottom
的百分比取值来自于元素的宽度,所以,设置值为100%
就实现了我们想要的功能。
实现更多的功能
想要实现更多比例的形状,其实就是修改::before
中的pading-top
或者padding-bottom
的值即可。
// 16: 9
.square::before {
padding-top: (9 / 16 * 100%);
}
// 4: 3
.square::before {
padding-top: (3 / 4 * 100%);
}
// 1: 2
.square::before {
padding-top: 200%;
}
当然,上边的实现都只是一个简单的矩形,如果你的矩形里边还要有一些内容的话,需要给元素添加以下几个属性:
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="square">
<div class="content">
Awesome
</div>
</div>
要注意的有以下几点:
- IE7-不支持
- 元素不要设置
height
以及overflow: hidden
参考资料
- Android网络编程(五)OkHttp用法全解析
- Android网络编程(一)HTTP协议原理
- Spring Cloud实战小贴士:Zuul统一异常处理(二)
- Android View体系(九)自定义View
- Android网络编程(二)HttpClient与HttpURLConnection
- Spring Batch入门篇
- Android网络编程(三)Volley用法全解析
- Android网络编程(八)源码解析OkHttp中篇[复用连接池]
- Mybatis SqlSessionTemplate 源码解析
- MapperScannerConfigurer处理过程源码分析
- Spring Boot中使用Actuator的/info端点输出Git版本信息
- Spring Batch:文件的批量读写Flatfile(XML,CSV,TXT)
- 项目本机部署过程中的若个问题
- Android View体系(十一)自定义ViewGroup
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 血的教训 | 一次订单号重复的事故差点被开除
- 60分钟看懂HMM的基本原理
- R语言确实会蛮耗费磁盘空间哦
- 很多时候你就是不知道如何提问
- seurat标准流程实例之2个10x样本的项目(GSE135927数据集)
- 使用 Jenkins 和 Ansible 实现 CI/CD
- 太刺激了,面试官让我手写跳表,而我用两种实现方式吊打了TA!
- 被 Google 选择的下一代数据面 Cilium 是什么 - 上手实践
- K8S 生态周报| 是时候从 k8s v1.16 升级了
- ESP8266(一)| 基于OneNet的温度采集显示系统
- 隐秘的 MySQL 类型转换
- 对Jenkinsfile语法说不,开源项目Jenkins Json Build挺你
- Volatile概述
- SparkStreaming和Kafka基于Direct Approach如何管理offset
- Spark在处理数据的时候,会将数据都加载到内存再做处理吗?