CSS Units(单位)

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

了解CSS单位

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

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

注意:长度是指距离测量。的长度是包括数字值,并仅如一个单位的测量10px,2em,50%等。该空白不能数目和单位之间出现。

相对长度单位

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

单位描述
EM当前字体大小
EX
当前字体的x-height

该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”的字体也定义了。

X高度

绝对长度单位

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

单位描述
in英寸– 1英寸等于2.54厘米。
cm厘米。
mm毫米。
ptpoints –在CSS中,一个点定义为1/72英寸(0.353毫米)。
pcpicas – 1pc等于12pt。
px像素单位– 1px等于0.75pt。

绝对物理单位,例如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 */
测试看看‹/›

提示:使用相对单位(例如em百分比(%))的样式表可以更容易地从一种输出环境缩放到另一种输出环境。