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

【CSS】尺寸单位

news 2025/7/12 19:31:36

在 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 中&#xff0c;常见的尺寸单位有以下几种&#xff1a; 像素&#xff08;px&#xff09;&#xff1a; 这是最常用的绝对单位。例如 width: 200px; 表示宽度为 200 像素。像素是固定的尺寸&#xff0c;不会随着屏幕分辨率或设备的不同而变化。 备注&#xff1a; 在不同的…...

编程日记 2024/9/8 3:00:55

Agent(智能体)和 MetaGPT，一句话实现整个需求应用代码

前面 2 篇文章&#xff0c;我们使用文生文、文生图和文生音频三个大模型共同实现了图文并茂的儿童绘本故事和绘本故事音频需求&#xff1a; 第一篇 根据主题生成儿童绘本故事&#xff1a;GLM-4-Flash 大模型 API 免费了&#xff0c;手把手构建“儿童绘本”应用实战&#xff08…...

编程日记 2024/9/8 2:59:54

[数据结构] 哈希结构的哈希冲突解决哈希冲突

标题&#xff1a;[C] 哈希结构的哈希冲突 && 解决哈希冲突 水墨不写bug 目录 一、引言 1.哈希 2.哈希冲突 3.哈希函数 二、解决哈希冲突 1.闭散列 I&#xff0c;线性探测 II&#xff0c;二次探测 2.开散列 正文开始&#xff1a; 一、引言 哈希表是一种非常实用而…...

编程日记 2024/9/8 2:58:52

Wimdows使用Appium IOS自动化

启动appium服务器&#xff1a; appium -a 127.0.0.1 -p 4724 配置 { "platformName": "iOS", "appium:platformVersion": "16.5.1", "appium:deviceName": "(★StatTrak™) |午夜黑&#xff08;崭新出厂&#…...

编程日记 2024/9/8 2:54:48

C语言深度剖析--不定期更新的第四弹

哈哈哈哈哈哈&#xff0c;今天一天两更&#xff01; void关键字 void关键字不能用来定义变量&#xff0c;原因是void本身就被编译器解释为空类型&#xff0c;编译器强制地不允许定义变量 定义变量的本质是&#xff1a;开辟空间 而void 作为空类型&#xff0c;理论上不应该开…...

编程日记 2024/9/8 2:53:46

【手撕数据结构】八大排序神功（上）

目录 冒泡排序【有点拉胯】动图演示:思路解析单趟算法图解代码详解性能优化复杂度分析 直接插入排序【还阔以】动图演示思路解析代码分析与讲解复杂度分析 希尔排序【有点强】动图演示思路讲解排序过程总览代码分析讲解复杂度分析 堆排序【太有石粒啦】动图演示堆的概念与结构向…...

编程日记 2024/9/8 2:52:46

【2024高教社杯全国大学生数学建模竞赛】B题模型建立求解

目录 1问题重述1.1问题背景1.2研究意义1.3具体问题 2总体分析3模型假设4符号说明&#xff08;等四问全部更新完再写&#xff09;5模型的建立与求解5.1问题一模型的建立与求解5.1.1问题的具体分析5.1.2模型的准备 目前B题第一问的详细求解过程以及对应论文部分已经完成&#xff…...

编程日记 2024/9/8 2:51:42

OpenHarmony鸿蒙开发（ Beta5.0）智能手表应用开发实践

样例简介 本项目是基于BearPi套件开发的智能儿童手表系统&#xff0c;该系统通过与GSM模块&#xff08;型号&#xff1a;SIM808&#xff09;的通信来实现通话和定位功能。 智能儿童手表系统可以通过云和手机建立连接&#xff0c;同步时间和获取天气信息&#xff0c;通过手机下…...

编程日记 2024/9/8 2:49:40

共享单车轨迹数据分析：以厦门市共享单车数据为例（一）

共享单车数据作为交通大数据的一个重要组成部分&#xff0c;在现代城市交通管理和规划中发挥着越来越重要的作用。通过对共享单车的数据进行深入分析&#xff0c;城市管理者和规划者能够获得大量有价值的洞察&#xff0c;这些洞察不仅有助于了解城市居民的日常出行模式&#xf…...

编程日记 2024/9/8 2:47:38

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 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平…...

编程日记 2024/9/8 2:45:36

4--SpringBootWeb-请求响应

目录 postman 1.简单参数 请求参数名与形参变量名一致时 请求参数名与形参变量名不一致时 2.实体参数 简单实体对象 复杂实体对象 3.数组集合参数 数组 集合 4.日期参数 5.JSON参数 6.路径参数 1 2 postman Postman值一款功能强大的网页调试与发送网页HTTP请求的…...

编程日记 2024/9/8 2:44:35

电脑点击关机之后，又自动重启开机了。根本就关不了？

前言 有个小姐姐说&#xff0c;她家的电脑好生奇怪&#xff1a;点击【关机】按钮之后&#xff0c;电脑提示【正在关机】&#xff0c;过了几秒&#xff0c;电脑又自动开机了…… 好家伙&#xff01;也就是说关机和重启根本就没区别&#xff0c;电脑完全无法断电。 最后忍无可…...

编程日记 2024/9/8 2:42:32

强化网络安全：通过802.1X协议保障远程接入设备安全认证

随着远程办公和移动设备的普及&#xff0c;企业网络面临着前所未有的安全挑战。为了确保网络的安全性&#xff0c;同时提供无缝的用户体验&#xff0c;我们的 ASP 身份认证平台引入了先进的 802.1X 认证协议&#xff0c;确保只有经过认证的设备才能接入您的网络。本文档将详细介…...

编程日记 2024/9/8 2:41:31

链动2+1模式AI智能名片S2B2C商城小程序源码在社群商业价值构建中的应用探索

摘要&#xff1a;在数字经济浪潮的推动下&#xff0c;社群作为商业生态的核心组成部分&#xff0c;其商业价值正以前所未有的速度增长。本文深入探讨了如何通过“链动21模式AI智能名片S2B2C商城小程序源码”这一前沿技术工具&#xff0c;深度挖掘并优化社群的商业价值。通过详细…...

编程日记 2024/9/8 2:39:29

基于SpringBoot+Vue+MySQL的校园周边美食探索及分享平台

系统背景 在当今数字化时代&#xff0c;校园生活正日益融入信息技术的浪潮之中&#xff0c;学生们对于便捷、高效且富有趣味性的生活方式有着越来越高的追求。特别是在饮食文化方面&#xff0c;随着校园周边餐饮业态的日益丰富&#xff0c;学生们渴望一个能够集美食探索、分享与…...

编程日记 2024/9/8 2:35:25

“设计模式双剑合璧：工厂模式与策略模式在支付系统中的完美结合”

工厂模式&#xff08;Factory Pattern&#xff09;和策略模式&#xff08;Strategy Pattern&#xff09;都是常见的设计模式&#xff0c;但它们解决的问题和应用场景不同。下面是它们的区别&#xff1a; 1. 目的不同&#xff1a; 工厂模式&#xff08;Factory Pattern&#xf…...

编程日记 2024/9/8 2:34:23

第二百一十九节 JPA 教程 - JPA 字段映射示例

JPA 教程 - JPA 字段映射示例 当将 Java bean 字段映射到数据库列时&#xff0c;我们可以选择标记字段&#xff0c;标记 getter 方法并标记两者。 标记字段 以下代码来自 Professor.java。 它显示如何将主键列标记为 Java bean 字段标识。 package cn.w3cschool.common; im…...

编程日记 2024/9/8 2:30:17

目标检测-YOLOv6

YOLOv6 YOLOv6 是 YOLO 系列的一个新版本&#xff0c;相比 YOLOv5 进行了大量的优化与改进。YOLOv6 的设计目标是在提高模型检测精度的同时&#xff0c;进一步优化速度和效率&#xff0c;特别是在推理速度和部署便捷性方面。它采用了更先进的网络架构和优化技巧&#xff0c;在…...

编程日记 2024/9/8 2:29:15

Java面向对象与多态

目录 Java面向对象与多态 多态介绍 形成多态的前提 多态下成员访问的特点 成员变量 成员方法 访问特点总结 多态对比普通继承 普通继承优点与缺点 多态优点与缺点 向上转型与向下转型 向下转型存在的问题 多态接口练习 Java面向对象与多态 多态介绍 在前面学习到…...

编程日记 2024/9/8 2:27:14

redis分布式锁和lua脚本

业务场景&#xff1a;多个线程对共同资源的访问&#xff1a;库存超卖/用户重复下单的原因 解决方法一&#xff1a;利用jvm内置锁&#xff0c;将非原子性操作变成原子性操作 Synchronized锁的是对象&#xff0c;对象必须是单例的。锁的是this,代表当前所在的类&#xff0c;这个…...

编程日记 2024/9/8 2:26:12

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/7/5 22:28:03

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/6/27 0:59:29

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/7/12 6:08:28

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/7/12 10:54:18

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2025/7/12 19:01:14

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2025/7/12 2:56:08

【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

编程新知 2025/7/5 18:01:05

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/7/11 15:44:23

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2025/7/10 2:38:43

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

编程新知 2025/7/11 15:47:33