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

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

news 2026/4/18 0:51:52

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

如何快速实现Windows AirPlay 2接收器：终极免费解决方案

如何快速实现Windows AirPlay 2接收器&#xff1a;终极免费解决方案 【免费下载链接】airplay2-win Airplay2 for windows 项目地址: https://gitcode.com/gh_mirrors/ai/airplay2-win 还在为Windows电脑无法接收iPhone、iPad和Mac投屏而烦恼吗&#xff1f;airplay2-win…...

编程新知 2026/4/18 0:28:03

C++ 从 0 入门（一）｜C++ 基础语法、命名空间、引用、IO 输入输出

大家好&#xff0c;我是网域小星球。 C 兼容 C 语言全部语法&#xff0c;同时扩展了面向对象、引用、泛型、内存管理等高级特性&#xff0c;也是 C 开发岗面试的核心考察内容。本篇从零过渡 C 基础&#xff0c;聚焦语法差异、高频考点、笔试题&#xff0c;所有代码 VS2022 直接…...

编程新知 2026/4/18 0:21:49

从向量旋转到切线求解：一种高效的几何算法实现

1. 为什么我们需要更优雅的切线求解方法 在几何计算中&#xff0c;求圆外一点到圆的切线切点坐标是一个经典问题。传统解法通常采用联立方程法&#xff1a;先建立圆的方程和切线方程&#xff0c;然后解这个方程组。这种方法在纸笔计算时还算可行&#xff0c;但一旦要编写代码实…...

编程新知 2026/4/18 0:15:29

STM32G0系列读保护功能实战：从代码实现到问题解决

1. STM32G0读保护功能入门指南 第一次接触STM32G0的读保护功能时&#xff0c;我也是一头雾水。这个功能就像给你的代码上了一把锁&#xff0c;防止别人通过调试接口读取芯片内部的内容。想象一下&#xff0c;你辛苦开发的算法被别人轻易复制&#xff0c;那感觉就像自家保险箱被…...

编程新知 2026/4/17 23:46:19

YOLO免配置训练包+智能标注工具：支持YOLOv5/v8/v10/v11一键训练，含易语言调用示例

温馨提示&#xff1a;文末有联系方式免环境部署&#xff0c;真正开箱即用 无需安装Python、CUDA、PyTorch等复杂依赖&#xff0c;本YOLO训练套件已封装完整运行时环境&#xff0c;Windows系统双击即可启动&#xff0c;彻底解决环境冲突与配置报错问。全版本YOLO模型支持&#x…...

编程新知 2026/4/17 23:20:05

别再死记命令了！用eNSP华为模拟器搞定网络配置的5个高效技巧

别再死记命令了&#xff01;用eNSP华为模拟器搞定网络配置的5个高效技巧 第一次打开eNSP时&#xff0c;很多人会本能地打开记事本&#xff0c;准备记录那些冗长的命令行——就像背单词表一样。但三个月后&#xff0c;这些笔记往往变成了电脑里再也用不上的数字废纸。真正高效的…...

编程新知 2026/4/17 22:51:07

【2026奇点智能技术大会权威解码】：AI原生数据结构生成的5大范式跃迁与工程落地路径

第一章&#xff1a;2026奇点智能技术大会&#xff1a;AI数据结构生成 2026奇点智能技术大会(https://ml-summit.org) 核心突破&#xff1a;语义驱动的数据结构合成引擎 本届大会首次公开发布StructGen v3.1——一个基于多模态推理与形式化约束求解的AI数据结构生成框架。它不…...

编程新知 2026/4/17 22:30:51

2025届最火的AI写作神器解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 处于学术写作这个范畴里&#xff0c;恰当地运用论文AI工具可明显提高写作的效率跟质量。当前…...

编程新知 2026/4/17 22:10:25

大理石平台的精度维护：日常保养与误差校正方法

好的&#xff0c;我们来详细说明大理石平台的精度维护方法&#xff0c;包括日常保养与误差校正两部分。大理石平台&#xff08;或称花岗石平台&#xff09;因其稳定性好、精度高&#xff0c;常作为精密测量和加工的基准平面。要维持其精度&#xff0c;需做好日常保养并掌握误差…...

编程新知 2026/4/17 21:52:11

从零部署MinerU文档解析服务：GPU加速、防OOM配置与Docker打包全攻略

从零部署MinerU文档解析服务&#xff1a;GPU加速、防OOM配置与Docker打包全攻略 在AI模型服务化的浪潮中&#xff0c;文档解析作为企业数字化转型的关键环节&#xff0c;正经历着从实验室Demo到生产级服务的蜕变。MinerU-OpenAPI以其多模态处理能力和工业级稳定性&#xff0c;成…...

编程新知 2026/4/17 21:25:41