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

实时互动艺术装置:LumiPixel Canvas Quest结合摄像头生成动态肖像

实时互动艺术装置&#xff1a;LumiPixel Canvas Quest结合摄像头生成动态肖像 1. 项目背景与核心价值 在当代艺术展览中&#xff0c;观众往往只是被动的观赏者。LumiPixel Canvas Quest项目打破了这种单向关系&#xff0c;通过实时图像处理和生成技术&#xff0c;让每位参观者…...

C语言多线程同步实战:从竞态到协同的四种武器

1. 多线程售票问题&#xff1a;竞态条件的典型场景 想象一下春运期间的火车站售票窗口&#xff0c;4个售票员同时售卖20张车票。如果缺乏有效的管理机制&#xff0c;很可能出现同一张票被重复售卖&#xff0c;或者票数统计出错的情况。这个场景完美模拟了多线程编程中最经典的…...

STM32H755双核MCU的以太网配置:避开Cache缓存和MPU的那些坑(CubeIDE实战)

STM32H755双核MCU以太网配置实战&#xff1a;Cache与MPU的深度优化指南 在嵌入式系统开发中&#xff0c;以太网通信已成为工业控制、物联网网关等场景的标配功能。而STM32H7系列凭借其双核架构和丰富的外设资源&#xff0c;成为高性能嵌入式应用的理想选择。然而&#xff0c;当…...

Qwen3-14B Python数据分析环境配置:Anaconda与PyCharm集成

Qwen3-14B Python数据分析环境配置&#xff1a;Anaconda与PyCharm集成 1. 为什么需要专业的数据分析环境 在开始使用Qwen3-14B进行数据分析和AI应用开发前&#xff0c;搭建一个稳定、隔离的Python环境至关重要。想象一下&#xff0c;你正在装修房子&#xff0c;Anaconda就是你…...

【案例共创】码道小工匠,儿童跳绳智能计数系统开发实战

最新案例动态&#xff0c;请查阅【案例共创】码道小工匠&#xff0c;儿童跳绳智能计数系统开发实战小伙伴们快来进行实操吧&#xff01; 本案例由开发者&#xff1a;yd_sun提供&#xff0c;华为开发者空间案例中心优化并收录。 一、概述 1.1 适用对象 个人开发者高校学生企…...

Ollama调用translategemma-27b-it部署指南:Kubernetes集群水平扩展实践

Ollama调用translategemma-27b-it部署指南&#xff1a;Kubernetes集群水平扩展实践 1. 项目简介与核心价值 translategemma-27b-it是Google基于Gemma 3模型系列构建的先进翻译模型&#xff0c;专门处理55种语言之间的翻译任务。这个模型最大的特点是既能处理文本翻译&#xf…...

手把手教你用NVIDIA TX2串口控制大疆C620电机(USB转CAN模块保姆级教程)

从零实现NVIDIA TX2通过USB-CAN模块精准控制大疆C620电机 硬件连接与基础原理 当我们需要在机器人项目中实现高精度电机控制时&#xff0c;CAN总线通信往往是首选方案。但对于使用NVIDIA Jetson TX2这类开发板的新手来说&#xff0c;可能会遇到两个现实问题&#xff1a;TX2原生…...

保姆级教程:用LangFlow可视化工具3步搭建智能问答机器人,无需代码

保姆级教程&#xff1a;用LangFlow可视化工具3步搭建智能问答机器人&#xff0c;无需代码 1. 为什么选择LangFlow&#xff1f; 想象一下&#xff0c;你有一个绝妙的AI应用创意&#xff0c;但面对复杂的代码和API文档却无从下手。LangFlow就是为解决这个问题而生的可视化工具&…...

如何快速实现jsTree上下文菜单:为树形节点添加智能右键操作功能

如何快速实现jsTree上下文菜单&#xff1a;为树形节点添加智能右键操作功能 【免费下载链接】jstree jquery tree plugin 项目地址: https://gitcode.com/gh_mirrors/js/jstree jsTree上下文菜单插件是jQuery树形插件中最实用的功能之一&#xff0c;它能让用户通过右键点…...

复古游戏新玩法:OpenClaw+Qwen3-14B实现经典游戏自动化

复古游戏新玩法&#xff1a;OpenClawQwen3-14B实现经典游戏自动化 1. 当AI遇见复古游戏&#xff1a;一场技术人的浪漫实验 去年整理旧物时&#xff0c;我在抽屉深处翻出一张《金庸群侠传》的光盘。这款1996年发布的经典游戏&#xff0c;承载着无数80后的青春记忆。当我试图在…...