【CSS】尺寸单位
在 CSS 中，常见的尺寸单位有以下几种：
像素（px）：
这是最常用的绝对单位。例如 width: 200px; 表示宽度为 200 像素。像素是固定的尺寸，不会随着屏幕分辨率或设备的不同而变化。
备注：
在不同的设备上，px 对应的物理尺寸并不固定。
对于电脑显示器，px 通常与屏幕的物理像素相对应，但这也会受到屏幕分辨率和缩放设置的影响。例如，在标准分辨率（通常为 96 DPI 左右）的显示器上，1 px 大约等于 1/96 英寸。
在移动设备上，情况会更加复杂。由于移动设备具有不同的屏幕密度（例如标准密度、高密度、超高密度等），同样的 px 值在不同密度的屏幕上显示的物理尺寸会有所不同。
DPI 表示在一英寸的长度内所包含的像素点数。通常，DPI 的值越高，图像的清晰度和细节就越丰富。
百分比（%）：
相对单位，基于父元素的尺寸。比如，如果父元素宽度为 500px，子元素设置 width: 50%; ，则子元素宽度为 250px。
em：
相对于父元素的字体大小。例如，如果父元素字体大小为 16px，子元素设置 font-size: 2em; ，则子元素字体大小为 32px。
rem：
相对于根元素（通常是 <html> 元素）的字体大小。这使得在整个页面中设置尺寸更加统一和可控。
vw 和 vh：
视口宽度（Viewport Width）和视口高度（Viewport Height）的单位。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。
例如，如果视口宽度为 1000px，设置 width: 50vw; ，则元素宽度为 500px。
补充点：
在 CSS 中，font-size: 50% 表示字体大小为父元素字体大小的 50%。
相关文章：
【CSS】尺寸单位
在 CSS 中，常见的尺寸单位有以下几种： 像素（px）： 这是最常用的绝对单位。例如 width: 200px; 表示宽度为 200 像素。像素是固定的尺寸，不会随着屏幕分辨率或设备的不同而变化。 备注： 在不同的…...
Agent(智能体)和 MetaGPT，一句话实现整个需求应用代码
前面 2 篇文章，我们使用文生文、文生图和文生音频三个大模型共同实现了图文并茂的儿童绘本故事和绘本故事音频需求： 第一篇 根据主题生成儿童绘本故事：GLM-4-Flash 大模型 API 免费了，手把手构建“儿童绘本”应用实战（…...
[数据结构] 哈希结构的哈希冲突解决哈希冲突
标题：[C] 哈希结构的哈希冲突 && 解决哈希冲突 水墨不写bug 目录 一、引言 1.哈希 2.哈希冲突 3.哈希函数 二、解决哈希冲突 1.闭散列 I，线性探测 II，二次探测 2.开散列 正文开始： 一、引言 哈希表是一种非常实用而…...
Wimdows使用Appium IOS自动化
启动appium服务器： appium -a 127.0.0.1 -p 4724 配置 { "platformName": "iOS", "appium:platformVersion": "16.5.1", "appium:deviceName": "(★StatTrak™) |午夜黑（崭新出厂&#…...
C语言深度剖析--不定期更新的第四弹
哈哈哈哈哈哈，今天一天两更！ void关键字 void关键字不能用来定义变量，原因是void本身就被编译器解释为空类型，编译器强制地不允许定义变量 定义变量的本质是：开辟空间 而void 作为空类型，理论上不应该开…...
【手撕数据结构】八大排序神功（上）
目录 冒泡排序【有点拉胯】动图演示:思路解析单趟算法图解代码详解性能优化复杂度分析 直接插入排序【还阔以】动图演示思路解析代码分析与讲解复杂度分析 希尔排序【有点强】动图演示思路讲解排序过程总览代码分析讲解复杂度分析 堆排序【太有石粒啦】动图演示堆的概念与结构向…...
【2024高教社杯全国大学生数学建模竞赛】B题模型建立求解
目录 1问题重述1.1问题背景1.2研究意义1.3具体问题 2总体分析3模型假设4符号说明（等四问全部更新完再写）5模型的建立与求解5.1问题一模型的建立与求解5.1.1问题的具体分析5.1.2模型的准备 目前B题第一问的详细求解过程以及对应论文部分已经完成ÿ…...
OpenHarmony鸿蒙开发（ Beta5.0）智能手表应用开发实践
样例简介 本项目是基于BearPi套件开发的智能儿童手表系统，该系统通过与GSM模块（型号：SIM808）的通信来实现通话和定位功能。 智能儿童手表系统可以通过云和手机建立连接，同步时间和获取天气信息，通过手机下…...
共享单车轨迹数据分析：以厦门市共享单车数据为例（一）
共享单车数据作为交通大数据的一个重要组成部分，在现代城市交通管理和规划中发挥着越来越重要的作用。通过对共享单车的数据进行深入分析，城市管理者和规划者能够获得大量有价值的洞察，这些洞察不仅有助于了解城市居民的日常出行模式…...
SprinBoot+Vue在线商城微信小程序的设计与实现
目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue3.6 uniapp代码 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平…...
4--SpringBootWeb-请求响应
目录 postman 1.简单参数 请求参数名与形参变量名一致时 请求参数名与形参变量名不一致时 2.实体参数 简单实体对象 复杂实体对象 3.数组集合参数 数组 集合 4.日期参数 5.JSON参数 6.路径参数 1 2 postman Postman值一款功能强大的网页调试与发送网页HTTP请求的…...
电脑点击关机之后，又自动重启开机了。根本就关不了？
前言 有个小姐姐说，她家的电脑好生奇怪：点击【关机】按钮之后，电脑提示【正在关机】，过了几秒，电脑又自动开机了…… 好家伙！也就是说关机和重启根本就没区别，电脑完全无法断电。 最后忍无可…...
强化网络安全：通过802.1X协议保障远程接入设备安全认证
随着远程办公和移动设备的普及，企业网络面临着前所未有的安全挑战。为了确保网络的安全性，同时提供无缝的用户体验，我们的 ASP 身份认证平台引入了先进的 802.1X 认证协议，确保只有经过认证的设备才能接入您的网络。本文档将详细介…...
链动2+1模式AI智能名片S2B2C商城小程序源码在社群商业价值构建中的应用探索
摘要：在数字经济浪潮的推动下，社群作为商业生态的核心组成部分，其商业价值正以前所未有的速度增长。本文深入探讨了如何通过“链动21模式AI智能名片S2B2C商城小程序源码”这一前沿技术工具，深度挖掘并优化社群的商业价值。通过详细…...
基于SpringBoot+Vue+MySQL的校园周边美食探索及分享平台
系统背景 在当今数字化时代，校园生活正日益融入信息技术的浪潮之中，学生们对于便捷、高效且富有趣味性的生活方式有着越来越高的追求。特别是在饮食文化方面，随着校园周边餐饮业态的日益丰富，学生们渴望一个能够集美食探索、分享与…...
“设计模式双剑合璧：工厂模式与策略模式在支付系统中的完美结合”
工厂模式（Factory Pattern）和策略模式（Strategy Pattern）都是常见的设计模式，但它们解决的问题和应用场景不同。下面是它们的区别： 1. 目的不同： 工厂模式（Factory Pattern…...
第二百一十九节 JPA 教程 - JPA 字段映射示例
JPA 教程 - JPA 字段映射示例 当将 Java bean 字段映射到数据库列时，我们可以选择标记字段，标记 getter 方法并标记两者。 标记字段 以下代码来自 Professor.java。 它显示如何将主键列标记为 Java bean 字段标识。 package cn.w3cschool.common; im…...
目标检测-YOLOv6
YOLOv6 YOLOv6 是 YOLO 系列的一个新版本，相比 YOLOv5 进行了大量的优化与改进。YOLOv6 的设计目标是在提高模型检测精度的同时，进一步优化速度和效率，特别是在推理速度和部署便捷性方面。它采用了更先进的网络架构和优化技巧，在…...
Java面向对象与多态
目录 Java面向对象与多态 多态介绍 形成多态的前提 多态下成员访问的特点 成员变量 成员方法 访问特点总结 多态对比普通继承 普通继承优点与缺点 多态优点与缺点 向上转型与向下转型 向下转型存在的问题 多态接口练习 Java面向对象与多态 多态介绍 在前面学习到…...
redis分布式锁和lua脚本
业务场景：多个线程对共同资源的访问：库存超卖/用户重复下单的原因 解决方法一：利用jvm内置锁，将非原子性操作变成原子性操作 Synchronized锁的是对象，对象必须是单例的。锁的是this,代表当前所在的类，这个…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
Go 并发编程基础：通道（Channel）的使用
在 Go 中，Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式，用于在多个 Goroutine 之间传递数据，从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
Mysql8 忘记密码重置，以及问题解决
1.使用免密登录 找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...