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

文章目录

  • 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相对根元素

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.mzph.cn/news/151349.shtml

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

相关文章

Vue3 源码解读系列(十三)——双向数据绑定 v-model

v-model 本质是 prop 和 事件监听 的语法糖。 通过 prop 实现 数据 -> 视图 的单向数据流&#xff1b;通过监听 change 或 input 事件实现 视图 -> 数据 的单向数据流。 /*** v-model 的实现* 注册了 created 和 beforeUpdate 两个钩子函数*/ const VModelText {/*** cr…

刷题记录第三十天-两数之和and四数之和II

两数之和 class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {unordered_map<int,int> map;for(int i0;i<nums.size();i){if(map.count(target-nums[i])!0){return vector<int>{i,map[target-nums[i]]};}else{map[nu…

C++中使用构造函数进行类型转换

C中使用构造函数进行类型转换 可给类提供重载的构造函数&#xff0c;即接受一个或多个参数的构造函数。这种构造函数常用于进行类型转换。请看下面的 Human 类&#xff0c;它包含一个将整数作为参数的重构构造函数&#xff1a; class Human {int age;public:Human(int humans…

VSCode使用MinGW中的go并支持CGO

在Windows中&#xff0c;如果想使用Linux下的一些命令或者开发工具&#xff0c;可以安装Cygwin或者MinGW&#xff0c;MinGW相比Cygwin要轻量得多&#xff0c;笔者就安装的MinGW&#xff0c;但是安装MinGW后&#xff0c;如果把它加到Windows系统的PATH环境变量中&#xff0c;则可…

【Flask使用】全知识md文档,4大部分60页第3篇:状态cookie和session保持

本文的主要内容&#xff1a;flask视图&路由、虚拟环境安装、路由各种定义、状态保持、cookie、session、模板基本使用、过滤器&自定义过滤器、模板代码复用&#xff1a;宏、继承/包含、模板中特有变量和函数、Flask-WTF 表单、CSRF、数据库操作、ORM、Flask-SQLAlchemy…

CMS与FullGC

JVM中的CMS&#xff08;Concurrent Mark Sweep&#xff09;GC和Full GC&#xff08;Full Garbage Collection&#xff09;是两种不同的垃圾回收算法。 CMS GC&#xff1a;CMS GC是一种并发的垃圾回收算法&#xff0c;它在运行期间与应用程序线程并发工作&#xff0c;尽可能减少…

【mac 解决eclipse意外退出】

打开eclipse时提示报错信息应用程序"Eclipse.app"无法打开&#xff08;这里忘了截图就不上图了&#xff09;。 点击 “好” 的按钮后会弹出发送报告的弹窗 终端输入&#xff1a;sudo codesign --force --deep --sign - /Applications/Eclipse.app/ 就可以解决了

互联网上门洗衣洗鞋小程序搭建

“闪站侠互联网洗护软件开发”围绕健康洗护、智能操作做出不断升级&#xff0c; 满足用户多样化的洗护需求&#xff0c;打造轻松洗衣洗鞋体验。 洗衣洗鞋专用软件&#xff0c;可以帮助洗衣店洗鞋店店主们省心高效的管理店铺&#xff0c;一次付款长期使用&#xff0e;功能基本涵…

趣学python编程 (四、数据结构和算法介绍)

数据结构和算法在编程中非常重要。数据结构是组织和存储数据的方式&#xff0c;而算法是解决问题的方法和步骤。你要挑战的蓝桥杯&#xff0c;实际也是在设计算法解决问题。其实各种编程语言都只是工具&#xff0c;而程序的核心数据结构算法。犹如练武&#xff0c;数据结构和算…

深度学习乳腺癌分类 计算机竞赛

文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度&#xff0c;召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…

【iOS】——知乎日报第五周总结

文章目录 一、评论区展开与收缩二、FMDB库实现本地持久化FMDB常用类&#xff1a;FMDB的简单使用&#xff1a; 三、点赞和收藏的持久化 一、评论区展开与收缩 有的评论没有被回复评论或者被回复评论过短&#xff0c;这时就不需要展开全文的按钮&#xff0c;所以首先计算被回复评…

1.1二分查找

二分查找&#xff0c;主要是针对基本有序的数据来进行查找target。 二分法的思想很简单&#xff0c;因为整个数组是有序的&#xff0c;数组默认是递增的。 1.1 使用条件 用于查找的内容逻辑上来说是需要有序的查找的数量只能是一个&#xff0c;而不是多个 1.2 简介 首先选…

Positive Technologies 利用 PT Cloud Application Firewall 保护中小型企业的网络资源

云产品按月订购&#xff0c;无需购买硬件资源 PT Cloud Application Firewall 是 Positive Technologies 推出的首个用于保护网络应用程序的商用云产品。Web 应用层防火墙 (web application firewall, WAF) 现在可以通过 技术合作伙伴——授权服务商和云提供商以订购方式提供1…

C#编程题分享(1)

求四个整数中的最大值和最小值问题 编写⼀个程序&#xff0c;对输⼊的4个整数&#xff0c;求出其中的最⼤值和最⼩值&#xff0c;并显⽰出来。 Console.WriteLine("请分别输入四个整数&#xff1a;"); int a Convert.ToInt32(Console.ReadLine()); int b Convert…

Modbus转Profinet网关在污水处理系统中连接PLC和变频器Modbus通信案例

污水处理系统中使用Modbus转Profinet网关可以连接PLC和变频器&#xff0c;实现二者之间的通信。该网关的作用是将PLC与变频器之间的Modbus协议转换为Profinet协议&#xff0c;使两者可以相互沟通。在污水处理系统中&#xff0c;PLC控制污水处理的各个过程&#xff0c;而变频器则…

测试用例的设计方法(全):正交实验设计方法|功能图分析方法|场景设计方发

正交实验设计方法 一.方法简介 利用因果图来设计测试用例时, 作为输入条件的原因与输出结果之间的因果关系,有时很难从软件需求规格说明中得到。往往因果关系非常庞大,以至于据此因果图而得到的测试用例数目多的惊人&#xff0c;给软件测试带来沉重的负担&#xff0c;为了有效…

vue过渡,vue3组合式API详细介绍

7.过渡效果 vue提供了两个内置组件,可以帮助你制作基于状态变化的过渡和动画 Transition会在一个元素或组件进入和离开DOM时应用动画TransitionGroup会在一个v-for列表中的元素或组件被插入,移动,或移除时应用动画 7-1过渡效果 过渡模式 <Transition mode"out-in&q…

Linux文件目录以及文件类型

文章目录 Home根目录 //bin/sbin/etc/root/lib/dev/proc/sys/tmp/boot/mnt/media/usr 文件类型 Home 当尝试使用gedit等编辑器保存文件时&#xff0c;系统默认通常会先打开个人用户的“家”&#xff08;home&#xff09;目录&#xff0c; 建议在通常情况下个人相关的内容也是保…

面向对象设计有六大原则

面向对象设计有六大原则&#xff0c;它们是&#xff1a; 单一职责原则&#xff08;Single Responsibility Principle&#xff0c;SRP&#xff09;&#xff1a;一个类应该只有一个主要的职责。这意味着如果一个类负责多个职责&#xff0c;当其中一个职责发生变化时&#xff0c;…

使用 VPN ,一定要知道的几个真相!

你们好&#xff0c;我的网工朋友。 今天想和你聊聊VPN。在VPN出现之前&#xff0c;企业分支之间的数据传输只能依靠现有物理网络&#xff08;例如Internet&#xff09;。 但由于Internet中存在多种不安全因素&#xff0c;报文容易被网络中的黑客窃取或篡改&#xff0c;最终造…