余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

CSS解析——px、em、rem单位

xiyangw 2023-09-26 14:20 55 浏览 0 评论

前端开发中长度单位有很多,最为常用和熟知的肯定就是px了,随着前端的不断发展,em和rem也越来越普及,只用px一把梭的时代早已成为过去。是px过时了吗?如果对这些单位的使用场景不够了解,可能就会拿着一个rem从头梭到尾了。本篇我们来好好梳理一下css中的长度单位以及它们的使用场景,我们要在合适的场景使用合适的单位。

px

px是像素点单位,与之线性相关的单位有mm(毫米)、cm(厘米)、in(英寸)、pt(点,印刷术语,1/72英寸)、pc(派卡,印刷术语,12点)。

1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px

em

em是相对长度单位,适合基于特定的字号进行排版。1em=当前元素的字号,其准确值取决于作用的元素。

.padded {
	font-size: 16px;
	padding: 1rem;
}

上面的代码设置了元素的内边距为16px。最终浏览器会根据相对单位计算出绝对值。

使用em来设置padding、height、width、border-radius很合适,当前元素如果继承了不同的字号,响应的内边距、宽高也会自动随之缩放。

需要注意的是,如果使用em定义元素的字号,em的表现会稍有不同。上面提到,当前元素的字号决定了1em的值,但是,如果声明font-size:1.2em,该元素的字号肯定不能等于自己的1.2倍。实际上,此时font-size是根据当前元素继承的字号来计算的。

em示例

上图可以看到,p标签中的字号是1.2*16=19.2px,font-size是根据继承的字号计算的。

em需要注意的就在于此,同时用它指定一个元素的字号和其他属性时,浏览器必须先计算字号,然后使用这个计算值算出其余的属性值。

另外,当用em来指定多重嵌套的元素的字号时,就会产生意外的结果,内嵌的元素会一直继承上级的字号,导致要么嵌套字号越来越大,要么越来越小。

rem

rem和em很像,其实和em的理念很像,都是相对单位,rem中的r是root,顾名思义,rem是相对一个root元素(一般以html标签作为根元素)计算值的,不管在文档的什么位置。

rem结合了px和em的优先,既保留了相对单位的优势,又简单易用可控。那只用rem行吗?行,也不行。如果你只了解习惯这一个单位,就要充分发挥rem的优势,全站梭到底也没什么不行的。但是如果你想写出简单好看的css代码,在不同的场景下使用适当的单位会让你和你的队友少趟许多的坑。

一般情况下,我会使用rem设置字号,用px设置边框、用em来设置其他大部分的属性,尤其是内边距、外边距、圆角等。这样字号是可预测的,同时还能在其他因素改变元素字号时,借助em缩放内外边距。你觉得呢?

vh、vw、vmin、vmax

我们先介绍一下概念:

视口:浏览器窗口里网页可见部分的边框区域,不包括浏览器的地址栏、工具栏、状态栏。

vh:视口高度的1/100

vw:视口宽度的1/100

vmin:视口宽、高中较小的一方的1/100

vmax:视口宽、高中较大的一方的1/100

从定义上,相信小伙伴们已经明白了视口单位的用法。我来介绍相对视口单位的一个比较特别的用途:设置字号。诶?之前不是说设置字号用rem吗?用视口单位能有什么特别的呢?

用rem设置字号的时候,为了适配不同的屏幕大小,免不了要使用@media根据不同的屏幕设置根元素的字号大小,有一个小小的问题是,如果动态去调整浏览器的宽度,达到设置的断点时,一定程度会导致页面的字体突然变大或缩小。但是,如果是使用vw来设置字号呢?页面的字号是不是就不会突然的变化?会很平滑?

当然了,这种用法在实际应用中推广的程度不是特别高,有些是因为浏览器支持的问题,有些是因为没必要因为这么一点点的优化,而放弃心爱的rem。

总结

今天所写的内容主要是帮大家回顾一下css单位的用途及场景,还有一些单位(如fr)还没有提及,将会在后面的文章中结合别的属性写。各种单位的存在一定都有各自的特长和适合的场景,偶尔打开一下思路,也许能有更好的解决方案。大家有想和我分享的内容吗?感谢评论关注哦!

相关推荐

排序算法--归并排序_归并排序例题讲解

原理如图所示(先分割再合并):归并排序代码工作原理:1、申请空间,使其大小为两个已经排序序列之和,该空间用来存放合并后的序列2、设定两个指针,最初位置分别为两个已经排序序列的起始位置3、比较两个指针所...

八大排序算法-归并排序_归并排序 算法

算法思想归并排序分为三个步骤:1.分解:将数列分解成n个子数列。(如果是将数列分成2个子数列则为2路归并)2.治理:对每个子数列进行排序操作3.合并:将两个排好序的子数列进行合并生成新的数列算法实现P...

高级排序之归并排序、希尔排序_希尔排序和归并排序区别

前言继上次排序算法简单排序算法之冒泡、插入和选择排序-Java实现版后,本文学习高级排序算法——归并排序、希尔排序,快速排序将在后续更新。本文实现代码调用方法,部分来自前一个文章:简单排序算法之冒泡、...

Excel办公应用:按合并单元格排序的三大方法

1.按姓名对科目排序重点:在"C2"中输入公式=IF(A2<>"",1,C1+1),然后下拉填充。2.按姓名添加连续序号(方法一)重点:选择"A2:A11"单元格区域,在编辑栏中输入公...

快速排序 Vs. 归并排序 Vs. 堆排序——谁才是最强的排序算法

知乎上有一个问题是这样的:堆排序是渐进最优的比较排序算法,达到了O(nlgn)这一下界,而快排有一定的可能性会产生最坏划分,时间复杂度可能为O(n^2),那为什么快排在实际使用中通常优于堆排序?昨天刚...

归并排序思路图解 #归并排序_归并排序百度百科

排序算法1.图解。OK,让它排一下。看好了,要开始排了。能看出来像递归吗?肯定算法难,但是这个次数非常的多,不用管次数。这个是帝规,就是递归。这是并,这是并,这是两个有序数,组合成一个最后的大的有序数...

排序算法学习——归并排序_归并排序算法稳定吗

我们先看归并排序的定义归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(DivideandConquer)的一个非常典型的应用。将已有序的子序列合并,得到完全有序的序列;即先使每...

动画|经典的归并排序究竟怎么玩儿?

作者|菠了个菜责编|郭芮由于LeetCode上的算法题很多涉及到一些基础的数据结构,为了更好的理解后续更新的一些复杂题目的动画,推出一个新系列——《图解数据结构》,主要使用动画来描述常见的数据...

Excel中,多列数据统一排名,Rank函数直接搞定

Rank实现多列联合排序排序,那太简单啦,Excel中,升序降序,一个按键就可以。但,那是针对单列情况,若需要联合多列数据进行排序呢?如下图所示,需要对1、3、5列进行统一排序,咋弄嘞?联合排序案例先...

【数据结构与算法】归并排序_数据结构中归并排序

归并排序是建立在归并操作的一种高效的排序方法,该方法采用了分治的思想,比较适用于处理较大规模的数据,但比较耗内存,今天我们聊聊归并排序排序思想一天,小一尘和慧能坐在石头上,眺望着远方师傅,我听山下的柳...

C++基础算法:归并排序_经典排序算法-----归并排序(c语言实现)

归并排序(MergeSort)是建立在归并操作上的一种有效,稳定的排序算法,该算法是采用分治法(DivideandConquer)的一个非常典型的应用。将已有序的子序列合并,得到完全有序的序列。...

马士兵说之归并排序_马士兵教育的内推是真的

大家对于排序应该是挺熟悉的吧,马士兵老师特意为排序出了一波视频,当然文章是转自博客园的,马士兵老师的视频观看请点击下方的了解更多概要本章介绍排序算法中的归并排序。内容包括:1.归并排序介绍2.归并...

C++快速排序和归并排序_c++快速排序sort

快速排序每一轮挑选一个基准元素(随机选择,编程时一般选取第一个),并让比它大或小的元素移动到基准元素的两边,把数列拆解成了两个部分。而后对这两部分分别进行快速排序。时间复杂度:O(nlogn),辅助空...

经典的排序算法——归并排序_归并排序算法步骤

归并排序(MergeSort)是一种基于分治策略的高效排序算法。它将原始数组不断地分割成两个子数组,直到每个子数组只剩下一个元素为止(即基本有序),然后再通过合并已排序的子数组来最终得到完全有序的大...

归并排序_归并排序c++实现

归并排序概念:归并排序中涉及到一个概念就是分而治之,总序列化成小序列,将小序列排序好,利用排序好的小序列,再归并排序成原来要排序的序列。所以排序前先要分:functiondivide(arr){...

取消回复欢迎 发表评论: