CSS 單位

單位用於在 CSS 屬性中指定非零長度值。

瞭解 CSS 單位

測量長度的單位可以是絕對的，例如畫素，點等，也可以是相對的，例如百分比（%）和 em 單位。

指定 CSS 單位對於非零值是必須的，因為沒有預設單位。丟失或忽略單位將被視為錯誤。但是，如果該值為 0，則可以省略該單位（畢竟，零畫素與零英寸是一樣的）。

注意： 長度是指距離測量。長度包括數字值，後面加單位，比如 10px、2em、50% 等。數字和單位之間不能出現空白。

相對長度單位

相對長度單位指定相對於另一個長度屬性的長度。相對單位是：

em 和 ex 單位取決於套用至元素的字型大小。

使用 em 單位

1em 的值等於使用它的元素的 font-size 屬性的計算值。它可用於垂直或水平測量。

例如，如果 font-size 元素設定為 16px，並且 line-height 設定為 2.5em，則 line-height 畫素計算值為：2.5 x 16px = 40px

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

當在 font-size 屬性本身的值中指定 em 時會發生異常，在這種情況下，它引用父元素的字型大小。

因此，當我們用 em 指定字型大小時，1em 繼承自 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 單位

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 */

提示： 使用相對單位（如 em 或百分比 %）的樣式表可以更輕鬆地從一個輸出環境擴充套件到另一個輸出環境。