px、em 和 rem 的区别:深入理解 CSS 中的单位
文章目录
- 前言
- 一、`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是三种用于定义尺寸(如宽度、高度、边距、填充等)的长度单位。它们各自有不同的…...
vue 表格内点编辑,单元格不切换成输入框问题分析
vue 表格渲染时,我点击编辑时,想直接在单元格上面进行编辑。 效果如下,正常是文本效果,点击编辑时,出现输入框 其实实现起来,逻辑很简单,但是中间我却出现了一个问题,效果始终出不…...
MATLAB学习笔记-table
1.在table中叠加table table 的每一列具有固定的数据类型。如果要让表的所有单元格都可以任意填充,就得让每一列都是 cell 类型,这样表中每个单元格都是“一个元胞”。创建时可以先构造一个 空 cell 数组(大小为行数列数)&#x…...
使用 selenium-webdriver 开发 Web 自动 UI 测试程序
优缺点 优点 有时候有可能一个改动导致其他的地方的功能失去效果,这样使用 Web 自动 UI 测试程序可以快速的检查并定位问题,节省大量的人工验证时间 缺点 增加了维护成本,如果功能更新过快或者技术更新过快,维护成本也会随之提高…...
ffmpeg硬件编码
使用FFmpeg进行硬件编码可以显著提高视频编码的性能,尤其是在处理高分辨率视频时。硬件编码利用GPU或其他专用硬件(如Intel QSV、NVIDIA NVENC、AMD AMF等)来加速编码过程。以下是使用FFmpeg进行硬件编码的详细说明和示例代码。 1. 硬件编码支…...
脚本化挂在物理盘、nfs、yum、pg数据库、nginx(已上传脚本)
文章目录 前言一、什么是脚本化安装二、使用步骤1.物理磁盘脚本挂载(离线)2.yum脚本化安装(离线)3.nfs脚本化安装(离线)4.pg数据库脚本化安装(离线)5.nginx脚本化安装(离…...
// 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…...
投机解码论文阅读: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…...
OpenCV实现基于交叉双边滤波的红外可见光融合算法
1 算法原理 CBF是*Cross Bilateral Filter(交叉双边滤波)*的缩写,论文《IMAGE FUSION BASED ON PIXEL SIGNIFICANCE USING CROSS BILATERAL FILTER》。 论文中,作者使用交叉双边滤波算法对原始图像 A A A, B B B 进行处理得到细节࿰…...
Springboot整合WebService
1.1 概述 webservice 即 web 服务,因互联网而产生,通过 webservice 这种 web 服务,我们可以实现互联网应 用之间的资源共享,比如我们想知道 手机号码归属地,列车时刻表,天气预报,省市区邮…...
504 Gateway Timeout:网关超时解决方法
一、什么是 504Gateway Timeout? 1. 错误定义 504 Gateway Timeout 是 HTTP 状态码的一种,表示网关或代理服务器在等待上游服务器响应时超时。通俗来说,这是服务器之间“对话失败”导致的。 2. 常见触发场景 Nginx 超时:反向代…...
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…...
抢十八游戏
前言 我国民国一直流传着一个名叫“抢十八”的抢数游戏:参与游戏的两人从1开始轮流报数,每次至少报1个数,最多报2个数,每人报的每个数不得与自已报过的或对方报过的重复,也不得跳过任何一个数。谁先报到18,…...
从玩具到工业控制--51单片机的跨界传奇【2】
咱们在上一篇博客里面讲解了什么是单片机《单片机入门》,让大家对单片机有了初步的了解。我们今天继续讲解一些有关单片机的知识,顺便也讲解一下我们单片机用到的C语言知识。如果你对C语言还不太了解的话,可以看看博主的C语言专栏哟ÿ…...
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…...
学习threejs,使用FlyControls相机控制器
👨⚕️ 主页: gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.FlyControls 相机控制…...
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…...
SQL面试题2:留存率问题
引言 场景介绍: 在互联网产品运营中,用户注册量和留存率是衡量产品吸引力和用户粘性的关键指标,直接影响产品的可持续发展和商业价值。通过分析这些数据,企业可以了解用户行为,优化产品策略,提升用户体验…...
Redis是单线程还是多线程?
大家好,我是锋哥。今天分享关于【Redis是单线程还是多线程?】面试题。希望对大家有帮助; Redis是单线程还是多线程? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Redis是 单线程 的。 尽管Redis的处理是单线程的&a…...
mysql 变量,流程控制与游标
第16章_变量,流程控制与游标 1.变量 分为系统变量和用户自定义变量 1.1系统变量 1.1.1系统变量分类 系统变量分为全局系统变量以及会话系统变量 查看所有全局变量 SHOW GLOBAL VARIABLES 查看所有会话变量 SHOW SESSION VARIABLESor SHOW VARIABLES #默认是会话变量 …...
Java配置log4j日志打印
1. 引入依赖 <dependencies><!-- Log4j 2依赖 --><dependency><groupId>org.apache.logging.log4j</groupId><artifactId>log4j-api</artifactId><version>1.2.14</version> <!-- 可以根据需要修改版本 --></…...
什么是SQL?
什么是SQL? SQL(Structured Query Language,结构化查询语言)是一种用于与关系型数据库进行交互的标准编程语言。SQL 是设计用于管理和操作关系型数据库的语言,主要用于查询、插入、更新、删除和定义数据结构。SQL 是关…...
Linux 机器学习
Linux 机器学习是指在 Linux 操作系统环境下进行机器学习相关的开发、训练和应用。 具体步骤 环境搭建: 选择合适的 Linux 发行版:如 Ubuntu、Fedora、Arch Linux 等。Ubuntu 因其易用性和丰富的软件包管理系统,适合初学者;Fed…...
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/…...
第27章 汇编语言--- 设备驱动开发基础
汇编语言是低级编程语言的一种,它与特定的计算机架构紧密相关。在设备驱动开发中,汇编语言有时用于编写性能关键的部分或直接操作硬件,因为它是接近机器语言的代码,可以提供对硬件寄存器和指令集的直接访问。 要展开源代码详细叙…...
sosadmin相关命令
sosadmin命令 以下是本人翻译的官方文档,如有不对,还请指出,引用请标明出处。 原本有个对应表可以跳转的,但是CSDN的这个[](#)跳转好像不太一样,必须得用html标签,就懒得改了。 sosadmin help 用法 sosadm…...
【git】-初始git
学习资源推荐- 标签管理 - Git教程 - 廖雪峰的官方网站 一、什么是版本控制? 二、Git的安装 三、掌握Linux常用命令 四、Git基本操作 1、提交代码 2、查看历史提交 3、版本回退 一、什么是版本控制? 版本控制是一种用于记录文件或项目内容变化的系…...
JAVA之单例模式
单例模式(Singleton Pattern)是一种设计模式,用于确保一个类只有一个实例,并提供一个全局访问点来获取该实例。在软件设计中,单例模式常用于控制对资源的访问,例如数据库连接、线程池等。以下是单例模式的详…...
无人机数据集,支持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…...
Linux:进程概念(三.详解进程:进程状态、优先级、进程切换与调度)
目录 1. Linux中的进程状态 1.1 前台进程和后台进程 运行状态 睡眠状态 磁盘休眠状态 停止状态 kill指令—向进程发送信号 死亡状态 2. 僵尸进程 2.1 僵尸状态 2.2 僵尸进程 2.3 僵尸进程危害 3. 孤儿进程 4. 进程的优先级 概念 查看进程优先级 PRI(…...
stack和queue专题
文章目录 stack最小栈题目解析代码 栈的压入弹出序列题目解析代码 queue二叉树的层序遍历题目解析代码 stack stack和queue都是空间适配器 最小栈 最小栈的题目链接 题目解析 minst是空就进栈,或者是val < minst.top()就进栈 代码 class MinStack { public:M…...
一 rk3568 Android 11固件开发环境搭建 (docker)
一 目标 搭建 rk3568 android 系统内核 及固件开发编译调试环境, 支持开发环境导出分享 基于荣品 rk3568 核心板 系统环境: ubuntu22.04 /ubuntu20.04 64位桌面版 编译环境: docker + ubuntu20.04 , 独立的容器隔离环境,不受系统库版本冲突等影响,无性能损耗, 可…...
2025年华数杯国际赛B题论文首发+代码开源 数据分享+代码运行教学
176项指标数据库 任意组合 千种组合方式 14页纯图 无水印可视化 63页无附录正文 3万字 1、为了方便大家阅读,全文使用中文进行描述,最终版本需自行翻译为英文。 2、文中图形、结论文字描述均为ai写作,可自行将自己的结果发给ai,…...
三小时深度学习PyTorch
【对新手非常友好】三小时深度学习PyTorch快速入门!包教会你的! --人工智能/深度学习/pytorch_哔哩哔哩_bilibili从头开始,把概率论、统计、信息论中零散的知识统一起来_哔哩哔哩_bilibili从编解码和词嵌入开始,一步一步理解Trans…...
朴素贝叶斯分类器
一、生成模型(学习)(Generative Model) vs 判别模型(学习)(Discriminative Model) 结论:贝叶斯分类器是生成模型 1、官方说明 生成模型对联合概率 p(x, y)建模&#x…...
商用车电子电气零部件电磁兼容条件和试验(2)—术语和定义
写在前面 本系列文章主要讲解商用车电子/电气零部件或系统的传导抗干扰、传导发射和辐射抗干扰、电场辐射发射以及静电放电等试验内容及要求,高压试验项目内容及要求。 若有相关问题,欢迎评论沟通,共同进步。(*^▽^*) 目录 商用车电子电气…...
SimpleFOC01|基于STM32F103+CubeMX,移植核心的common代码
导言 如上图所示,进入SimpleFOC官网,点击Github下载源代码。 如上图所示,找到仓库。 comom代码的移植后,simpleFOC的移植算是完成一大半。simpleFOC源码分为如下5个部分,其中communication是跟simpleFOC上位机通讯&a…...
物联网之传感器技术
引言 在数字化浪潮席卷全球的今天,物联网(IoT)已成为推动各行各业变革的重要力量。而物联网传感器,作为物联网感知层的核心技术,更是扮演着不可或缺的角色。它们如同人类的五官,能够感知物理世界中的各种信…...
React:构建用户界面的JavaScript库
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
基于TypeScript封装 `axios` 请求工具详解
TypeScript 项目中,封装一个详细的 axios 请求工具可以提高代码的可维护性、可重用性,并让请求逻辑与业务逻辑分离。以下是一个详细的封装示例,包括请求拦截器、响应拦截器、错误处理、以及类型定义。 1. 安装 Axios 首先,确保你…...
ElasticSearch在Windows环境搭建测试
引子 也持续关注大数据相关内容一段时间,大数据内容很多。想了下还是从目前项目需求侧出发,进行相关学习。Elasticsearch(ES)是位于 Elastic Stack(ELK stack) 核心的分布式搜索和分析引擎。Logstash 和 B…...
通信与网络安全管理之ISO七层模型与TCP/IP模型
一.ISO参考模型 OSI七层模型一般指开放系统互连参考模型 (Open System Interconnect 简称OSI)是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型,为开放式互连信息系统提供了一种功能结构的框架。 它从低到高分别是…...
高级运维: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_…...
三相无刷电机控制|FOC理论04 - 克拉克变换 + 帕克变换的最终目标
导言 通过坐标系旋转,将电机中复杂的三相交流信号映射到与转子磁场同步的旋转参考系中,将动态问题转化为静态问题。这种方法的优点在于: 简化了控制逻辑。实现了转矩Iq和磁通Id的解耦。提供了直流量控制的可能性,大大提高了控制效…...
SAP FICO资产模块各元素基本关系总结
文章目录 【SAP系统研究】 #SAP #FICO #资产会计 ①:每个折旧表包含多个折旧范围,折旧范围用于设置资产的平行折旧,如不同的折旧范围可以更新不同的总账,更新不同的科目等。 ②:折旧表是要分配给公司代码的ÿ…...
Elasticsearch快速入门
Elasticsearch是由elastic公司开发的一套搜索引擎技术,它是elastic技术栈中的一部分,提供核心的数据存储、搜索、分析功能 elasticsearch之所以有如此高性能的搜索表现,正是得益于底层的倒排索引技术。那么什么是倒排索引呢? Elasticsearch…...
【Java数据结构】二叉树相关算法
第一题:获取二叉树中结点个数 得到二叉树结点个数,如果结点为空则返回0,然后再用递归计算左树结点个数根结点(1个)右树结点个数。 public int nodeSize(Node root){if (root null)return 0;return nodeSize1(root.l…...
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自…...
vue3学习日记6 - Layout
最近发现职场前端用的框架大多为vue,所以最近也跟着黑马程序员vue3的课程进行学习,以下是我的学习记录 视频网址: Day2-17.Layout-Pinia优化重复请求_哔哩哔哩_bilibili 学习日记: vue3学习日记1 - 环境搭建-CSDN博客 vue3学…...
1/14 C++
练习:将图形类的获取周长和获取面积函数设置成虚函数,完成多态 再定义一个全局函数,能够在该函数中实现:无论传递任何图形,都可以输出传递的图形的周长和面积 #include <iostream>using namespace std; class Sh…...