CSS 单位总结

许多 CSS 属性如 width、margin、padding 和 font-size 都需要一个长度，而 CSS 有许多不同的方法来表达长度。

在 CSS 中，长度是一个数字，一个没有空格的单位。例如，5px、0.9em，等等。

在 CSS 中，一般有两种用于长度和尺寸的单位：绝对长度单位和相对长度单位。

绝对长度单位

绝对长度单位是基于一个实际的物理单位，通常被认为是跨设备的相同尺寸。但是，根据你的屏幕尺寸和质量，或者你的浏览器或操作系统的设置，可能会有一些例外。

<div class="box"></div>

.box {
  width: 5cm;
  height: 5cm;
  background-color: red;
}

在这个例子中，width 和 height 的值是 5cm,这里用到的就是绝对长度单位。
5cm 的宽度和高度，在 96dpi 屏幕上，相当于 5px。但是，在 120dpi 屏幕上，相当于 6px。

单位	名称	等价换算
cm	厘米	1cm = 37.8px = 25.2/64in
mm	毫米	1mm = 1/10th of 1cm
Q	四分之一毫米	1Q = 1/40th of 1cm
in	英寸	1in = 2.54cm = 96px
pc	派卡	1pc = 1/6th of 1in
pt	磅	1pt = 1/72th of 1in
px	像素	1px = 1/96th of 1in

这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm（厘米）。惟一一个你经常使用的值，估计就是 px（像素）。

相对长度单位

相对长度单位是相对于其他某些东西的。例如：

• em 相对于本元素的字体大小，或者在用于 font-size 时相对于父元素的字体大小。rem 相对于根元素的字体大小。
• vh 和 vw 分别相对于视口的高度和宽度。

使用相对单位的好处是，通过一些精心的规划，你可以使文本或其他元素的大小相对于页面上的任何指定的东西进行缩放，使其与其他内容相协调。

常用的有 em、rem、vw、vh，其中 vw 和 vh 代表的是视口的宽度和高度，例如：

<div class="box"></div>

.box {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

在上面的例子中，我们使用 100vw 和 100vh，表示宽度和高度都等于视口的宽度和高度。

单位	相对于
em	相对于自身的字体大小，或者在用于 font-size 时相对于父元素的字体大小。
rem	相对于根元素的字体大小。
vh	相对于视口的高度
vw	相对于视口的宽度
vmax	1vmax 是视口最大尺寸的 1%
vmin	1vmin 是视口最小尺寸的 1%
%	百分比，或相对于父级大小的百分比大小
1h	元素的 line-height
ex	相对于字符 x 的高度。通常为字体高度的一半。
ch	数字0的宽度