当前位置：首页 > news >正文

【CSS】使用 CSS 实现一个宽高自适应的正方形

news 2025/6/22 11:52:38

1. 利用 padding 或 vw

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>.square {width: 25vw;padding-top: 25vw;/* height: 25vw; 也可以*/background: pink;/* 避免被内容撑开多余的高度 */height: 0;}</style>
</head><body><div class="square"></div>
</body></html>

vw单位设置了正⽅形的宽度为屏幕宽度的 1/4（25%），同时利⽤
padding-top （当然 padding-bottom 也可以）撑开盒子，使正⽅形的⾼度也为屏幕宽度的 1/4。或者直接设为父级的百分比宽度也可以。

注：vmin 是相对当前视⼝宽⾼中较小的⼀个的百分⽐单位，同理 vmax 是相对当前视⼝宽⾼中较大的⼀个的百分⽐单位。

2. 利用伪元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>.square {width: 30%;background: pink;}.square::before {content: '';display: block;padding-top: 100%;}</style>
</head><body><div class="square"></div>
</body></html>

若使⽤垂直⽅向上的 padding 撑开⽗元素，则不需要触发 BFC。

.square {width: 30%;overflow: hidden;background: pink;
}
.square::before {content: '';display: block;margin-top: 100%;
}

由于容器与伪元素在垂直⽅向发⽣了外边距折叠，所以我们想象中的撑开⽗元素⾼度并没有出现。⽽应对的⽅法是在⽗元素上触发 BFC。

2.1 如果有内容的话

当元素内部添加内容时⾼度出现溢出，可以将内容放到独⽴的内容块中，利⽤绝对定位消除空间占⽤。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>.square {width: 30%;background: pink;position: relative;}.square::before {content: '';display: block;padding-top: 100%;}.square .container {position: absolute;width: 100%;height: 100%;}</style>
</head><body><div class="square"><div class="container">内容</div></div>
</body></html>

在这里插入图片描述
但如果是 margin-top，则：

在这里插入图片描述
换成 margin 和 scroll：

【CSS】使用 CSS 实现一个宽高自适应的正方形

1. 利用 padding 或 vw <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><metaname"viewport"content"widthdevice-width, initial-scale1.0"><title>Document</title><st…...

编程日记 2023/10/23 3:28:15

Java Stream流详解

Stream API主要提供了两种类型的操作：中间操作和终止操作。中间操作中间操作是返回一个新的流，并在返回的流中包含所有之前的操作结果。它们总是延迟计算，这意味着它们只会在终止操作时执行，这样可以最大限度地优化资源使用。…...

编程日记 2023/10/23 3:26:12

localforage-本地存储的优化方案

前言前端本地化存储算是一个老生常谈的话题了，我们对于 cookies、Web Storage（sessionStorage、localStorage）的使用已经非常熟悉，在面试与实际操作之中也会经常遇到相关的问题，但这些本地化存储的方式还存在一些缺陷…...

编程日记 2023/10/23 3:25:11

自学SLAM（4）《第二讲：三维物体刚体运动》作业

前言小编研究生的研究方向是视觉SLAM，目前在自学，本篇文章为初学高翔老师课的第二次作业。文章目录前言1.熟悉 Eigen 矩阵运算2.几何运算练习3.旋转的表达4.罗德里格斯公式的证明5.四元数运算性质的验证6.熟悉 C11 1.熟悉 Eigen 矩阵运算设线性⽅程 …...

编程日记 2023/10/23 3:24:11

C++:容量适配器(栈、队列、优先级队列)

目录 1.容器适配器 4.1 什么是适配器 4.2 STL标准库中的容器适配器 2.stack的使用 2.1 STL库中对stack的实现 3.queue的使用 3.1 STL库中对queue的实现 4.priority_queue使用 4.1模拟实现 priority_queue 5.deque 的简介 1.容器适配器 4.1 什么是适配器适配器是一种…...

编程日记 2023/10/23 3:23:09

Java-IO流

文章目录 Java-IO流文件字节流文件字符流File类缓冲流转换流打印流数据流对象流 Java-IO流 JDK提供了一套用于IO操作的框架，为了方便我们开发者使用，就定义了一个像水流一样，根据流的传输方向和读取单位，分为字节流InputStream和…...

编程日记 2023/10/23 3:22:08

04、Python 爬取免费小说思路

目录 Python 爬取免费小说思路代码解析爬取东西基本的四行代码：user-agent安装模块从 bs4 导入 BeautifulSoup ，查询某个标签开头的数据筛选遍历获取小说的章节名称每章小说的链接获取请求网址的响应获取小说的内容筛选内容整理内容爬取下载到指定文件夹完整代码：Python 爬取…...

编程日记 2023/10/23 3:21:08

【前端vue面试】vue2

目录 computed和watchv-show和v-ifkey 的重要性v-for 和 v-if 不能一起使用！click的event修饰符事件修饰符表单项修饰符父子组件通讯生命周期父子组件生命周期顺序 $nextTickslot 插槽动态组件异步组件keep-alivemixin computed和watch computed 有缓存&#xff0…...

编程日记 2023/10/23 3:20:06

自然语言处理---Transformer机制详解之GPT模型介绍

1 GPT介绍 GPT是OpenAI公司提出的一种语言预训练模型.OpenAI在论文<< Improving Language Understanding by Generative Pre-Training >>中提出GPT模型.OpenAI后续又在论文<< Language Models are Unsupervised Multitask Learners >>中提出GPT2模型.…...

编程日记 2023/10/23 3:19:05

【论文阅读】点云地图动态障碍物去除基准 A Dynamic Points Removal Benchmark in Point Cloud Maps

【论文阅读】点云地图动态障碍物去除基准 A Dynamic Points Removal Benchmark in Point Cloud Maps 终于一次轮到了讲自己的paper了 hahaha，写个中文的解读放在博客方便大家讨论 Title Picture Reference and prenotes paper: https://arxiv.org/abs/2307.07260 …...

编程日记 2023/10/23 3:18:04

2023年传媒行业中期策略 AIGC从三个不同层次为内容产业赋能

基本面和新题材共振，推动传媒互联网行情上涨 AIGC 概念带动，传媒板块领涨 A 股 2023 年第一个交易日（1 月 3 日）至 6 月 2 日，申万传媒指数区间涨幅高达 48.38%，同时期沪深 300 跌幅为 0.25%，…...

编程日记 2023/10/23 3:17:03

iOS上架App Store的全攻略

iOS上架App Store的全攻略第一步：申请开发者账号在开始将应用上架到App Store之前，你需要申请一个开发者账号。 1.1 打开苹果开发者中心网站：https://developer.apple.com/ 1.2 使用Apple ID和密码登录（如果没有账号则需要注册…...

编程日记 2023/10/23 3:16:02

操作系统——多个类别产品的生产者-消费者问题（王道视频p33、课本ch6）

1.问题解剖——得到的是 1个“互斥信号量” 3个“同步信号量” 其中特别注意，对于盘子plate可以清空的设计4个对象的，但是只用这一个同步信号量就可以实现 2.代码—— 3.由于这里的同步信号量的初值都是1，所以，即使不设置互斥信…...

编程日记 2023/10/23 3:15:00

uniapp(uncloud) 使用生态开发接口详情5(云公共模块)

1.uniCloud官网云对象中云公共模块: 网站: https://uniapp.dcloud.net.cn/uniCloud/cf-common.html // 官网介绍 cloudfunctions├─common // 云函数公用模块目录| └─hello-common // 云函数公用模块| ├─package.json| └─index.js // 公用模块代码&#xff0…...

编程日记 2023/10/23 3:13:59

Oracle数据中如何在 where in() 条件传参

一、问题场景描述在sql 条件中，如何在 where in()中想传入参数，如果直接 where in(:seqList)，当传入单个值，seqList: ‘80’ 是没问题的，但是初入多个值时，seqList: ‘80,90’ ，因缺少单引号&…...

编程日记 2023/10/23 3:12:58

Python：函数篇(每周练习)

编程题： Python第四章作业（初级） (educoder.net) 题一：无参无返回值函数 def print_hi_human(): # 函数名用小写字母print("人类，你好！")if __name__ __main__:print_hi_human() 题二&#…...

编程日记 2023/10/23 3:11:57

为Element Plus封装业务组件FormDialog，将所有需要填写表单的弹窗组件封装，方便快速配置

使用FormDialog组件能够对表单弹窗进行快速配置，不用每次单独写弹窗表单业务组件，快速实现表单弹窗业务功能。调用页面demo.vue validateRules.js引用 <script setup lang"ts"> import FormDialog from /components/FormDialog/index…...

编程日记 2023/10/23 3:10:55

ubuntu 设置和取消代理

背景因为国内环境限制，在 linux 上安装一些软件的时候，因为限制就安装不了， 此时就可以通过设置代理的方式来规避这种问题，下面是具体的设置方式步骤 sudo vim /etc/profile.d/proxy.sh添加以下内容到文件中 export http_pro…...

编程日记 2023/10/23 3:09:55

YOLOv7-PTQ量化部署

目录前言一、PTQ量化浅析二、YOLOv7模型训练1. 项目的克隆和必要的环境依赖1.1 项目的克隆1.2 项目代码结构整体介绍1.3 环境安装 2. 数据集和预训练权重的准备2.1 数据集2.2 预训练权重准备 3. 训练模型3.1 修改模型配置文件3.2 修改数据配置文件3.3 训练模型3.4 mAP测试三、…...

编程日记 2023/10/23 3:08:54

【网络协议】聊聊ICMP与ping是如何测试网络联通性

ICMP协议格式 ping是基于iCMP协议工作的，ICMP全称Internet Control Message Protocol，就是互联网控制报文协议。其实就是有点类似于古代行军打仗，哨探进行前方探明具体情况。 IMCP本身处于网络层，将报文封装在IP包里，…...

编程日记 2023/10/23 3:07:52

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/6/18 0:49:30

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/6/21 15:43:11

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/6/20 15:12:45

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型项目截图项目简介社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...

编程新知 2025/6/22 4:32:00

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。二、核心实现方案 1. 环境配置 （1）使用React Native…...

编程新知 2025/6/21 12:17:37

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/6/18 20:49:43

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据案例一对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...

编程新知 2025/6/17 0:39:54

Axios请求超时重发机制

Axios 超时重新请求实现方案在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/6/21 10:09:08

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/6/21 22:11:13

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/6/22 8:58:02

1. 利用 padding 或 vw

2. 利用伪元素

2.1 如果有内容的话

相关文章：