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

【CSS】尺寸单位

news 2026/2/9 21:40:18

在 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

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2026/1/24 6:22:43

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

网络编程（UDP编程）

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

编程新知 2026/2/4 17:31:44

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2026/1/28 5:55:15

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/12/3 3:22:43

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57