概念

CSS 规范中，长度单位可以分为两种，绝对单位和相对单位。

• 绝对长度单位：cm、mm、in、px、pt、pc；

• 相对长度单位：em、ex、ch、rem、vw、vh、vmin、vmax、%；

五个常用的单位是 px / em / rem / vh & vw / vmin & vmax

px

px 表示像素。一个 px 单位是屏幕上的一个像素点，每个像素点的大小都相同的，所以像素是绝对长度单位，px 的大小与元素的其他属性没有关系；

em

em 是相对于 当前对象内文本的字体尺寸 font-size 的 相对长度单位。如果行内文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸 16px；

特点：

• em 值不是固定的；
• em 会继承父级元素的字体大小；

rem

相对单位，相对的是 HTML 根元素字体尺寸 font-szie 的值。

特点：

• 集合相对大小与绝对大小的优点于一身。
• 与 em 不同的是 rem 总是相对于根元素，而不像 em 使用级联的方式计算尺寸。

vh / vw

根据相对于视口（viewport）的大小计算。

例如， 50 vh 为视口的一般高度； 50 vw 为视口的一般宽度；

与 vh & vw 容易混淆的是单位是 % ，在 % 号中，有以下情况：

• 对于 position: absolute ，相对的是已经定位的父元素。
• 对于 position: fixed ，相对的是视口。

参考

• 🥽 CSS 单位 | notebook (simon1uo.github.io) 相关的例子。