当前位置: 首页 > 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;是 目录…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

【深度学习新浪潮】什么是credit assignment problem?

Credit Assignment Problem(信用分配问题) 是机器学习,尤其是强化学习(RL)中的核心挑战之一,指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中,智能体执行一系列动作后获得一个最终奖励,但每个动作对最终结果的贡献程度往往…...