無單位數字和行高 —— 別說你懂CSS相對單位

時間 2019-11-08

標籤單位數字別說 css 相對欄目 CSS 简体版

原文原文鏈接

前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對relative units的講解和舉例能夠說至關全面，看完以後發現本身並不太懂CSS相對單位，也但願分享給你們，因此有了這個譯文系列。（如有勘誤或翻譯建議，歡迎 Github PR ^_^）css

《別說你懂CSS相對單位》系列譯文：前端

本文對應的章節目錄：git

2.5 不帶單位的數字（unitless number）和行高（line-height）

譯者說：本節的內容比較短，可是內容相對獨立，故沒有跟其餘小節合併。

2.5 無單位數字（unitless number）和行高（line-height）

有一些屬性能夠接收不帶單位的數值（意思就是一個不帶長度單位的數字），如line-height、z-index和font-weight（700等於bold，400等於normal，如此類推）。你也能夠在須要長度單位的地方（如px、em、rem）使用一個不帶單位的0，由於長度已是0了，帶不帶單位也無所謂了 —— 0px 等於 0% 等於 0em。

github

警告
不帶單位的0只能夠表示長度單位和百分比的值，譬如padding、border和width。而對於一些特殊的狀況，如度數（degrees）或者像秒這樣基於時間的值（time-based values），是不可使用不帶單位的0的。瀏覽器

line-height屬性最特別的地方，在於同時支持帶單位和不帶單位的值。你應該保持使用不帶單位的數值，由於這樣就能夠從父元素繼承。咱們在頁面上寫點文字，看看它是怎麼表現的吧。把下面代碼添加到你的樣式表。less

[ 代碼片斷 2.20 繼承line-height的模板 ]post

<body>
  <p class="about-us">
    We have built partnerships with small farms around the world to
    hand-select beans at the peak of season. We then carefully roast in
    small batches to maximize their potential.
  </p>
</body>

給body聲明一個line-height，而後文檔的其餘元素會從這裏繼承。頁面的展現符合預期，無論你對頁面的其餘元素的字號大小作了什麼改變。

ui

[ 圖 2.11 不帶單位的行高，會在每一個後代元素下從新計算出實際值 ]spa

把代碼片斷2.21的內容添加到你的樣式表。段落（<p>）繼承了1.2的行高。由於字號是32px（2em 16px，瀏覽器默認字號大小），因此本地的行高計算值是38.4px（32px 1.2）。這會給段落的行間距留下比較合適的空間。翻譯

[ 代碼片斷 2.21 對line-height使用不帶單位的值 ]

body {
  line-height: 1.2;               1
}

.about-us {
  font-size: 2em;
}

1 後代元素繼承不帶單位的值

若是你給行高設定了一個帶單位的值，你可能會獲得意想不到的結果，如圖2.12那樣，行間文字互相重疊了，代碼片斷2.22則是形成這個結果的CSS代碼。

[ 圖 2.12 繼承行高形成的行間互疊 ]

[ 代碼片斷 2.22 帶單位的行高值形成意外的結果 ]

body {
  line-height: 1.2em;             1
}

.about-us {
  font-size: 2em;                 2
}

1 後代元素繼承了計算值（19.2px）
2 等於32px

這樣的結果源於一次奇怪的繼承：當一個元素是用帶單位的值聲明的，那麼它的後代元素會繼承計算結果值。當行高屬性是用相似em來聲明時，它的值會先被計算，而後計算後的值會傳到任何繼承它的後代元素。對於line-height這個屬性來講，若是子元素有跟父元素不同字號大小的狀況，就會致使意想不到的結果，譬如文字間的遮擋。

長度 —— CSS中用來描述距離測量的正式用語。它是一個帶單位的數字，如5px。長度有兩種類型：絕對的和相對的。百分比跟長度很相似，但嚴格來講，百分比不能叫長度。

當你（對某個屬性）使用不帶單位的數字，聲明的值會被繼承，也就是說這個值會在子元素中用來從新計算子元素域下的值，而這個一般是你想要的效果。使用不帶單位的數字，可讓你在body上設定一個行高，而後什麼都不用管，頁面上其餘元素會默認繼承，除非在某個特定的地方你想要作一個額外的樣式。

（未完待續，還有最後一篇《CSS Variables》）

《別說你懂CSS相對單位》系列譯文：

章節：

2.1 相對單位值的魔力
- 2.1.1 完美像素設計（pixel-perfect design）的掙扎
- 2.1.2 完美像素網頁的終結
- 像素（pixel）、點（point）和pc（pica）
2.2 em和rem
- 2.2.1 對font-size使用em
  - 當咱們在一個元素內用em同時聲明font-size和其餘屬性
  - 字號收縮問題
- 2.2.2 對font-size使用rem
  - 可用性：對font-size使用相對長度單位
2.3 中止使用像素思惟去思考
- 2.3.1 設置一個合理的字號默認值
- 2.3.2 讓這個面板變得「響應式」
- 2.3.3 調整單個組件的大小
2.4 視口相關單位（viewport-relative units）
- CSS3
- 2.4.1 在font-size上使用vw
- 2.4.2 在font-size上使用calc()
2.5 不帶單位的數字（unitless number）和行高（line-height）
2.6 自定義屬性（也叫「CSS變量」）
- 2.6.1 動態改變自定義屬性的值
- 2.6.2 經過JavaScript改變自定義屬性的值
- 2.6.3 初探自定義屬性
總結