探索|CSS长度单位竟然有21种

探索|CSS长度单位竟然有21种

一、前言

说明:21种,仅仅是指作者已知的CSS长度单位。

最近有点时间,就探索起了web前端的“黄金三角”,也就是HTML、CSS、JavaScript。本文主要记录CSS长度单位,有一天问了个同事,你知道CSS有几种长度单位吗?

那人回答了5种:px、em、rem、vh、vw。

这确实是web前端领域最常见的5种CSS长度单位,但其实看过相关书籍和规范文档的,都应该很有影响,即是答不上来都有哪些,但会知道有十几种。不是说一定要记得,起码有个印象也是好的,这是系统化学习的好处,视野不一样。

二、了解长度单位的意义

1.为什么要学习长度单位

言归正传,我们可以发现 CSS 的每一个属性都被允许有一个值或一组值,而这些值,尤其是表示长度或距离的值,往往需要带上单位,而相同的数值带上不同的单位,往往表示出了不同的意义,其在浏览器页面中展示的效果可能也大相径庭。

CSS中的长度单位,分为两种,一种是绝对单位,另一种是相对单位,了解他们的区别,重要的是帮助我们理解它们控制的元素将如何变化,以及帮助我们做设计和布局规划。这些就是认真了解学习长度单位的意义。

2.相对单位搭配“相对布局”更合适

深入了解CSS长度单位,对我们做CSS布局设计,很有意义,这是不同单位表示了不同意义带来的结果。做更细致的布局和适应性更好的布局,更需要深入了解CSS长度单位。比如做自适应布局和响应式布局,那么应该什么单位比较好呢,私以为这两种布局方式,其实可以理解为布局方式中的“相对布局”,因为它们会相对性的对不同显示设备和可视区域范围的,自动做出相应的调整,因此我称这种布局为“相对布局”,与之相对的是“固定布局”。那么“相对布局”选用相对单位更合适吧?

三、CSS长度绝度单位和相对单位一览

1. 7种CSS长度绝对单位一览

怎么理解绝对单位?绝对单位通常可以理解为它们的大小总是相同的,它们和其他任何元素没有关系,它的值所代表的的范围,不会因为其他元素或其他值改变而改变。比如一个div的fontsize的值为10px,这个值不受祖先元素的fontsize大小影响,也不受其他元素其他属性的影响。下面是7种CSS绝对单位。

序号单位名称等价换算
1cm厘米1cm = 96px/2.54
2mm毫米1mm = 1/10th of 1cm
3Q四分之一毫米1Q = 1/40th of 1cm
4in英寸1in = 2.54cm = 96px
5pc十二点活字1pc = 1/16th of 1in
6pt1pt = 1/72th of 1in
7px像素1px = 1/96th of 1in

2. 14种CSS长度相对单位一览

理解相对单位。相对单位的值的表示的大小,受其他东西的影响,比如1em,可能相当于10px的大小, 也可能相当于100px,甚至更高,因为em的实际表示大小是根据父元素而定, 1em表示的是父元素字体大小的一倍,要注意的是虽然只是受父元素的影响, 但父元素也会受它的父元素的影响。相对单位的好处也是明显的, 对于我们做一些成体系的细致的布局,尤其是“相对布局”, 例如自适应布局,响应式布局,需要在某一范围内有规律适配变化的布局,会有好处。 绝对单位,在这些方面是劣势的。这有点绝对路径和相对路径的区别味道,但又不同。

序号单位相对于
1em元素的字号,在 font-size 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如 width
2ex字体的X字高(x-height)
3cap字体 中 大 写 的 标 称 高度
4ch数字“0”的宽度,元素字体中窄字形的平均字符前进,由“0”(零,U+0030)字形表示。
5ic元素字体中全宽字形的平均字符前进,由“水”(CJK 水象形文字,U+6C34)字形表示。
6rem根元素的字体大小。
7lh元素的行高line-height 。
8rlh根元素的行高。
9vw视口宽度的 1%。
10vh视口高度的 1%。
11vi根元素内联轴上视口大小的 1%。
12vb根元素块轴上视口大小的 1%。
13vmin视口较小尺寸的 1%。
14vmax视口较大尺寸的 1%。

四、划重点:几个重要的长度单位解读

1.CSS长度单位:px

px是绝对单位,也是web前端最为常见的单位,它表示像素,他的值不会受其他元素或其他值的影响, 我们可以理解为10px所表示的意义,总是相同的。

2.CSS长度单位:rem

rem是相对单位,相对于根元素的字体大小,比如根元素大小为16px, 这也是一般浏览器默认的字体大小,那么一个div元素的fontsize为2rem, 则该2rem表示的意义相当于32px。rem相对于根元素fontsize大小, 此外,不受其他因素的影响,与em不同的是,它没有嵌套的效应。 这写特性使得rem常常被选作“相对布局”的首选单位,尤其在移动端, 因为移动端设备的多样式,使用rem作为单位,会使得整体看起来更和谐。 就像会根据人的尺寸选择不同的号码的衣服,这种匹配会显得更合适。

顺便一提,rem 应用于响应式布局,常常会结合媒体查询 @media 使用。

3.CSS长度单位:em

em是相对单位,相对于父元素,在 font-size 中使用是相对于父元素的字体大小, 在其他属性中使用是相对于自身的字体大小,如 width。下面是一个便于理解这点区别的例子。

设置父元素div的fontsize为15px,子元素p的fontsize为2em,子元素p的width为2em。 这里p元素的fontsize和width都是2em,但表示的意义不同,fontsize的2em时相当于父元素, fontsize:15px 的2倍,即是215px。width的2em相当于自身 fontsize:2em 的2倍, 即是22*15px。

image.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div style="font-size: 15px">
  你好,css 世界
  <p style="font-size: 2em;width: 2em;">em是相对长度单位</p>
</div>
</body>
</html>

4.CSS长度单位:vh 和 vw

vh 和 vw 都是相对于视口,即设备屏幕可视区域的,这里视口宽高分别被划分为100, vh 是相对于视口的高度,vw 是相对于视口的宽度。例如一个视口宽高为 1024 * 768, 则1vw,表示视口宽度的1%,即是102.4;1vh表示视口高度的1%,即是76.8。 所以在不同视口大小的设备,1vh所表示的意义是不同的。

vh 在结合 min-height 和 max-height,有时会很有用,比如在大屏可视化的领域, 满屏需求的设置,有时候使用 100vh 会有好处。vh 和 vw 的范围是[0,100]。

5. 小贴士

小贴士1:关于长度 0

包含长度值时,如果长度为0,则不需要单位标识符。否则,单位标识符是必需的,不区分大小写,并且必须紧跟在值的数字部分之后,中间没有空格。

小贴士2:其他绝对单位的去处

绝对长度单位固定为物理长度:英寸或厘米。因此,当输出是固定尺寸的介质(例如打印)时,这些单元中的许多单元更有用。例如,mm是物理毫米,1/10 厘米。

五、好奇,未见过的其他单位用在何方?

尽管我尝试查阅了资料,但也未知全貌,21种CSS长度单位,不少在日常开发中简直就是闻所未闻,那么它们出生的意义在哪?又被用在何方?我想有一部分是历史原因,不好放弃,只好保留或沿用。

有谁知道那些陌生的CSS长度单位,都是被用在哪里吗?欢迎评论交流!

作者知道后,后续也会更新文章分享。