Unidades CSS (Unidades)

单位用于在 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 pixels 的计算值是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;
}

Vamos entender o significado total deste código. Em todos os navegadores modernos, o tamanho padrão da fonte é16px. Nosso primeiro passo é definir o texto font-size para62.5porcentagem para diminuir o tamanho do documento todo, o que resetará o tamanho da fonte para10px (16px é62.5porcentagem ()

Este é o valor padrão arredondadofont-sizepara facilitar a conversão de px para em.

Usar dispositivos de segurança

A unidade ex é igual à altura x da fonte atual.

Chama-se altura x porque geralmente é igual à altura da letra minúscula 'x', como mostrado a seguir. No entanto, o ex define até mesmo para fontes que não contêm 'x'.

Unidades de comprimento absolutas

Unidades de comprimento absolutas estão fixas entre si. Elas dependem fortemente do meio de saída, portanto, são especialmente úteis quando o ambiente de saída é conhecido. As unidades absolutas são compostas por unidades físicas (in, cm, mm, pt, pc) e unidades px.

Unidades físicas absolutas, como in, cm, mm, etc., devem ser usadas para suportes de impressão e dispositivos de alta resolução semelhantes. Para displays de computador e dispositivos de baixa resolução, é recomendável usar unidades de pixels ou 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　*/