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

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

news 2025/8/27 21:27:09

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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/7/7 6:59:35

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/8/22 4:15:17

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/8/21 8:01:56

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/8/22 5:05:28

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/6/17 23:10:20

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/7/11 22:34:49

【算法训练营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

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/8/24 17:18:40

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/8/27 10:42:43

网络编程（UDP编程）

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

编程新知 2025/8/25 3:17:00