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

em/px/rem/vh/vw单位的区别

一、绝对长度单位

1.px

表示像素,显示器上每个像素点大小都是相同的

二、相对长度单位

2.em

相对于当前对象内文本的字体尺寸,如未设置对行内文本字体的尺寸,则相对于浏览器的默认字体(1em=16px)
em值不是固定的,会继承父级元素的大小

<style>html {font-size: 10px; /* 简化font-size的设置,16px*62.5%=10px */}.big {font-size: 1.4em; /* 14px */}.small {font-size: 1.2em; /* 12px */}
</style>

3.rem

只相对于html根元素font-size的值来计算

<style>html {font-size: 62.5%; /* 简化font-size的设置,16px*62.5%=10px */}.big {font-size: 1.4rem; /* 14px */}.small {font-size: 1.2rem; /* 12px */}
</style>

4.vh/vw

vh:将窗口的高度分为100等份,100vh表示满高,50vh表示一般的高度,vw同理表示窗口的宽度

5.%

%与vh和vw的区别在于,相对于的父元素不同,%是相对于父元素,而vh和vw是相对于窗口
普通元素:正常理解的父元素
position:absolute 元素:相对于已定位的父元素
position:fixed元素:相对于viewport(可视窗口)

相关文章:

em/px/rem/vh/vw单位的区别

一、绝对长度单位 1.px 表示像素&#xff0c;显示器上每个像素点大小都是相同的 二、相对长度单位 2.em 相对于当前对象内文本的字体尺寸&#xff0c;如未设置对行内文本字体的尺寸&#xff0c;则相对于浏览器的默认字体&#xff08;1em16px&#xff09; em值不是固定的&…...

【C++】多态 ③ ( “ 多态 “ 实现需要满足的三个条件 | “ 多态 “ 的应用场景 | “ 多态 “ 的思想 | “ 多态 “ 代码示例 )

文章目录 一、" 多态 " 实现条件1、" 多态 " 实现需要满足的三个条件2、" 多态 " 的应用场景3、" 多态 " 的思想 二、" 多态 " 代码示例 一、" 多态 " 实现条件 1、" 多态 " 实现需要满足的三个条件 &q…...

创建一个Keil项目

1、创建项目 2、选择存放的文件夹&#xff0c;还有设置项目名 3、选择型号&#xff08;因为没有STC,用下面这个替代&#xff0c;功能差不多&#xff09; 4、选择不用启动文件 5、就会得到下面这个&#xff0c;可以在Source Group 1下面编写代码了 6、右键source Group 1,添加c语…...

Xray的简单使用

xray 简介 xray 是一款功能强大的安全评估工具&#xff0c;由多名经验丰富的一线安全从业者呕心打造而成&#xff0c;主要特性有: 检测速度快。发包速度快; 漏洞检测算法效率高。支持范围广。大至 OWASP Top 10 通用漏洞检测&#xff0c;小至各种 CMS 框架 POC&#xff0c;均…...

Linux Ubunto Nginx安装

一 安装前 环境准备 gcc $ sudo apt-get install gcc zlib $ sudo apt-get install zlib1g-dev pcre $ sudo apt-get install libpcre3 libpcre3-dev openssl $ sudo apt-get install openssl libssl-dev‘ ubuntu 安装 libssl-dev失败的解决方案 1.安装aptitude sudo apt-g…...

深度学习中的epoch, batch 和 iteration

名词定义epoch使用训练集的全部数据进行一次完整的训练&#xff0c;称为“一代训练”batch使用训练集中的一小部分样本对模型权重进行一次反向传播的参数更新&#xff0c;这样的一部分样本称为&#xff1a;“一批数据”iteration使用一个batch的数据对模型进行一次参数更新的过…...

unity开发安卓视频文件适配手机和平板

using UnityEngine; using UnityEngine.UI;public class VideoResize : MonoBehaviour {private RawImage rawImage;private VideoPlayer videoPlayer;private void Start(){rawImage GetComponent<RawImage();videoPlayer GetComponent<VideoPlayer>();// 播放视频…...

NLP之RNN的原理讲解(python示例)

目录 代码示例代码解读知识点介绍 代码示例 import numpy as np import tensorflow as tf from tensorflow.keras.layers import SimpleRNNCell# 第t时刻要训练的数据 xt tf.Variable(np.random.randint(2, 3, size[1, 1]), dtypetf.float32) print(xt) # https://www.cnblog…...

yo!这里是进程间通信

目录 前言 进程间通信简介 目的 分类 匿名通道 介绍 举例&#xff08;进程池&#xff09; 命名管道 介绍 举例 共享内存 介绍 共享内存函数 1.shmget 2.shmat 3.shmdt 4.shmctl 举例 1.框架 2.通信逻辑 消息队列 信号量 同步与互斥 理解信号量 后记…...

使用docker安装MySQL,Redis,Nacos,Consul教程

文章目录 安装MySQL安装Redis安装Nacos安装Consul 如未安装docker&#xff0c;参考教程&#xff1a; https://blog.csdn.net/m0_63230155/article/details/134090090 安装MySQL #拉取镜像 sudo docker pull mysql:latestsudo docker run --name mysql \-p 3306:3306 \-e MYSQ…...

python和Springboot如何交互?

Python和Spring Boot可以通过RESTful API进行交互。Spring Boot通常用于后端开发&#xff0c;提供了快速构建RESTful API的工具&#xff0c;而Python则可以用于编写前端或与后端交互的代码。 要实现Python和Spring Boot的交互&#xff0c;可以按照以下步骤进行&#xff1a; 在…...

Qt实现json解析

前提要点 json文件&#xff0c;可通过键值的方式存储你所需要的数据&#xff0c;斌且支持多种类型存储&#xff0c;类似于一种结构化的数据库&#xff0c;在读取json文件时可通过相对应的关键字精准获取。他是一种树状结构&#xff0c;我们可以自己设定叶子的数量以及他所代表…...

Ajax、Json深入浅出,及原生Ajax及简化版Ajax

Ajax 1.路径介绍 1.1 JavaWeb中的路径 在JavaWeb中&#xff0c;路径分为相对路径和绝对路径两种&#xff1a; 相对路径&#xff1a; ./ 表示当前目录(可省略) ../ 表示当前文件所在目录的上一级目录 绝对路径&#xff1a; http://ip:port/工程名/资源路径 2.2 在JavaWeb中…...

前端第一阶段测试

前端第一阶段测试 选择问答 如果觉得有用请给我点个赞⑧~ 选择 1、【单选】下列哪个是子代选择器 A A、p>b B、p b C、pb D、p.b 2、【单选】下述有关css属性position的属性值的描述&#xff0c;说法错误的是&#xff1f;B A、static&#xff1a;没有定位&#xff0c;元素出…...

openlayers+vue的bug

使用addInteraction添加交互draw绘制&#xff0c;预期removeInteraction删除交互draw绘制时不再绘制&#xff0c;但是删除绘制不起作用&#xff0c;各种找原因&#xff0c;结果把data中的map变量注释掉即可&#xff0c;原因未知。 <template><div><div id"…...

实时数仓-Hologres介绍与架构

本文是向大家介绍Hologres是一款实时HSAP产品&#xff0c;隶属阿里自研大数据品牌MaxCompute&#xff0c;兼容 PostgreSQL 生态、支持MaxCompute数据直接查询&#xff0c;支持实时写入实时查询&#xff0c;实时离线联邦分析&#xff0c;低成本、高时效、快速构筑企业实时数据仓…...

asp.net教务管理信息系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio计算机毕业设计

一、源码特点 asp.net 教务管理信息系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言 开发 asp.net教务管理系统 应用技术&a…...

爬虫、数据清洗和分析

爬虫、数据清洗和分析是在数据科学、数据挖掘和网络爬虫开发领域中常见的概念。 爬虫&#xff08;Web Scraping&#xff09;&#xff1a;爬虫是一种自动化程序或脚本&#xff0c;用于从互联网上的网站上提取信息。这些信息可以是文本、图像、视频或其他类型的数据。爬虫通常会…...

SpringBoot | SpringBoot中实现“微信支付“

SpringBoot中实现"微信支付": 1.“微信支付”产品2."微信支付"接入流程3.“微信小程序支付”时序图&#xff1a;3.1 “商家端JSAPI下单” 接口3.2 “微信小程序端调起支付” 接口 4.微信支付准备工作&#xff1a;4.1 获得微信支付平台证书、商户私钥文件4…...

基于SSM和VUE的留守儿童信息管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…...

NVIDIA Profile Inspector终极指南:解锁显卡隐藏性能的完整方案

NVIDIA Profile Inspector终极指南&#xff1a;解锁显卡隐藏性能的完整方案 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector NVIDIA Profile Inspector是一款能够深度访问和修改NVIDIA显卡驱动配置的专业…...

BaiduPCS-Web:智能突破百度网盘限速的革命性解决方案

BaiduPCS-Web&#xff1a;智能突破百度网盘限速的革命性解决方案 【免费下载链接】baidupcs-web 项目地址: https://gitcode.com/gh_mirrors/ba/baidupcs-web 还在为百度网盘的下载速度而烦恼吗&#xff1f;当急需下载重要文件时&#xff0c;几十KB/s的速度是否让你感到…...

Course17:SGLang 深度优化:Radix 缓存与复杂任务的极致吞吐

SGLang vs vLLMvLLM 的高并发原理&#xff1a;PagedAttention&#xff08;解决 KV Cache 碎片&#xff09;Continuous Batching&#xff08;解决 GPU 空闲&#xff09;推测解码&#xff08;加速 Decode 阶段&#xff09;> vLLM 解决的是 如何让模型跑得快 的问题。Thinking&…...

5个强力步骤实现旧Mac升级:开源工具OpenCore Legacy Patcher全攻略

5个强力步骤实现旧Mac升级&#xff1a;开源工具OpenCore Legacy Patcher全攻略 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 当你的Mac提示"此Mac不支…...

【Houdini】HDA参数编辑实战:从基础到高级技巧

1. HDA参数编辑基础入门 第一次打开Houdini的HDA参数面板时&#xff0c;我完全被那些密密麻麻的选项搞懵了。后来才发现&#xff0c;掌握几个核心概念就能轻松上手。HDA&#xff08;Houdini Digital Asset&#xff09;是Houdini中最强大的功能之一&#xff0c;它允许我们把复杂…...

文脉定序完整指南:从模型下载、镜像构建、服务启动到监控告警全流程

文脉定序完整指南&#xff1a;从模型下载、镜像构建、服务启动到监控告警全流程 如果你正在构建一个智能问答系统或知识库&#xff0c;一定遇到过这样的烦恼&#xff1a;系统能搜出一堆看似相关的文档&#xff0c;但最精准、最贴切的答案往往不在最前面。用户需要手动翻找&…...

RK3506 AMP 异构多核通信 RPMsg-Lite 握手卡死 (wait_for_link_up)

RK3506 AMP 异构多核通信 RPMsg-Lite 握手卡死 (wait_for_link_up) 1. 问题背景与现象 硬件平台&#xff1a;Rockchip RK3506 (Cortex-A7 集群 Cortex-M0 协处理器) 软件环境&#xff1a;Linux 6.1 (主核) 裸机/RTOS (从核 MCU)&#xff0c;使用 RPMsg-Lite 框架进行核间通信…...

Spoon与Gradle插件集成:现代化Android项目的最佳实践指南 [特殊字符]

Spoon与Gradle插件集成&#xff1a;现代化Android项目的最佳实践指南 &#x1f680; 【免费下载链接】spoon Distributing instrumentation tests to all your Androids. 项目地址: https://gitcode.com/gh_mirrors/sp/spoon Spoon是一个强大的Android测试分发工具&…...

SEO 优化人员如何编写优化报告并向上级汇报_SEO 优化人员如何制定长期的 SEO 优化计划

SEO 优化人员如何编写优化报告并向上级汇报 在当前数字化经济的快速发展中&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;已成为企业提升网站流量和品牌知名度的重要手段。作为SEO优化人员&#xff0c;我们不仅需要制定有效的SEO优化策略&#xff0c;还要能够精准地编写…...

5分钟本地部署Asian Beauty Z-Image Turbo:零基础生成东方美学人像写真

5分钟本地部署Asian Beauty Z-Image Turbo&#xff1a;零基础生成东方美学人像写真 在数字内容创作蓬勃发展的今天&#xff0c;高质量人像图像的需求与日俱增。特别是对于东方审美风格的人像写真&#xff0c;传统拍摄方式成本高昂且效率低下。今天&#xff0c;我将带你快速部署…...