CSS 單位

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

瞭解 CSS 單位

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

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

注意: 長度是指距離測量。長度包括數字值,後面加單位,比如 10px2em50% 等。數字和單位之間不能出現空白。

相對長度單位

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

單位 描述
em 當前的字型大小
ex 當前字型的 x 高度

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

使用 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-size62.5% 來減小整個文件的大小,這會將字型大小重置為 10px(16px 的 62.5%)。

這是預設 font-size 的四捨五入,方便 pxem 的轉換。

使用 ex 單位

ex 單位等於當前字型的 x 高度。

所謂的 x 高度是因為它通常等於小寫 x 的高度,如下所示。但是, ex 即使對於不包含 x 的字型,也會定義的。

X 高度

絕對長度單位

絕對長度單位相對於彼此固定。它們高度依賴於輸出介質,因此在輸出環境已知時主要有用。絕對單位由物理單位(的 incmmmptpc)和 px 單位。

單位 描述
in 英寸 - 1 英寸等於 2.54 釐米。
cm 釐米。
mm 毫米。
pt points - 在 CSS 中,一個點定義為 1/72 英寸(0.353mm)。
pc picas - 1pc 等於 12pt。
px 畫素單位 - 1px 等於 0.75pt。

絕對物理單位,例如 incmmm 等應被用於列印介質和類似的高解析度的裝置。然而,對於桌面和低解析度裝置等螢幕顯示,建議使用畫素或 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 或百分比 %)的樣式表可以更輕鬆地從一個輸出環境擴充套件到另一個輸出環境。