Unités CSS

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

了解 CSS 单位

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

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

相对长度单位

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

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

使用 Em 单位

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

例如，如果 font-size 将元素的设置为16px 并line-height设置为2.5em，则 line-height in 像素的计算值是2.5x16px =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: first-letter {
　　　　font-size:　3em;
　　　　font-weight: bold;
}

Laissez-nous comprendre le sens complet de ce code. Dans tous les navigateurs modernes, la taille par défaut des polices est16px. Notre première étape consiste à définir le texte font-size pour62.5％ pour réduire la taille du document entier, ce qui réinitialisera la taille de la police à10px (16px de62.5％).

C'est le rounding par défautfont-sizepour faciliter la conversion px en em.

Utiliser des dispositifs de prévention des explosions

L'unité ex est égale à la hauteur x de la police courante.

Il est appelé hauteur x car il correspond généralement à la hauteur de la petite lettre "x", comme suit. Cependant, l'unité ex est également définie pour les polices qui ne contiennent pas de "x".

Unités de longueur absolues

Les unités de longueur absolues sont fixes les unes par rapport aux autres. Elles dépendent fortement du support de sortie, elles sont donc particulièrement utiles lorsque l'environnement de sortie est connu. Les unités absolues sont composées d'unités physiques (in, cm, mm, pt, pc) et des unités px.

Unités de longueur physiques absolues, telles que in, cm, mm, devraient être utilisées pour les supports d'impression et les appareils à haute résolution similaires. Pour les écrans d'ordinateurs et les appareils à basse résolution, il est recommandé d'utiliser des unités de pixels ou d'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　*/