CSS 单位

单位用于在 CSS 属性中指定非零长度值。

了解 CSS 单元

测量长度的单位可以是绝对单位，如像素、点等，也可以是相对单位，如百分比 (%) 和 em 单位。

对于非零值，必须指定 CSS 单位，因为没有默认单位。 缺少或忽略一个单位将被视为错误。 但是，如果值为 0，则可以省略单位（毕竟，零像素与零英寸的测量值相同）。

相对长度单位

相对长度单位指定相对于另一个长度属性的长度。 相对单位是：

em 和 ex 单位取决于应用于元素的字体大小。

使用 Em 单位

1em 的测量值等于使用它的元素的 font-size 属性的计算值。 它可用于垂直或水平测量。

例如，如果元素的 font-size 设置为 16px，line-height 设置为 2.5em，则以像素为单位计算的 line-height 值为 2.5 x 16px = 40px。

p {
    font-size: 16px;
    line-height: 2.5em;
}

当在 font-size 属性本身的值中指定 em 时会发生异常，在这种情况下，它指的是父元素的字体大小。

因此，当我们在 em 中指定字体大小时，1em 等于继承的 font-size。 因此，font-size: 1.2em; 使文本比父元素的文本大 1.2 倍。

body {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}
p {
    font-size: 1.6em;
}
p:firt-letter {
    font-size: 3em;
    font-weight: bold;
}

让我们了解这段代码的全部内容。 所有现代浏览器中字体的默认大小为 16 像素。 我们的第一步是通过将 body font-size 设置为 62.5% 来减小整个文档的大小，这会将 font-size 重置为 10px（16px 的 62.5%）。

这是为了方便 px 到 em 的转换，对默认的 font-size 进行四舍五入。

使用 Ex 单位

ex 单位等于当前字体的 x 高度。

之所以称为 x 高度是因为它通常等于小写字母"x"的高度，如下图所示。 但是，即使对于不包含"x"的字体，也会定义 ex。

绝对长度单位

绝对长度单位相互之间是固定的。 它们高度依赖于输出介质，因此主要在输出环境已知时有用。 绝对单位由物理单位 (in, cm, mm, pt, pc) 和 px 单位组成。

对于打印介质和类似的高分辨率设备，应使用绝对物理单位，例如 in, cm, mm 等。 而对于桌面和低分辨率设备等屏幕显示，建议使用像素或 em 单位。

h1 { margin: 0.5in; }       /* 英寸  */
h2 { line-height: 3cm; }    /* 厘米 */
h3 { word-spacing: 4mm; }   /* 毫米 */
h4 { font-size: 12pt; }     /* 点 */
h5 { font-size: 1pc; }      /* 派卡 */
h6 { font-size: 12px; }     /* 派卡 */