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

20、CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别

news 2026/3/24 20:02:05

CSS中的px 和 %

  • px (pixels) 是固定单位,也可以叫基本单位，代表像素，可以确保元素的大小不受屏幕分辨率的影响。

  • % (percentage) 是相对单位，代表元素大小相对于其父元素或视口（viewport）的大小的百分比。使用百分比可以让元素随着屏幕大小或父元素大小的变化而自动调整大小。

选择使用哪种单位取决于您的需求和项目的要求。通常情况下，固定大小的元素（如图像）使用 px，而相对大小的元素（如布局）使用%。

案例描述：

在这里插入图片描述

以上是描述盒子居中的过程。

1、box2由初始状态通过step1，盒子的定位类型变成了绝对定位元素，此时left: 50%和top: 50%两个属性值将**盒子的原点（0, 0）**移到了父元素（这里指box1）的中心位置。这里的50%是相对于父元素的，也就是相对于盒子box1, 通过换算得到：left:100px;top:100px; 代表的含义是：盒子的原点在X轴水平方向向右向移动的100px, 在Y轴的垂直方向向下移动了100px。

2、box2由step1到step2, 通过margin-left: -50px;margin-top: -50px;使得盒子在X轴的水平方向向左移动了50px,在Y轴的垂直方向向上移动了50px; ** 使得父盒子和子盒子的圆心重合**，至此盒子居中过程结束。

在此我先介绍一下CSS中的坐标系统：

  坐标轴不只是存在于数学中，它同样存在于 Web 世界中。在 Web 中，我们常称之为 Web 坐标轴 或 CSS 坐标系统 。

  在 Web 中，默认原点是给定上下文的左上角，也就是元素盒子的左上角，它分为 x 轴（也称为水平轴），向右为正值，向左为负值；y 轴（垂直轴），向上为负值，向下为正值：

在这里插入图片描述

CSS中的 em 和 rem

  • em 是相对单位，代表元素的字体大小相对于其父元素的字体大小。因此，如果父元素的字体大小变化，则 em 单位的大小也会随之变化。

  • rem（root em）也是一种相对单位，但它代表元素的字体大小相对于根元素（通常是 <html> 元素）的字体大小。因此，即使父元素的字体大小变化，rem 单位的大小也不会随之变化。

两种单位都可以用于设置字体大小、边距等元素的大小，但选择使用哪种单位取决于您的需求和项目的要求。通常情况下，使用 rem 更好，因为它提供了更好的可维护性和可读性。

案例描述：

在这里插入图片描述

在以上案例中：我设置的html根节点的字体大小font-size:15px，其中状态1、状态2、状态3 都各不相同。

下面我们来看看在浏览器中他们各自的属性：

  • 状态1中p标签的属性：
font-size: 20px;
  • 状态2中p标签的属性：
// <p style="text-indent: 2em;"><span>我是天界程序员</span></p>
font-size:20px;
text-indent:40px;// <p style="text-indent: 2rem;"><span>我同时也是一个社畜</span></p>
font-size:20px;
text-indent:30px;

在这个状态下我们可以得出结论：

（1）2em === 40px, 说明em是相对于父元素的字体大小，来换算大小的，而不是根元素.

（2）2rem === 30px, 说明rem是相对于根元素的字体大小，来换算大小的，而不是父元素.

  • 状态3中p标签的属性：
// <p style="text-indent: 2em;font-size: 25px;"><span>我是天界程序员</span></p>
font-size:25px;
text-indent:50px;// <p style="text-indent: 2rem;"><span>我同时也是一个社畜</span></p>
font-size:20px;
text-indent:30px;

在这个状态下我们可以得出结论：

2em === 50px, 说明该状态下的em是对于元素本身的字体大小，来换算大小的，而不是父元素。

结论：

  • em的大小变化是受父元素和元素本身的字体大小影响，其权重：元素本身 > 父元素。
  • rem的大小变化只受其根元素的字体大小影响，与父元素和元素本身无关。

CSS中的 vw 和 vh

  • vh（viewport height）代表元素大小相对于视口（viewport）高度的百分比。因此，如果您将元素的高度设置为 100vh，则元素的高度将占据整个视口的高度。

  • vw（viewport width）代表元素大小相对于视口宽度的百分比。因此，如果您将元素的宽度设置为 100vw，则元素的宽度将占据整个视口的宽度。

两种单位都可以用于设置元素的宽度和高度，但选择使用哪种单位取决于您的需求和项目的要求。例如，如果您想让元素始终占据整个屏幕的高度，则可以使用 100vh。

  • vw : 取屏幕宽度的 1%，作为基础换算单位。
  • vh : 取屏幕高度的 1%，作为基础换算单位。
  • vmin : 取两者的最小值，作为基础换算单位。如果屏幕宽 < 屏幕高 则取屏幕宽为单位，否则，反之。
  • vmax : 取两者的最大值，与vmin的基础换算互斥。

相关文章：

20、CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别

CSS中的px 和 % px (pixels) 是固定单位,也可以叫基本单位&#xff0c;代表像素&#xff0c;可以确保元素的大小不受屏幕分辨率的影响。 % (percentage) 是相对单位&#xff0c;代表元素大小相对于其父元素或视口&#xff08;viewport&#xff09;的大小的百分比。使用百分比可…...

编程日记 2023/2/10 20:24:43

第五节 字符设备驱动——点亮LED 灯

通过字符设备章节的学习&#xff0c;我们已经了解了字符设备驱动程序的基本框架&#xff0c;主要是掌握如何申请及释放设备号、添加以及注销设备&#xff0c;初始化、添加与删除cdev 结构体&#xff0c;并通过cdev_init 函数建立cdev 和file_operations 之间的关联&#xff0c;…...

编程日记 2023/2/10 20:23:34

浅谈小程序开源业务架构建设之路

一、业务介绍 1.1 小程序开源整体介绍 百度从做智能小程序的第一天开始就打造真正开源开放的生态&#xff0c;我们的愿景是&#xff1a;定义移动时代最佳体验&#xff0c;建设智能小程序行业标准&#xff0c;打破孤岛&#xff0c;共建开源、开放、繁荣的小程序行业生态。百度…...

编程日记 2023/2/10 20:22:28

git、gitee、github关系梳理及ssh不对称加密大白话解释

温馨提示&#xff1a;本文不会讲解如何下载、安装git&#xff0c;也不会讲解如何注册、使用gitee或GitHub&#xff0c;这些内容网上一大把&#xff0c;B站上的入门课程也很多&#xff0c;自己看看就好了。 本文仅对 git、gitee、github的关系梳理及ssh公钥私钥授权原理用白话讲…...

编程日记 2023/2/10 20:21:22

UDP协议详解

目录 前言&#xff1a; 再谈协议 UDP协议 比较知名的校验和 小结&#xff1a; 前言&#xff1a; UDP和TCP作为传输层非常知名的两个协议&#xff0c;那么将数据从应用层到传输层数据是怎样进行打包的&#xff1f;具体都会增加一些什么样的报头&#xff0c;下面内容详细介绍…...

编程日记 2023/2/10 20:20:18

Myb atis基础3

Mybatis注解开发单表操作Mybatis的常用注解Mybatis的增删改查MyBatis注解开发的多表操作MyBatis的注解实现复杂映射开发一对一查询一对多查询多对多查询构建sqlsql构建对象介绍查询功能的实现新增功能的实现修改功能的实现删除功能的实现Mybatis注解开发单表操作 Mybatis的常用…...

编程日记 2023/2/10 20:19:13

VHDL语言基础-时序逻辑电路-寄存器

目录 寄存器的设计&#xff1a; 多位寄存器&#xff1a; 多位寄存器的VHDL描述: 移位寄存器&#xff1a; 串进并出的移位寄存器的VHDL描述: 寄存器的设计&#xff1a; 多位寄存器&#xff1a; 一个D触发器就是一位寄存器&#xff0c;如果需要多位寄存器&…...

编程日记 2023/2/10 20:18:06

高通开发系列 - linux kernel更新msm-3.18升至msm-4.9

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅！ 你的喜欢就是我写作的动力！ 目录 linux kernel更新msm-3.18升至msm-4.9第一周处理的内容：第二周处理的内容第三周处理的内容linux kernel更新msm-3.18升至msm-4.9 第…...

编程日记 2023/2/10 20:17:00

【Tensorflow2.0】tensorflow中的Dense函数解析

目录1 作用2 例子3 与torch.nn.Linear的区别4 参考文献1 作用 注意此处Tensorflow版本是2.0。 由于本人是Pytorch用户&#xff0c;对Tensorflow不是很熟悉&#xff0c;在读到用tf写的代码时就很是麻烦。如图所示&#xff0c;遇到了如下代码&#xff1a; h Dense(unitsadj_di…...

编程日记 2023/2/10 20:15:54

PyTorch学习笔记：data.RandomSampler——数据随机采样

PyTorch学习笔记&#xff1a;data.RandomSampler——数据随机采样 torch.utils.data.RandomSampler(data_source, replacementFalse, num_samplesNone, generatorNone)功能&#xff1a;随即对样本进行采样 输入&#xff1a; data_source&#xff1a;被采样的数据集合replace…...

编程日记 2023/2/10 20:14:49

设计模式(七)----创建型模式之建造者模式

1、概述 将一个复杂对象的构建与表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 分离了部件的构造(由Builder来负责)和装配(由Director负责)。 从而可以构造出复杂的对象。这个模式适用于&#xff1a;某个对象的构建过程复杂的情况。 由于实现了构建和装配的解…...

编程日记 2023/2/10 20:13:43

DCGAN

DCGAN的论文地址[https://arxiv.org/pdf/1511.06434.pdf]。DCGAN是GAN的一个变体&#xff0c;DCGAN就是将CNN和原始的GAN结合到一起&#xff0c;生成网络和鉴别网络都运用到了深度卷积神经网络。DCGAN提高了基础GAN的稳定性和生成结果质量。DCGAN主要是在网络架构上改进了原始的…...

编程日记 2023/2/10 20:12:36

【速通版】吴恩达机器学习笔记Part3

目录 1.多元线性回归 a.特征缩放 可行的缩放方式&#xff1a; 1.除以最大值&#xff1a; 2.mean normalization&#xff1a; 3.Z-score normalization b.learning curve: c.learning rate: 2.多项式回归 3.classification logistics regression 1.多元线性回归 其意义很…...

编程日记 2023/2/10 20:11:30

【leetcode】跳跃游戏

一、题目描述 给定一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。 数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标。 示例 1&#xff1a; 输入&#xff1a;nums [2,3,1,1,4] 输出&#xff1a;true 解释&#x…...

编程日记 2023/2/10 20:10:22

论文投稿指南——中文核心期刊推荐（冶金工业 2）

【前言】 &#x1f680; 想发论文怎么办&#xff1f;手把手教你论文如何投稿&#xff01;那么&#xff0c;首先要搞懂投稿目标——论文期刊 &#x1f384; 在期刊论文的分布中&#xff0c;存在一种普遍现象&#xff1a;即对于某一特定的学科或专业来说&#xff0c;少数期刊所含…...

编程日记 2023/2/10 20:09:15

【GPLT 二阶题目集】L2-044 大众情人

人与人之间总有一点距离感。我们假定两个人之间的亲密程度跟他们之间的距离感成反比&#xff0c;并且距离感是单向的。例如小蓝对小红患了单相思&#xff0c;从小蓝的眼中看去&#xff0c;他和小红之间的距离为 1&#xff0c;只差一层窗户纸&#xff1b;但在小红的眼里&#xf…...

编程日记 2023/2/10 20:08:09

SpringBoot整合(二)MyBatisPlus技术详解

MyBatisPlus详解 一、标准数据层开发 MyBatisPlus&#xff08;简称MP&#xff09;是基于MyBatis框架基础上开发的增强型工具&#xff0c;旨在简化开发、提高效率 MyBatisPlus的官网为:https://mp.baomidou.com/ 1.1 标准CRUD 1.2 新增 int insert (T t)T:泛型&#xff0c…...

编程日记 2023/2/10 20:07:02

导入importk8s集群，添加node节点，rancher agent,Rancher Agent设置选项

curl方式&#xff1a; Rancher在每个节点上部署代理以与节点通信。 此页面描述了可以传递给代理的选项&#xff0c;要使用这些选项&#xff0c;您需要采用创建自定义集群 &#xff0c;并在docker run添加节点时将选项添加到生成的命令中。 常规选项 参数环境变量描述—serve…...

编程日记 2023/2/10 20:05:54

C++11--右值引用与移动语义

目录 基本概念 左值与右值 左值引用与右值引用 右值引用的使用场景和意义 左值引用的使用场景 右值引用和移动语义 移动构造和拷贝构造的区别 编译器的优化 移动赋值和赋值运算符重载的区别 右值引用的其他应用场景 完美转发 万能引用 完美转发保持值属性 完美转…...

编程日记 2023/2/10 20:04:47

Python SQLAlchemy入门教程

本文将以Mysql举例&#xff0c;介绍sqlalchemy的基本用法。其中&#xff0c;Python版本为2.7&#xff0c;sqlalchemy版本为1.1.6。 一. 介绍 SQLAlchemy是Python中最有名的ORM工具。 关于ORM&#xff1a; 全称Object Relational Mapping&#xff08;对象关系映射&#xff0…...

编程日记 2023/2/10 20:03:41

Cosmos-Reason1-7B实战案例：机器人环境感知与安全决策生成教程

Cosmos-Reason1-7B实战案例&#xff1a;机器人环境感知与安全决策生成教程 1. 项目概述 Cosmos-Reason1-7B是NVIDIA推出的7B参数规模的多模态视觉语言模型&#xff0c;专为物理推理和环境理解设计。作为Cosmos世界基础模型平台的核心组件&#xff0c;它能够处理图像和视频输入…...

编程新知 2026/3/24 19:12:56

盘点超景深工业显微镜十大品牌，购买要点全详解

引言 在工业生产质检、材料研究、精密制造等领域&#xff0c;超景深工业显微镜的性能直接影响检测精度与工作效率&#xff0c;选择一款适配需求的设备至关重要。超景深技术作为核心竞争力&#xff0c;能解决体视显微镜景深不足的痛点&#xff0c;清晰呈现样品立体细节&#xf…...

编程新知 2026/3/24 18:34:49

# 发散创新：用 Rust实现高性能光线追踪渲染器——从零构建你的第一个 GPU 加速光追引擎在现代图形学领域，**光线追踪（Ray

发散创新&#xff1a;用 Rust 实现高性能光线追踪渲染器——从零构建你的第一个 GPU 加速光追引擎 在现代图形学领域&#xff0c;光线追踪&#xff08;Ray Tracing&#xff09; 已成为高质量实时渲染的核心技术之一。它模拟真实世界中光线传播路径&#xff0c;实现逼真的阴影、…...

编程新知 2026/3/24 18:32:49

中小企业如何用免费工具搭建基础网络安全应急响应体系（附工具清单）

中小企业零成本构建网络安全应急响应体系的实战指南 在数字化浪潮中&#xff0c;中小企业面临的网络威胁正以每年30%的速度递增&#xff0c;但超过60%的中小企业仍处于"裸奔"状态——既没有专业安全团队&#xff0c;也缺乏应急响应预算。事实上&#xff0c;通过合理组…...

编程新知 2026/3/24 18:20:47

ubuntu24.04离线安装deb格式的mysql-community-8.4.4

1&#xff0c;下载解压​ 参考&#xff1a;https://blog.csdn.net/2202_76101487/article/details/145967039 下载页面选择不同的版本&#xff1a; https://dev.mysql.com/downloads/mysql/ubuntu24 下载&#xff1a; wget https://cdn.mysql.com//Downloads/MySQL-8.4/mysql-…...

编程新知 2026/3/24 18:04:43

SeqGPT轻量化生成模型在客服系统的实战应用

SeqGPT轻量化生成模型在客服系统的实战应用 1. 当客服团队每天被重复问题淹没时&#xff0c;我们试了这个新办法 上周跟一家做智能硬件的客户聊完&#xff0c;他们客服主管说了句让我印象很深的话&#xff1a;“我们30人的客服团队&#xff0c;有22个人每天80%的时间都在回答…...

编程新知 2026/3/24 14:45:40

MiniCPM-o-4.5-nvidia-FlagOS在Android开发辅助中的应用：UI代码与业务逻辑生成

MiniCPM-o-4.5-nvidia-FlagOS在Android开发辅助中的应用&#xff1a;UI代码与业务逻辑生成 1. 引言 做Android开发的朋友&#xff0c;估计都经历过这样的场景&#xff1a;产品经理甩过来一张原型图&#xff0c;或者一份需求文档&#xff0c;然后说“这个页面下周二要上线”。…...

编程新知 2026/3/24 10:58:13

别等审计通报才行动：MCP OAuth 2026强制合规窗口仅剩89天，这份含12个可执行checklist的速通手册已内部封存

第一章&#xff1a;MCP OAuth 2026强制合规的底层逻辑与倒计时警讯MCP&#xff08;Multi-Cloud Provider&#xff09;OAuth 2026规范并非演进式升级&#xff0c;而是由全球主要云服务商联合签署的强制性互操作协议&#xff0c;其核心驱动力源于监管层面对身份联邦治理失效的系统…...

编程新知 2026/3/24 10:05:39

GTE+SeqGPT与Keil5集成开发：嵌入式AI应用实战

GTESeqGPT与Keil5集成开发&#xff1a;嵌入式AI应用实战 1. 嵌入式AI开发新选择 最近在做一个智能家居项目时&#xff0c;遇到了一个有趣的问题&#xff1a;如何让一个小小的嵌入式设备也能理解自然语言指令&#xff1f;传统的语音识别方案要么太耗资源&#xff0c;要么准确率…...

编程新知 2026/3/24 10:03:38

老设备如何重获新生？OpenCore Legacy Patcher系统升级完全指南

老设备如何重获新生&#xff1f;OpenCore Legacy Patcher系统升级完全指南 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 当你的Mac设备被苹果官方停止系统更新支持时&am…...

编程新知 2026/3/24 9:35:32