css属性单位 – CSS高级教程

上一章CSS高级教程请查看：css维度属性

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

理解CSS单位

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

对于非零值，必须指定CSS单元，因为没有默认单元。丢失或忽略一个单元将被视为一个错误。但是，如果值为0，则可以忽略该单位(毕竟，零像素与零英寸是相同的度量)。

注：长度指距离测量。长度是一个数值和一个单位，如10px, 2em, 50%等，数字和单位之间不能出现空格。

相对长度单位

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

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

使用em单位

1em的测量值等于使用它的元素的字体大小属性的计算值。它可以用于垂直或水平测量。

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

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

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

因此，当我们在em中指定字体大小时，1em等于继承的字体大小。因此，字体大小: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。我们的第一步是通过将正文字体大小设置为62.5%来减小整个文档的大小，这将重置字体大小为10px (16px的62.5%)。

这是四舍五入的默认字体大小，以方便px到em的转换。

使用Ex单位

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

x-height之所以如此称呼，是因为它通常等于小写“x”的高度，如下所示。然而，即使对于不包含“x”的字体，也定义了ex。

绝对长度单位

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

绝对物理单位，如英寸、厘米、毫米等，应用于印刷媒体和类似的高分辨率设备。然而，对于屏幕显示，如桌面和低分辨率设备，建议使用像素或em单元。

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

提示：使用em或百分比(%)等相对单位的样式表可以更容易地从一个输出环境扩展到另一个输出环境。