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

【CSS】尺寸单位

news 2026/5/27 2:39:41

在 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

手把手教你为WCH CH582移植CherryUSB主机栈（基于RT-Thread，含中断优化）

基于RT-Thread的WCH CH582 USB主机协议栈深度移植指南在嵌入式开发领域&#xff0c;USB主机功能的实现往往意味着设备能够直接连接各类USB外设&#xff0c;从简单的键盘鼠标到复杂的存储设备。对于使用WCH CH582这类RISC-V内核MCU的开发者而言&#xff0c;原厂SDK提供的USB主机…...

编程新知 2026/5/26 2:17:28

论文创新点像挤牙膏？导师强推这几个AI论文平台

想写论文又快又好&#xff0c;关键是用对 AI 工具、走对流程——资深教授普遍推荐&#xff1a;千笔AI&#xff08;中文全流程首选&#xff09; 豆包学术版&#xff08;轻量高效&#xff09; DeepSeek 学术版&#xff08;理工 / 长文本&#xff09; Grammarly Academic&#xff…...

编程新知 2026/5/26 2:03:15

Vue3 图片标框功能实现方案

基于 Vue3 组合式 API 的图片标框&#xff08;画框、标注、选框&#xff09;完整实现&#xff0c;核心逻辑封装在 GetBoxes 组件里&#xff0c;复制就能用 一、功能说明 ✅ 在图片上鼠标拖拽画矩形框 ✅ 实时显示框坐标&#xff08;x, y, width, height&#xff09; ✅ 支持多…...

编程新知 2026/5/26 1:51:13

保姆级避坑指南：在Ubuntu 22.04上搞定ROS2 Humble、PX4与Gazebo的联合仿真（附Empy版本降级）

保姆级避坑指南&#xff1a;Ubuntu 22.04下ROS2 Humble与PX4联合仿真的21个关键陷阱当你在Ubuntu 22.04上第一次尝试搭建ROS2 Humble、PX4与Gazebo的联合仿真环境时&#xff0c;可能会遇到比预期更多的挑战。这不是一个简单的"复制粘贴命令就能完成"的任务——版本冲…...

编程新知 2026/5/25 23:12:51

多智能体谈判系统：Agent 如何通过博弈达成最优交易价格？

多智能体谈判系统&#xff1a;Agent 如何通过博弈达成最优交易价格&#xff1f;关键词 多智能体系统、自动谈判、博弈论、纳什均衡、帕累托最优、双边/多边谈判、强化学习谈判、动态定价 摘要 想象一个没有人类中介的世界&#xff1a;电商平台上的智能客服自动和批发商砍价、供…...

编程新知 2026/5/25 22:52:44

LangGraph状态机工程：构建复杂AI工作流的完整指南

传统RAG&#xff08;检索增强生成&#xff09;在处理简单的"单跳"问题时表现良好——“文章里提到了什么” “这个概念是什么意思”——但当问题涉及多个实体之间的关系、需要跨多个文档推理时&#xff0c;传统RAG就显得力不从心。GraphRAG&#xff08;Graph-based R…...

编程新知 2026/5/25 22:40:34

PCL 法向量夹角剔除错误匹配点对【2026最新版】

目录 一、 算法简介 1、主要函数 2、参考文献 二、 代码实现 三、 结果展示 四、 参考链接 博客长期更新，本文最新更新时间为：2026年5月24日。代码在PCL1.15.1中测试通过 一、 算法简介 在三维点云配准中，对应点（correspondence）的准确性直接决定了配准算法的精度和鲁棒性…...

编程新知 2026/5/25 22:24:26

Adobe-GenP 3.0：轻松激活Adobe全家桶的完整指南

Adobe-GenP 3.0&#xff1a;轻松激活Adobe全家桶的完整指南 【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP Adobe-GenP 3.0是一款专为Adobe Creative Cloud系列软件…...

编程新知 2026/5/25 20:57:14

用图神经网络做缺陷定位，准确率比传统方法高出30%

在现代软件工程的复杂迷宫中&#xff0c;缺陷定位始终是测试团队面临的核心挑战。想象这样一个场景&#xff1a;一个电商系统在特定压力条件下偶发订单丢失&#xff0c;日志中只留下泛泛的超时错误&#xff0c;问题可能深藏在上百个微服务的调用链、分布式事务的竞态条件或某个…...

编程新知 2026/5/25 20:30:07

别再手动维护接口文档了！用Spring Boot 3和Swagger 3实现代码与文档的自动同步

Spring Boot 3与Swagger 3&#xff1a;构建零维护成本的API文档工作流 每次接口变更都要手动更新文档&#xff1f;团队成员总是抱怨文档与实际接口不一致&#xff1f;在敏捷开发时代&#xff0c;传统文档维护方式已成为拖累工程效率的典型痛点。本文将揭示如何通过Spring Boot …...

编程新知 2026/5/25 20:07:55