探索|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绝对单位。

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

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

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

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

<!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长度单位，都是被用在哪里吗？欢迎评论交流！

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