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

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

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、box2step1step2, 通过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

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

  • vwviewport 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;的大小的百分比。使用百分比可…...

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

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

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

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

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

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

UDP协议详解

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

Myb atis基础3

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

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

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

高通开发系列 - 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 第…...

【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…...

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

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

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

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

DCGAN

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

【速通版】吴恩达机器学习笔记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.多元线性回归 其意义很…...

【leetcode】跳跃游戏

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

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

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

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

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

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…...

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

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

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

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

Python SQLAlchemy入门教程

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

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...

Python常用模块:time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...

Linux-进程间的通信

1、IPC&#xff1a; Inter Process Communication&#xff08;进程间通信&#xff09;&#xff1a; 由于每个进程在操作系统中有独立的地址空间&#xff0c;它们不能像线程那样直接访问彼此的内存&#xff0c;所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...