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

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

news 2026/2/10 16:46:53

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主要提供了两种类型的操作&#xff1a;中间操作 和 终止操作。 中间操作 中间操作是返回一个新的流&#xff0c;并在返回的流中包含所有之前的操作结果。它们总是延迟计算&#xff0c;这意味着它们只会在终止操作时执行&#xff0c;这样可以最大限度地优化资源使用。…...

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

localforage-本地存储的优化方案

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

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

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

前言 小编研究生的研究方向是视觉SLAM&#xff0c;目前在自学&#xff0c;本篇文章为初学高翔老师课的第二次作业。 文章目录 前言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操作的框架&#xff0c;为了方便我们开发者使用&#xff0c;就定义了一个像水流一样&#xff0c;根据流的传输方向和读取单位&#xff0c;分为字节流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 不能一起使用&#xff01;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&#xff0c;写个中文的解读放在博客方便大家讨论 Title Picture Reference and prenotes paper: https://arxiv.org/abs/2307.07260 …...

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

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

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

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

iOS上架App Store的全攻略

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

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

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

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

编程日记 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 条件中&#xff0c;如何在 where in()中想传入参数&#xff0c;如果直接 where in(:seqList)&#xff0c;当传入单个值&#xff0c;seqList: ‘80’ 是没问题的&#xff0c;但是初入多个值时&#xff0c;seqList: ‘80,90’ &#xff0c;因缺少单引号&…...

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

Python：函数篇(每周练习)

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

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

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

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

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

ubuntu 设置和取消代理

背景 因为国内环境限制&#xff0c;在 linux 上安装一些软件的时候&#xff0c;因为限制就安装不了&#xff0c; 此时就可以通过设置代理的方式来规避这种问题&#xff0c;下面是具体的设置方式 步骤 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协议工作的&#xff0c;ICMP全称Internet Control Message Protocol&#xff0c;就是互联网控制报文协议。其实就是有点类似于古代行军打仗&#xff0c;哨探进行前方探明具体情况。 IMCP本身处于网络层&#xff0c;将报文封装在IP包里&#xff0c;…...

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

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/2/7 0:28:16

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2026/1/31 4:37:39

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2026/2/9 22:04:45