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

YuyingWu發表於2018-07-23
CSS

前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對relative units的講解和舉例可以說相當全面，看完之後發現自己並不太懂CSS相對單位，也希望分享給大家，所以有了這個譯文系列。（若有勘誤或翻譯建議，歡迎 Github PR ^_^）

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

  1. 如何更愉快地使用em
  2. 如何更愉快地使用rem
  3. 視口相關單位的應用
  4. 無單位數字和行高 [本文]
  5. CSS自定義屬性

本文對應的章節目錄：

  • 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。  
 

警告

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

 
line-height屬性最特別的地方，在於同時支援帶單位和不帶單位的值。你應該保持使用不帶單位的數值，因為這樣就可以從父元素繼承。我們在頁面上寫點文字，看看它是怎麼表現的吧。把下面程式碼新增到你的樣式表。

[ 程式碼片段 2.20 繼承line-height的模板 ]

<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，然後文件的其他元素會從這裡繼承。頁面的展示符合預期，不管你對頁面的其他元素的字號大小做了什麼改變。  
 

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

把程式碼片段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相對單位》系列譯文：

  1. 如何更愉快地使用em
  2. 如何更愉快地使用rem
  3. 視口相關單位的應用
  4. 無單位數字和行高 [本文]
  5. 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 初探自定義屬性
  • 總結

原著版權資訊：

作者：Keith J.Grant
書籍：CSS in Depth
章節：Working with relative units

筆者 @Yuying Wu，前端愛好者 / 鼓勵師 / 紐西蘭打工度假 / 鏟屎官。目前就職於某大型電商的B2B前端團隊。

感謝你讀到這裡，對上文若有任何疑問或建議，歡迎留言。

如果你和我一樣喜歡前端，喜歡搗騰獨立部落格或者前沿技術，或者有什麼職業疑問，歡迎關注我以及各種交流哈。

獨立部落格：wuyuying.com
知乎ID：@Yuying Wu
Github：Yuying Wu

相關文章