px、em、rem、百分比的区别

news2024/11/25 18:36:13

文章目录

  • 1. 单位类型与相对基准
  • 2. 相对长度
    • 1.em
    • 2.rem
    • 3.%百分比
    • 4.vw 和 vh
    • 5.vmin 和 vmax
    • 6.vm
    • 7.ch
    • 8. ex
  • 3. 总结

1. 单位类型与相对基准

单位名称 单位类型(相对/绝对) 相对基准
px 相对 屏幕像素缩放后的尺寸
百分比 相对 font-size相对于继承,width相对与父元素
em 相对 相对于本元素的font-size
rem 相对 根元素

单位名称单位类型 相对/绝对)相对基准
px相对屏幕像素缩放后的尺寸
百分比相对font-size相对于继承,width相对与父元素
em相对相对于本元素的font-size
rem相对根元素

2. 相对长度

1.em

相对于所在容器的font-size属性,若自身没有设置font-size属性,则相对于浏览器的默认字体尺寸。

相当于“ 倍” ,比如设置当前的 div 字体大小为 1.5em,则当前的 div 的字

体大小为:当前 div 继承的字体大小*1.5 倍。

可以指定到小数点后三位,比如“1.234em”

一般浏览器默认字体大小是16px, 则1em = 16px, 2em = 32px

如果用户通过浏览器的UI控件(缩放页面)改变了文字的大小,那么我们整个页面也会进行放大(或缩小)。兼容性:良好

  • 示例 :
    在浏览器中输出3种字体大小的文字,展示em的作用。
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>体验em</title>

        <style>

        <style>

            .div{font-size:30px;}

            .p{font-size:2em;}

            .span{font-size:0.5em;}

        </style>

        </style>

    </head>

    <body>

        <div class="div">div 标签中的文字大小为 30px

            <p class="p">P 标签中的文字大小为 2rem

                <span class="span">span 标 签 中 的 文 字 大 小 为 0.5rem</span>

            </p>

        </div>

    </body>

</html>

在这里插入图片描述

2.rem

r 是 root 的意思,就是相对于根节点的font-size属性来进行缩放,如果有嵌套的关

系,嵌套关系的元素的字体大小始终按照根节点的font-size属性进行缩放。

只要修改根元素就可以成比例的调整所有字体大小,还可以避免字体大小逐层复合的连锁反应。兼容性:IE9+、火狐 3.6+、 safari5.0+

示例:
在浏览器中输出3种字体大小的文字,展示rem的作用。

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>体验rem</title>

        <style>

        <style>

            html{font-size:16px;}

            .div{font-size:30px;}

            .p{font-size:1rem;}

            .span{font-size:0.5rem;}

        </style>

        </style>

    </head>

    <body>

        <div class="div">div 标签中的文字大小为 30px

            <p class="p">P 标签中的文字大小为 1rem

                <span class="span">span 标 签 中 的 文 字 大 小 为 0.5rem</span>

            </p>

        </div>

    </body>

</html>

浏览器显示内容

3.%百分比

宽泛的讲是相对于父元素,但是并不是十分准确

1)对于普通定位元素就是我们理解的父元素

2)对于position: absolute;的元素是相对于已定位的父元素

3)对于position: fixed;的元素是相对于 ViewPort(可视窗口)

4.vw 和 vh

vw和vh是视口(viewport units)单位,何谓视口,顾名思义,视口即为可视窗口。

分两种情况:

1.在pc端,视口指:pc端中,浏览器的可视区域;

2.在移动端,移动端的视口分三种:Layout Viewport(布局视口)、 Visual Viewport(视觉视口)、Ideal Viewport(理想视口);这三个视口的区别不多赘述,这里指的是Layout Viewport(布局视口)。

vw和vh根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

对于视口(viewpoint)的宽度或者高度。1vw等于视口宽度的1%,1vh等于视口高度的1%。兼容性:高版本浏览器均支持。

eg: 视口被均分为100单位的vw,屏幕宽375px,1vw=3.75px;视口被均分为100单位的vh,屏高1200px,1vh=12px;

vw、vh与%百分比的区别:

(1)% 是相对于父元素的大小设定的比率,vw、vh 是视口大小决定的。

(2)vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。

(3)对于横竖屏背景铺满的问题,使用%在ipx可能存在安全留白区域

(4)vh是相对视口高度计算尺寸, 需要考虑全面屏,视口高度尺寸偏大

(5)本质用vw和vh都可以,千万别一个盒子的宽高vw和vh混用

注意:视口单位区别于%单位,视口单位是依赖于视口的尺寸,根据视口尺寸的百分比来定义的;而%单位则是依赖于元素的祖先元素。

  • 示例:
    在浏览器中绘制一个长方形的粉色矩形,宽为浏览器的宽,高为浏览器的高的一半。

改变浏览器窗口大小(不是放大缩小页面),粉色矩形的宽高相对于浏览器的宽高比例不变。

展示vw和vh的作用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>体验vw和vh</title>

    <style>  

    .box {

        width: 100vw;

        height: 50vh;

        background-color: pink;

    }     

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

浏览器显示内容

5.vmin 和 vmax

vmin是当前 vw 和 vh 中较小的一个值,vmax是当前 vw 和 vh 中较大的一个值。

做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

示例
不断改变浏览器大小,会看到粉色矩形大小不断变化。展示vmin的作用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>体验vmin</title>

    <style>  

    .box {

        width: 50vmin;

        height: 100vmin;

        background-color: pink;

    }     

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

浏览器显示内容

vmax与vmin类似,自行尝试,此处不做赘述。

如果你要让这个元素始终铺满整个视口的可见区域,将height和width的值改为100vmax

.box {

height: 100vmax;

width: 100vmax;

}

6.vm

css3新单位,相对于视口的宽度或高度中较小的那个。

最小的那个被均分为100单位的vm,举个例子:浏览器高度900px,宽度1200px,取最小的浏览器高度, 1 vm = 900px/100 = 9 px。

由于现在vm的兼容性较差,这里就不做展示了。

7.ch

数字0的宽度

8. ex

依赖于英文字母小x的高度

3. 总结

css中的长度单位一共有8个,分别是px,em,pt,ex,pc,in,mm,cm;

px,em和rem用的较多,em和rem是用来适配不同屏幕的,最终也会换算成px来进行布局因此对于精确度没有限制

1)网页布局中一般都是用px。

2)百分比一般宽泛的讲是相对于父元素,自适应网页布局用的多。

3)viewport:可视窗口,也就是浏览器。

calc()使用通用的数学运算规则,但是也提供更智能的功能:

使用“+”、“-”、“” 和 “/”四则运算;

可以使用百分比、px、em、rem等单位;

可以混合使用各种单位进行计算;

表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;

表达式中有“”和“/”时,其前后可以没有空格,但建议留有空格。

例如 :设置div元素的高度为当前窗口高度-100px

div{

height: calc(100vh - 100px);

}

一般用来设置流式布局宽高,当然,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值

calc()的兼容性如下:

实际使用时,同样需要添加浏览器的前缀:

.elm {

/*Firefox*/

-moz-calc(expression);

/*chrome safari*/

-webkit-calc(expression);

/*Standard */

calc();

 }

4)chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取。

5)vw、vh、vmin、vmax 使用的前提是在移动端的前提下,即首先申明个的缩放比例。

链接:https://blog.csdn.net/xijinno1/article/details/132332263

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1229588.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

yolov8使用opencv2实时检测,两种物品,左上角显示信息

效果为&#xff1a; 左上角显示 帧率&#xff1a;FPS 序列号&#xff1a;SN 两种物品的检测数量和总数 可以应用于工业检测 import cv2 from ultralytics import YOLO from cv2 import getTickCount, getTickFrequency # 加载 YOLOv8 模型 model YOLO("weights/yolov8s.…

反渗透水处理成套设备有哪些

反渗透水处理成套设备主要包括反渗透装置、预处理系统、控制系统等部分。 反渗透装置&#xff1a;反渗透水处理设备的核心部分&#xff0c;由反渗透膜、压力容器、膜组件等组成。反渗透膜是一种高分子材料制成的半透膜&#xff0c;能够截留水中的溶解盐、有机物、细菌等杂质&a…

华为笔记本MateBook D 14 2021款锐龙版R7集显非触屏(NbM-WFP9)原装出厂Windows10-20H2系统

链接&#xff1a;https://pan.baidu.com/s/13Kyy95GME-asli4woNN_ww?pwdbqa8 提取码&#xff1a;bqa8 HUAWEI华为MateBookD14原厂Win10系统自带所有驱动、出厂主题壁纸、系统属性专属LOGO标志、Office办公软件、华为电脑管家等预装程序

一篇详解,Postman设置token依赖步骤

前言 postman做接口测试时&#xff0c;大多数的接口必须在有token的情况下才能运行&#xff0c;我们可以获取token后设置一个环境变量供所在同一个集合中的所有接口使用。 一般是通过调用登录接口&#xff0c;获取到token的值 实战项目&#xff1a;jeecg boot项目 项目官网…

steam搬砖项目2023年现状分析,到底还能不能做?

关于CSGO游戏搬砖项目的5大认知误区 当前的steam搬砖项目市场正变得混乱不堪。你对该项目的了解程度决定了你是否能在这个生态系统中获得收益。 假设你有100万资金&#xff0c;想要全部投入搬砖事业&#xff0c;但对项目一无所知&#xff0c;只看中收益。即使你有充足的资金&a…

文具办公产品展示预约小程序的作用如何

从整体来看&#xff0c;文具办公品牌/门店的生意来源于线下自然流量或线上自营商城/入驻第三方商城的的流量&#xff0c;线上多数情况都是以直接销售配送为主&#xff0c;但其实对文具品牌/门店而言还有信息展示、服务预约、在线咨询、产品介绍等需求。 虽然小区周边的消费者需…

Uniapp矩阵评分组件

uniapp矩阵评分组件支持自定义图标、选择颜色、评分等级。 <template><view style"width: 100%;overflow: hidden;"><view class"flex-sub flex-table flex flex-direction-column":style"{ --table-border-color: tableBorderColor…

学习UI第一天

在工作闲暇之余&#xff0c;自己画的原型图&#xff0c;再次做一次记录&#xff0c;哈哈哈 萌宠领养UI设计原型图 https://modao.cc/proto/lq2KqIVBs48xwylNZlA7OP/sharing?view_moderead_only #萌宠领养-分享 可以点击此链接&#xff0c;进行查看O(∩_∩)O哈哈~

DDPM的学习

Denoising Model 首先是宏观理解一下 Denoising Model 的输入 去噪很多步&#xff0c;用的是同一个Denoising Model&#xff0c;但是输入图片可能差距很大。解决方法&#xff1a;给Denoising Model多输入一个变量&#xff0c;表示现在的去噪阶段&#xff0c;让Denoising Mod…

硬盘无法格式化怎么办?

许多用户在尝试格式化硬盘、SD卡、USB闪存驱动器时可能会遇到无法格式化硬盘的问题&#xff0c;并且还会伴随着Windows无法完成格式化或格式化未成功完成之类的错误消息弹窗。那么&#xff0c;硬盘无法格式化原因是什么呢&#xff1f;硬盘无法格式化怎么办呢&#xff1f;下面我…

图像分割方法

常见的图像分割方法有以下几种&#xff1a; 1.基于阈值的分割方法 灰度阈值分割法是一种最常用的并行区域技术&#xff0c;它是图像分割中应用数量最多的一类。阈值分割方法实际上是输入图像f到输出图像g的如下变换&#xff1a; 其中&#xff0c;T为阈值&#xff1b;对于物体的…

宝塔站点配置

我这里使用的thinkphp 框架部署的

buildadmin+tp8表格操作(7)表格的事件监听

buildadmin 中的事件都已经在 baTable类中定义好了。我们一般不会去修改&#xff0c;万一我们要在事件上有所操作&#xff0c; 我们可以通过事件的 前置和后置 钩子函数来处理 那么我们是如何使用这些钩子呢&#xff1f; 我们只需要在 创建对象的时候&#xff0c;定义好这些钩…

二进制部署k8s集群-过程中的问题总结(接上篇的部署)

1、kube-apiserver部署过程中的问题 kube-apiserver.conf配置文件更改 2、calico的下载地址 curl https://docs.projectcalico.org/v3.20/manifests/calico.yaml -O 这里如果kubernetes的节点服务器为多网卡配置会产生报错 修改calino.yaml配置文件 解决方法&#xff1a; 调…

YB506AB是一款理电池充、放电管理专用芯片,集成锂电池充电管理和降压DC-DC电路。

YB506AB 锂电转可充电AA/AAA电池专用SOC芯片 概述: YB506AB是一款理电池充、放电管理专用芯片&#xff0c;集成锂电池充电管理和降压DC-DC电路。充电过程满足锂电池三段式滑流/恒流/恒压充电规范&#xff0c;B506内部的线性充电电路采用了恒流可配置模式&#xff0c;可以通过…

概念解析 | 光电神经网络:optoelectronic neural network

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:光电神经网络。 概念解析 | 光电神经网络的原理、挑战与未来 1. 背景介绍 在过去的十年中,深度学习和神经网络在许多领域取得了显著的成就,如图像识别、自然语言处理、医疗…

如何快速将txt类型的日志文件转换为excel表格并进行数据分析报表统计图(如:饼图、折线图、柱状图)?

打开excel创建空白文档 选择一个txt文件 一动下面箭头↑竖线&#xff0c;可以拖拽左右调整要判断转换为一列的数据宽度 根据情况设置不同列的数据格式&#xff08;每一列可以点击&#xff09;&#xff0c;设置好后点击【完成】 设置单元格数据格式 手动插入第一行为每列数据的…

没收到Win11 23H2正式版的推送怎么升级到23H2

没收到Win11 23H2正式版的推送怎么升级到23H2&#xff1f;用户反映自己没有收到Win11 23H2正式版的更新推送&#xff0c;又想升级为23H2版本。接下来小编给大家详细介绍不同的升级方法&#xff0c;帮助更多的用户完成Win11 23H2系统的更新&#xff0c;升级后就能体验到Win11 23…

【C++】pow函数实现的伽马变换详解和示例

本文通过原理和示例对伽马变换进行详解&#xff0c;并通过改变变换系数展示不同的效果&#xff0c;以帮助大家理解和使用。 原理 伽马变换是一种用于图像增强的技术&#xff0c;它可以用来提高或降低图像的对比度&#xff0c;常用于医学图像处理和计算机视觉等领域。伽马变换…

3D建模基础教程:编辑多边形功能命令快捷方式

一、打开3D软件并创建新模型 首先&#xff0c;打开你的3D建模软件&#xff0c;比如Blender、Maya或3ds Max。然后&#xff0c;创建一个新的3D模型。你可以使用基本几何体来创建模型&#xff0c;也可以导入现有的模型。 二、进入编辑多边形模式 在主工具栏中&#xff0c;找到并…