【CSS】使用 CSS 实现一个宽高自适应的正方形
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…...
Java Stream流详解
Stream API主要提供了两种类型的操作：中间操作 和 终止操作。 中间操作 中间操作是返回一个新的流，并在返回的流中包含所有之前的操作结果。它们总是延迟计算，这意味着它们只会在终止操作时执行，这样可以最大限度地优化资源使用。…...
localforage-本地存储的优化方案
前言 前端本地化存储算是一个老生常谈的话题了，我们对于 cookies、Web Storage（sessionStorage、localStorage）的使用已经非常熟悉，在面试与实际操作之中也会经常遇到相关的问题，但这些本地化存储的方式还存在一些缺陷…...
自学SLAM（4）《第二讲：三维物体刚体运动》作业
前言 小编研究生的研究方向是视觉SLAM，目前在自学，本篇文章为初学高翔老师课的第二次作业。 文章目录 前言1.熟悉 Eigen 矩阵运算2.几何运算练习3.旋转的表达4.罗德里格斯公式的证明5.四元数运算性质的验证6.熟悉 C11 1.熟悉 Eigen 矩阵运算 设线性⽅程 …...
)
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 什么是适配器 适配器是一种…...
Java-IO流
文章目录 Java-IO流文件字节流文件字符流File类缓冲流转换流打印流数据流对象流 Java-IO流 JDK提供了一套用于IO操作的框架，为了方便我们开发者使用，就定义了一个像水流一样，根据流的传输方向和读取单位，分为字节流InputStream和…...
04、Python 爬取免费小说思路
目录 Python 爬取免费小说思路代码解析爬取东西基本的四行代码：user-agent安装模块从 bs4 导入 BeautifulSoup ，查询某个标签开头的数据筛选遍历获取小说的章节名称每章小说的链接获取请求网址的响应获取小说的内容筛选内容整理内容爬取下载到指定文件夹完整代码：Python 爬取…...
【前端vue面试】vue2
目录 computed和watchv-show和v-ifkey 的重要性v-for 和 v-if 不能一起使用！click的event修饰符事件修饰符表单项修饰符 父子组件通讯生命周期父子组件生命周期顺序 $nextTickslot 插槽动态组件异步组件keep-alivemixin computed和watch computed 有缓存࿰…...
自然语言处理---Transformer机制详解之GPT模型介绍
1 GPT介绍 GPT是OpenAI公司提出的一种语言预训练模型.OpenAI在论文<< Improving Language Understanding by Generative Pre-Training >>中提出GPT模型.OpenAI后续又在论文<< Language Models are Unsupervised Multitask Learners >>中提出GPT2模型.…...
【论文阅读】点云地图动态障碍物去除基准 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年传媒行业中期策略 AIGC从三个不同层次为内容产业赋能
基本面和新题材共振，推动传媒互联网行情上涨 AIGC 概念带动，传媒板块领涨 A 股 2023 年第一个交易日（1 月 3 日）至 6 月 2 日，申万传媒指数区间涨幅高达 48.38%，同时期沪深 300 跌幅为 0.25%，…...
iOS上架App Store的全攻略
iOS上架App Store的全攻略 第一步：申请开发者账号 在开始将应用上架到App Store之前，你需要申请一个开发者账号。 1.1 打开苹果开发者中心网站：https://developer.apple.com/ 1.2 使用Apple ID和密码登录（如果没有账号则需要注册…...
操作系统——多个类别产品的生产者-消费者问题（王道视频p33、课本ch6）
1.问题解剖——得到的是 1个“互斥信号量” 3个“同步信号量” 其中特别注意，对于盘子plate可以清空的设计4个对象的，但是只用这一个同步信号量就可以实现 2.代码—— 3.由于这里的同步信号量的初值都是1，所以，即使不设置互斥信…...
uniapp(uncloud) 使用生态开发接口详情5(云公共模块)
1.uniCloud官网 云对象中云公共模块: 网站: https://uniapp.dcloud.net.cn/uniCloud/cf-common.html // 官网介绍 cloudfunctions├─common // 云函数公用模块目录| └─hello-common // 云函数公用模块| ├─package.json| └─index.js // 公用模块代码࿰…...
Oracle数据中如何在 where in() 条件传参
一、问题场景描述 在sql 条件中，如何在 where in()中想传入参数，如果直接 where in(:seqList)，当传入单个值，seqList: ‘80’ 是没问题的，但是初入多个值时，seqList: ‘80,90’ ，因缺少单引号&…...
Python：函数篇(每周练习)
编程题： Python第四章作业（初级） (educoder.net) 题一：无参无返回值函数 def print_hi_human(): # 函数名用小写字母print("人类，你好！")if __name__ __main__:print_hi_human() 题二&#…...
为Element Plus封装业务组件FormDialog，将所有需要填写表单的弹窗组件封装，方便快速配置
使用FormDialog组件能够对表单弹窗进行快速配置，不用每次单独写弹窗表单业务组件，快速实现表单弹窗业务功能。 调用页面demo.vue validateRules.js引用 <script setup lang"ts"> import FormDialog from /components/FormDialog/index…...
ubuntu 设置和取消代理
背景 因为国内环境限制，在 linux 上安装一些软件的时候，因为限制就安装不了， 此时就可以通过设置代理的方式来规避这种问题，下面是具体的设置方式 步骤 sudo vim /etc/profile.d/proxy.sh添加以下内容到文件中 export http_pro…...
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测试 三、…...
【网络协议】聊聊ICMP与ping是如何测试网络联通性
ICMP协议格式 ping是基于iCMP协议工作的，ICMP全称Internet Control Message Protocol，就是互联网控制报文协议。其实就是有点类似于古代行军打仗，哨探进行前方探明具体情况。 IMCP本身处于网络层，将报文封装在IP包里，…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来
一、破局：PCB行业的时代之问 在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...
cf2117E
原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置 或，也可以在执行上述操作前执行一次删除任意 和 。求…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...