【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包里，…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
数据库分批入库
今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...
排序算法总结（C++）
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...