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

px、em 和 rem 的区别：深入理解 CSS 中的单位

news 来源：原创 2025/6/10 6:27:49

文章目录

- 前言
- 一、`px` - 像素 (Pixel)
- 二、`em` - 相对父元素字体大小 (Ems)
- 三、`rem` - 相对于根元素字体大小 (Root Ems)
- 四、综合比较
- 结语

前言

在CSS中，px、em和rem是三种用于定义尺寸（如宽度、高度、边距、填充等）的长度单位。它们各自有不同的特性，适用于不同的场景。接下来我们将更详细地探讨这三种单位。

一、`px` - 像素 (Pixel)

定义：
- px代表像素，是一个绝对单位，它的大小固定且与设备无关，通常表示屏幕上一个点的大小。
计算方式：
- 在大多数现代显示器上，1px等于屏幕上的一个物理像素点。然而，在高分辨率显示器（例如Retina显示屏）上，1px可能对应多个物理像素以保持视觉清晰度。
适用场景：
- 当你需要精确控制元素的尺寸或位置时，比如设计图标或需要对齐的图形元素。
- 对于需要保证一致性的布局部分，如导航栏的高度或按钮的尺寸。
使用方法：
- 直接为属性赋值，无需考虑上下文环境的影响。
```
/* 设置一个div的宽度为200像素 */
div {width: 200px;
}
```
注意事项：
- 使用px可能会限制页面的响应性和可访问性，因为用户无法通过浏览器设置轻松调整文本大小。
- 在移动设备上，固定的px值可能不适合所有屏幕尺寸，影响用户体验。

二、`em` - 相对父元素字体大小 (Ems)

定义：
- em是一种相对单位，其值基于当前元素的字体大小。如果未特别指定，则默认为继承自父元素的字体大小。1em等于当前元素的字体大小。
计算方式：
- 如果一个元素没有明确指定字体大小，它会从最近的非静态定位的祖先元素继承字体大小。因此，em的值依赖于上下文环境中的字体大小设定。
适用场景：
- 适合创建可以随着父元素变化而自动调整的灵活布局。
- 可以用作字体大小的单位，使整个文档树能够根据根元素的比例缩放。

使用方法：

em的值是相对于直接父元素的字体大小。对于嵌套的元素，子元素的em值会累积，即子元素的尺寸是基于父元素的em值计算的。

/* 如果html的字体大小是16px，默认情况下，下面的p标签将有32px的字体大小 */
p {font-size: 2em; /* 2 * 父元素的字体大小 */
}/* 子元素的em值会累积 */
.parent {font-size: 2em;
}
.parent .child {font-size: 1.5em; /* 1.5 * parent的字体大小 = 3em = 48px */
}

注意事项：
- 因为em是相对于父元素的字体大小，所以在嵌套结构中，每个子元素的em值都是基于其直接父元素的字体大小，这可能导致尺寸累积效应，增加计算复杂度。
- 如果不注意，这种累积效应可能会导致难以预料的结果，特别是在深层次嵌套的情况下。

三、`rem` - 相对于根元素字体大小 (Root Ems)

定义：
- rem也是一种相对单位，但它不是相对于父元素，而是相对于HTML文档的根元素（即<html>标签）的字体大小。这意味着无论元素位于DOM树的哪个位置，rem的值都是一致的。
计算方式：
- 1rem等于HTML根元素的字体大小。如果未指定，则默认为浏览器的默认字体大小，通常是16px。
使用场景：
- 创建完全独立于任何特定父元素的响应式设计，确保所有元素按照相同的基准进行缩放。
- 简化了复杂的嵌套结构中的尺寸管理问题，因为不需要考虑父元素的影响。

使用方法：

rem的值是相对于根元素的字体大小。你可以通过改变根元素的字体大小来统一调整整个页面的尺寸。

/* 设定根元素的字体大小 */
html {font-size: 62.5%; /* 默认16px -> 10px */
}/* 根据根元素字体大小设定其他元素 */
body {font-size: 1.4rem; /* 1.4 * 10px = 14px */
}h1 {font-size: 2.4rem; /* 2.4 * 10px = 24px */
}/* 修改根元素字体大小会影响所有rem单位 */
@media (min-width: 768px) {html {font-size: 75%; /* 新的1rem = 12px */}
}

注意事项：
- 要想让rem生效，最好是在全局样式表中设定根元素的字体大小。例如，可以通过html { font-size: 62.5%; }将默认字体大小设置为10px，使得后续的rem计算更加直观。
  在一些旧版本的浏览器中可能存在兼容性问题，但目前主流浏览器都已经支持rem。

四、综合比较

特性/单位	`px`	`em`	`rem`
类型	绝对单位	相对单位	相对单位
参考点	屏幕像素	父元素字体大小	根元素字体大小
适用场景	需要精确控制的元素	深层次嵌套结构	全局响应式设计
优点	精确、易于预测	灵活、适应性强	易维护、一致性好
缺点	不利于响应式设计	计算复杂、易出错	可能需要额外配置

结语

选择哪种单位取决于你的具体需求以及你希望给用户提供的体验。对于那些追求像素级精度的设计师来说，px可能是最好的选择；而对于想要创建更加灵活和响应式的网页，em和rem则是更好的选项。特别是rem，由于其简化了尺寸管理，并且提供了良好的可访问性支持，因此在现代Web开发中越来越受欢迎。

px、em 和 rem 的区别：深入理解 CSS 中的单位

文章目录前言一、px - 像素 (Pixel)二、em - 相对父元素字体大小 (Ems)三、rem - 相对于根元素字体大小 (Root Ems)四、综合比较结语前言在CSS中，px、em和rem是三种用于定义尺寸（如宽度、高度、边距、填充等）的长度单位。它们各自有不同的…...

编程日记 2025/6/3 21:32:11

vue 表格内点编辑，单元格不切换成输入框问题分析

vue 表格渲染时，我点击编辑时，想直接在单元格上面进行编辑。效果如下，正常是文本效果，点击编辑时，出现输入框其实实现起来，逻辑很简单，但是中间我却出现了一个问题，效果始终出不…...

编程日记 2025/6/3 10:23:06

MATLAB学习笔记-table

1.在table中叠加table table 的每一列具有固定的数据类型。如果要让表的所有单元格都可以任意填充，就得让每一列都是 cell 类型，这样表中每个单元格都是“一个元胞”。创建时可以先构造一个空 cell 数组（大小为行数列数）&#x…...

编程日记 2025/6/4 16:26:57

使用 selenium-webdriver 开发 Web 自动 UI 测试程序

优缺点优点有时候有可能一个改动导致其他的地方的功能失去效果，这样使用 Web 自动 UI 测试程序可以快速的检查并定位问题，节省大量的人工验证时间缺点增加了维护成本，如果功能更新过快或者技术更新过快，维护成本也会随之提高…...

编程日记 2025/6/3 21:34:33

ffmpeg硬件编码

使用FFmpeg进行硬件编码可以显著提高视频编码的性能，尤其是在处理高分辨率视频时。硬件编码利用GPU或其他专用硬件（如Intel QSV、NVIDIA NVENC、AMD AMF等）来加速编码过程。以下是使用FFmpeg进行硬件编码的详细说明和示例代码。 1. 硬件编码支…...

编程日记 2025/6/3 21:32:46

脚本化挂在物理盘、nfs、yum、pg数据库、nginx（已上传脚本）

文章目录前言一、什么是脚本化安装二、使用步骤1.物理磁盘脚本挂载（离线）2.yum脚本化安装（离线）3.nfs脚本化安装（离线）4.pg数据库脚本化安装（离线）5.nginx脚本化安装（离…...

编程日记 2025/6/3 21:33:21

// Error: line 1: XGen: Candidate guides have not been associated!

Maya xgen 报错// Error: line 1: XGen: Candidate guides have not been associated! 复制下面粘贴到Maya脚本管理器python运行： import maya.cmds as cmds def connect_xgen_guides():guide_nodes cmds.ls(typexgmMakeGuide)for node in guide_nodes:downstream…...

编程日记 2025/6/3 21:34:16

投机解码论文阅读：Falcon

题目：Falcon: Faster and Parallel Inference of Large Language Models through Enhanced Semi-Autoregressive Drafting and Custom-Designed Decoding Tree 地址：https://arxiv.org/pdf/2412.12639 一看它的架构图，可以发现它是基于EAGLE…...

编程日记 2025/6/3 21:33:03

OpenCV实现基于交叉双边滤波的红外可见光融合算法

1 算法原理 CBF是*Cross Bilateral Filter(交叉双边滤波)*的缩写，论文《IMAGE FUSION BASED ON PIXEL SIGNIFICANCE USING CROSS BILATERAL FILTER》。论文中，作者使用交叉双边滤波算法对原始图像 A A A， B B B 进行处理得到细节&#xff0…...

编程日记 2025/6/3 21:33:41

Springboot整合WebService

1.1 概述 webservice 即 web 服务，因互联网而产生，通过 webservice 这种 web 服务，我们可以实现互联网应用之间的资源共享，比如我们想知道手机号码归属地，列车时刻表，天气预报，省市区邮…...

编程日记 2025/6/3 8:19:28

504 Gateway Timeout：网关超时解决方法

一、什么是 504Gateway Timeout？ 1. 错误定义 504 Gateway Timeout 是 HTTP 状态码的一种，表示网关或代理服务器在等待上游服务器响应时超时。通俗来说，这是服务器之间“对话失败”导致的。 2. 常见触发场景 Nginx 超时：反向代…...

编程日记 2025/6/1 7:57:15

C++ 的 pair 和 tuple

1 std::pair 1.1 C 98 的 std::pair 1.1.1 std::pair 的构造 C 的二元组 std::pair<> 在 C 98 标准中就存在了，其定义如下： template<class T1, class T2> struct pair;std::pair<> 是个类模板，它有两个成员&#x…...

编程日记 2025/6/4 10:39:19

抢十八游戏

前言我国民国一直流传着一个名叫“抢十八”的抢数游戏：参与游戏的两人从1开始轮流报数，每次至少报1个数，最多报2个数，每人报的每个数不得与自已报过的或对方报过的重复，也不得跳过任何一个数。谁先报到18&#xff0c…...

编程日记 2025/6/2 20:15:01

从玩具到工业控制--51单片机的跨界传奇【2】

咱们在上一篇博客里面讲解了什么是单片机《单片机入门》，让大家对单片机有了初步的了解。我们今天继续讲解一些有关单片机的知识，顺便也讲解一下我们单片机用到的C语言知识。如果你对C语言还不太了解的话，可以看看博主的C语言专栏哟&#xff…...

编程日记 2025/6/2 20:15:34

LLM实现视频切片合成前沿知识调研

1.相关产品产品链接腾讯智影https://zenvideo.qq.com/可灵https://klingai.kuaishou.com/即梦https://jimeng.jianying.com/ai-tool/home/Runwayhttps://aitools.dedao.cn/ai/runwayml-com/Descripthttps://www.descript.com/?utm_sourceai-bot.cn/Opus Cliphttps://www.opu…...

编程日记 2025/5/29 16:56:54

学习threejs，使用FlyControls相机控制器

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.FlyControls 相机控制…...

编程日记 2025/6/4 17:22:16

wordpress 房产网站筛选功能

自定义分类法创建 add_action( init, ashu_post_type ); function ashu_post_type() {register_taxonomy(province,post,array(label => 省,rewrite => array( slug => province ),hierarchical => true));register_taxonomy(city,post,array(label => 市,rewr…...

编程日记 2025/6/2 20:15:17

SQL面试题2：留存率问题

引言场景介绍： 在互联网产品运营中，用户注册量和留存率是衡量产品吸引力和用户粘性的关键指标，直接影响产品的可持续发展和商业价值。通过分析这些数据，企业可以了解用户行为，优化产品策略，提升用户体验…...

编程日记 2025/5/26 14:41:15

Redis是单线程还是多线程？

大家好，我是锋哥。今天分享关于【Redis是单线程还是多线程？】面试题。希望对大家有帮助； Redis是单线程还是多线程？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网 Redis是单线程的。尽管Redis的处理是单线程的&a…...

编程日记 2025/6/1 22:30:23

mysql 变量,流程控制与游标

第16章_变量,流程控制与游标 1.变量分为系统变量和用户自定义变量 1.1系统变量 1.1.1系统变量分类系统变量分为全局系统变量以及会话系统变量查看所有全局变量 SHOW GLOBAL VARIABLES 查看所有会话变量 SHOW SESSION VARIABLESor SHOW VARIABLES #默认是会话变量 …...

编程日记 2025/6/3 0:09:02

Java配置log4j日志打印

1. 引入依赖 <dependencies><dependency><groupId>org.apache.logging.log4j</groupId><artifactId>log4j-api</artifactId><version>1.2.14</version> </…...

编程日记 2025/6/3 0:08:45

什么是SQL？

什么是SQL？ SQL（Structured Query Language，结构化查询语言）是一种用于与关系型数据库进行交互的标准编程语言。SQL 是设计用于管理和操作关系型数据库的语言，主要用于查询、插入、更新、删除和定义数据结构。SQL 是关…...

编程日记 2025/6/3 0:09:36

Linux 机器学习

Linux 机器学习是指在 Linux 操作系统环境下进行机器学习相关的开发、训练和应用。具体步骤环境搭建： 选择合适的 Linux 发行版：如 Ubuntu、Fedora、Arch Linux 等。Ubuntu 因其易用性和丰富的软件包管理系统，适合初学者；Fed…...

编程日记 2025/6/3 5:38:05

HarmonyOS 鸿蒙 ArkTs(5.0.1 13)实现Scroll下拉到顶刷新/上拉触底加载，Scroll滚动到顶部

HarmonyOS 鸿蒙 ArkTs(5.0.1 13)实现Scroll下拉到顶刷新/上拉触底加载效果展示使用方法 import LoadingText from "../components/LoadingText" import PageToRefresh from "../components/PageToRefresh" import FooterBar from "../components/…...

编程日记 2025/6/4 11:21:16

第27章汇编语言--- 设备驱动开发基础

汇编语言是低级编程语言的一种，它与特定的计算机架构紧密相关。在设备驱动开发中，汇编语言有时用于编写性能关键的部分或直接操作硬件，因为它是接近机器语言的代码，可以提供对硬件寄存器和指令集的直接访问。要展开源代码详细叙…...

编程日记 2025/6/3 0:09:19

sosadmin相关命令

sosadmin命令以下是本人翻译的官方文档，如有不对，还请指出，引用请标明出处。原本有个对应表可以跳转的，但是CSDN的这个[](#)跳转好像不太一样，必须得用html标签，就懒得改了。 sosadmin help 用法 sosadm…...

编程日记 2025/6/2 6:32:46

【git】-初始git

学习资源推荐- 标签管理 - Git教程 - 廖雪峰的官方网站一、什么是版本控制？ 二、Git的安装三、掌握Linux常用命令四、Git基本操作 1、提交代码 2、查看历史提交 3、版本回退一、什么是版本控制？ 版本控制是一种用于记录文件或项目内容变化的系…...

编程日记 2025/6/2 0:49:32

JAVA之单例模式

单例模式（Singleton Pattern）是一种设计模式，用于确保一个类只有一个实例，并提供一个全局访问点来获取该实例。在软件设计中，单例模式常用于控制对资源的访问，例如数据库连接、线程池等。以下是单例模式的详…...

编程日记 2025/6/4 4:22:49

无人机数据集，支持YOLO，COCO json，PASICAL VOC xml格式的标注，正确识别率可达到95.7%，10000张原始图片

无人机数据集，支持YOLO，COCO json，PASICAL VOC xml格式的标注，正确识别率可达到95.7%，10000张原始图片下载地址： 标注好的数据集下载地址： yolo v11: https://download.csdn.net/download/p…...

编程日记 2025/6/3 8:35:23

Linux：进程概念（三.详解进程：进程状态、优先级、进程切换与调度）

目录 1. Linux中的进程状态 1.1 前台进程和后台进程运行状态睡眠状态磁盘休眠状态停止状态 kill指令—向进程发送信号死亡状态 2. 僵尸进程 2.1 僵尸状态 2.2 僵尸进程 2.3 僵尸进程危害 3. 孤儿进程 4. 进程的优先级概念查看进程优先级 PRI&#xff08…...

编程日记 2025/6/3 23:15:39

stack和queue专题

文章目录 stack最小栈题目解析代码栈的压入弹出序列题目解析代码 queue二叉树的层序遍历题目解析代码 stack stack和queue都是空间适配器最小栈最小栈的题目链接题目解析 minst是空就进栈，或者是val < minst.top()就进栈代码 class MinStack { public:M…...

编程日记 2025/6/3 23:15:23

一 rk3568 Android 11固件开发环境搭建（docker)

一目标搭建 rk3568 android 系统内核及固件开发编译调试环境, 支持开发环境导出分享基于荣品 rk3568 核心板系统环境： ubuntu22.04 /ubuntu20.04 64位桌面版编译环境: docker + ubuntu20.04 , 独立的容器隔离环境，不受系统库版本冲突等影响，无性能损耗，可…...

编程日记 2025/6/3 13:24:37

2025年华数杯国际赛B题论文首发+代码开源数据分享+代码运行教学

176项指标数据库任意组合千种组合方式 14页纯图无水印可视化 63页无附录正文 3万字 1、为了方便大家阅读，全文使用中文进行描述，最终版本需自行翻译为英文。 2、文中图形、结论文字描述均为ai写作，可自行将自己的结果发给ai&#xff0c…...

编程日记 2025/6/3 23:17:01

三小时深度学习PyTorch

【对新手非常友好】三小时深度学习PyTorch快速入门！包教会你的！ --人工智能/深度学习/pytorch_哔哩哔哩_bilibili从头开始，把概率论、统计、信息论中零散的知识统一起来_哔哩哔哩_bilibili从编解码和词嵌入开始，一步一步理解Trans…...

编程日记 2025/6/3 23:17:35

朴素贝叶斯分类器

一、生成模型（学习）（Generative Model） vs 判别模型（学习）（Discriminative Model） 结论：贝叶斯分类器是生成模型 1、官方说明生成模型对联合概率 p(x, y)建模&#x…...

编程日记 2025/6/3 23:15:57

商用车电子电气零部件电磁兼容条件和试验（2）—术语和定义

写在前面本系列文章主要讲解商用车电子/电气零部件或系统的传导抗干扰、传导发射和辐射抗干扰、电场辐射发射以及静电放电等试验内容及要求，高压试验项目内容及要求。若有相关问题，欢迎评论沟通，共同进步。(*^▽^*) 目录商用车电子电气…...

编程日记 2025/6/3 22:43:24

SimpleFOC01｜基于STM32F103+CubeMX，移植核心的common代码

导言如上图所示，进入SimpleFOC官网，点击Github下载源代码。如上图所示，找到仓库。 comom代码的移植后，simpleFOC的移植算是完成一大半。simpleFOC源码分为如下5个部分，其中communication是跟simpleFOC上位机通讯&a…...

编程日记 2025/6/3 23:17:18

物联网之传感器技术

引言在数字化浪潮席卷全球的今天，物联网（IoT）已成为推动各行各业变革的重要力量。而物联网传感器，作为物联网感知层的核心技术，更是扮演着不可或缺的角色。它们如同人类的五官，能够感知物理世界中的各种信…...

编程日记 2025/6/3 23:16:13

React：构建用户界面的JavaScript库

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2025/6/3 23:16:45

基于TypeScript封装 `axios` 请求工具详解

TypeScript 项目中，封装一个详细的 axios 请求工具可以提高代码的可维护性、可重用性，并让请求逻辑与业务逻辑分离。以下是一个详细的封装示例，包括请求拦截器、响应拦截器、错误处理、以及类型定义。 1. 安装 Axios 首先，确保你…...

编程日记 2025/6/4 9:18:27

ElasticSearch在Windows环境搭建测试

引子也持续关注大数据相关内容一段时间，大数据内容很多。想了下还是从目前项目需求侧出发，进行相关学习。Elasticsearch（ES）是位于 Elastic Stack（ELK stack） 核心的分布式搜索和分析引擎。Logstash 和 B…...

编程日记 2025/6/4 16:44:25

通信与网络安全管理之ISO七层模型与TCP/IP模型

一.ISO参考模型 OSI七层模型一般指开放系统互连参考模型 (Open System Interconnect 简称OSI）是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型，为开放式互连信息系统提供了一种功能结构的框架。它从低到高分别是…...

编程日记 2025/6/1 2:17:13

高级运维：shell练习2

1、需求：判断192.168.1.0/24网络中，当前在线的ip有哪些，并编写脚本打印出来。 vim check.sh #!/bin/bash# 定义网络前缀 network_prefix"192.168.1"# 循环遍历1-254的IP for i in {1..254}; do# 构造完整的IP地址ip"$network_…...

编程日记 2025/6/2 22:17:25

三相无刷电机控制｜FOC理论04 - 克拉克变换 + 帕克变换的最终目标

导言通过坐标系旋转，将电机中复杂的三相交流信号映射到与转子磁场同步的旋转参考系中，将动态问题转化为静态问题。这种方法的优点在于： 简化了控制逻辑。实现了转矩Iq和磁通Id的解耦。提供了直流量控制的可能性，大大提高了控制效…...

编程日记 2025/6/4 6:50:49

SAP FICO资产模块各元素基本关系总结

文章目录【SAP系统研究】 #SAP #FICO #资产会计 ①：每个折旧表包含多个折旧范围，折旧范围用于设置资产的平行折旧，如不同的折旧范围可以更新不同的总账，更新不同的科目等。 ②：折旧表是要分配给公司代码的&#xff…...

编程日记 2025/6/2 22:04:22

Elasticsearch快速入门

Elasticsearch是由elastic公司开发的一套搜索引擎技术，它是elastic技术栈中的一部分,提供核心的数据存储、搜索、分析功能 elasticsearch之所以有如此高性能的搜索表现，正是得益于底层的倒排索引技术。那么什么是倒排索引呢？ Elasticsearch…...

编程日记 2025/6/2 15:28:27

【Java数据结构】二叉树相关算法

第一题：获取二叉树中结点个数得到二叉树结点个数，如果结点为空则返回0，然后再用递归计算左树结点个数根结点（1个）右树结点个数。 public int nodeSize(Node root){if (root null)return 0;return nodeSize1(root.l…...

编程日记 2025/6/2 5:59:57

30分钟内搭建一个全能轻量级springboot 3.4 + 脚手架＜1＞ 5分钟快速创建一个springboot web项目

快速导航 <1> 5分钟快速创建一个springboot web项目 <2> 5分钟集成好最新版本的开源swagger ui，并使用ui操作调用接口 <3> 5分钟集成好druid并使用druid自带监控工具监控sql请求 <4> 5分钟集成好mybatisplus并使用mybatisplus generator自…...

编程日记 2025/5/27 7:09:59