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

【CSS】尺寸单位

news 2026/4/3 8:42:50

在 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

Mermaid在线编辑器终极指南：免费实时图表创作工具完全解析

Mermaid在线编辑器终极指南&#xff1a;免费实时图表创作工具完全解析 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-ed…...

编程新知 2026/4/3 8:29:13

告别printf调试：手把手教你用STM32F411的USART6重定向标准输入输出

STM32F411串口调试革命&#xff1a;USART6重定向实战指南 在嵌入式开发中&#xff0c;调试信息的输出是开发者最依赖的工具之一。传统调试方式往往需要复杂的硬件调试器或频繁烧录程序&#xff0c;效率低下且不够灵活。本文将带你探索一种高效、便捷的调试方案——通过STM32F4…...

编程新知 2026/4/3 8:27:04

视频超分实战：TDAN网络结构拆解与代码对照指南（附完整流程图）

视频超分实战&#xff1a;TDAN网络结构拆解与代码对照指南&#xff08;附完整流程图&#xff09; 在视频超分辨率领域&#xff0c;帧间对齐质量直接决定了最终重建效果的上限。传统光流法虽然成熟&#xff0c;但依赖额外网络且误差累积问题显著。TDAN&#xff08;Temporally D…...

编程新知 2026/4/3 8:23:04

QMCDecode：让QQ音乐加密文件重获自由的macOS工具

QMCDecode&#xff1a;让QQ音乐加密文件重获自由的macOS工具 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff0c;默认转换结…...

编程新知 2026/4/3 8:02:46

北大“炒股挣钱”课为什么被学生称为“最硬核的风险教育”？它真正教的不是怎么赚钱，而是普通人如何在股市里活下来

一位北大非金融专业的学生上完这堂课后&#xff0c;感慨&#xff1a;“这可能是北大最实用的一门金融课&#xff0c;却让我更坚定地远离个股投机。” 课名叫《炒股挣钱》&#xff0c;可通篇下来&#xff0c;老师赵克常反复强调的却是&#xff1a;“我真正想讲的不是如何暴富&am…...

编程新知 2026/4/3 7:42:38

OpenClaw定时任务技巧：让Kimi-VL-A3B-Thinking自动处理每日图文简报

OpenClaw定时任务技巧&#xff1a;让Kimi-VL-A3B-Thinking自动处理每日图文简报 1. 为什么需要自动化图文简报 每天早上打开电脑&#xff0c;我的第一件事就是浏览行业资讯、技术博客和社交媒体&#xff0c;把有价值的内容整理成简报。这个过程通常要花费30-45分钟&#xff0…...

编程新知 2026/4/3 7:42:38

Phi-4-mini-reasoning保姆级教学：Web服务健康检查失败的5类根因与对策

Phi-4-mini-reasoning保姆级教学&#xff1a;Web服务健康检查失败的5类根因与对策 1. 问题背景与模型介绍 Phi-4-mini-reasoning 是一款专注于推理任务的文本生成模型&#xff0c;特别擅长处理数学题、逻辑题、多步分析和简洁结论输出。与通用聊天模型不同&#xff0c;它采用…...

编程新知 2026/4/3 7:40:37

全网SEO推广如何提升网站流量

全网SEO推广如何提升网站流量 在当今互联网时代&#xff0c;网站流量的提升对于任何企业或个人来说都是至关重要的。网站流量直接影响到网站的曝光度、销售转化和品牌知名度。全网SEO推广作为一种有效的提升网站流量的方法&#xff0c;越来越受到关注。全网SEO推广究竟是如何提…...

编程新知 2026/4/3 6:21:34

Phi-3-mini-4k-instruct-gguf代码实例：curl健康检查与supervisor服务管理实操

Phi-3-mini-4k-instruct-gguf代码实例&#xff1a;curl健康检查与supervisor服务管理实操 1. 模型简介与部署准备 Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本&#xff0c;特别适合问答、文本改写、摘要整理和简短创作等场景。这个经过优化的…...

编程新知 2026/4/3 5:48:56

Phi-4-mini-reasoning应用场景：科研助理——论文公式推导验证与符号计算辅助

Phi-4-mini-reasoning应用场景&#xff1a;科研助理——论文公式推导验证与符号计算辅助 1. 模型概述 Phi-4-mini-reasoning是一款由微软开发的轻量级开源模型&#xff0c;专注于数学推理和逻辑推导任务。这个3.8B参数的模型虽然体积小巧&#xff0c;但在强逻辑任务上表现出色…...

编程新知 2026/4/3 4:55:56