CSS Units(单位)

单位用于在CSS属性中指定非零长度值,CSS常用的单位有：px，em，pt，百分比（%）等。

了解CSS单位

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

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

相对长度单位

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

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

使用Em单位

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

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

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

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

因此，当我们在中指定字体大小时em，1em等于Inherited 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;
}

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

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

使用防爆装置

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

之所以称它为x高度，是因为它通常等于小写字母“ x”的高度，如下所示。但是，ex甚至为不包含“ x”的字体也定义了。

绝对长度单位

绝对长度单位彼此固定。它们高度依赖于输出介质，因此在已知输出环境时尤其有用。绝对单位由物理单位（的in，cm，mm，pt，pc）和px单位。

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

h1 { margin: 0.5in; }       /* inches  */
h2 { line-height: 3cm; }    /* centimeters */
h3 { word-spacing: 4mm; }   /* millimeters */
h4 { font-size: 12pt; }     /* points */
h5 { font-size: 1pc; }      /* picas */
h6 { font-size: 12px; }     /* picas */