前段時(shí)間試譯了Keith J.Grant的CSS好書(shū)《CSS in Depth》砚亭，其中的第二章《Working with relative units》在刺，書(shū)中對(duì)relative units的講解和舉例可以說(shuō)相當(dāng)全面，看完之后發(fā)現(xiàn)自己并不太懂CSS相對(duì)單位睹耐，也希望分享給大家刑然，所以有了這個(gè)譯文系列缔刹。（若有勘誤或翻譯建議振湾，歡迎 Github PR ^_^）
《別說(shuō)你懂CSS相對(duì)單位》系列譯文：
- 如何更愉快地使用em
- 如何更愉快地使用rem
- 視口相關(guān)單位的應(yīng)用
- 無(wú)單位數(shù)字和行高 [本文]
- CSS自定義屬性
本文對(duì)應(yīng)的章節(jié)目錄：
- 2.5 不帶單位的數(shù)字（unitless number）和行高（line-height）
譯者說(shuō)：本節(jié)的內(nèi)容比較短杀迹，但是內(nèi)容相對(duì)獨(dú)立，故沒(méi)有跟其他小節(jié)合并押搪。
2.5 無(wú)單位數(shù)字（unitless number）和行高（line-height）
有一些屬性可以接收不帶單位的數(shù)值（意思就是一個(gè)不帶長(zhǎng)度單位的數(shù)字）树酪，如line-height、z-index和font-weight（700等于bold大州，400等于normal嗅回，如此類(lèi)推）。你也可以在需要長(zhǎng)度單位的地方（如px摧茴、em、rem）使用一個(gè)不帶單位的0埂陆，因?yàn)殚L(zhǎng)度已經(jīng)是0了苛白，帶不帶單位也無(wú)所謂了 —— 0px 等于 0% 等于 0em。
?
?
警告
不帶單位的
0只可以表示長(zhǎng)度單位和百分比的值焚虱，譬如padding购裙、border和width。而對(duì)于一些特殊的情況鹃栽，如度數(shù)（degrees）或者像秒這樣基于時(shí)間的值（time-based values）躏率，是不可以使用不帶單位的0的。
?
line-height屬性最特別的地方民鼓，在于同時(shí)支持帶單位和不帶單位的值薇芝。你應(yīng)該保持使用不帶單位的數(shù)值，因?yàn)檫@樣就可以從父元素繼承丰嘉。我們?cè)陧?yè)面上寫(xiě)點(diǎn)文字夯到，看看它是怎么表現(xiàn)的吧。把下面代碼添加到你的樣式表饮亏。
[ 代碼片段 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聲明一個(gè)line-height耍贾，然后文檔的其他元素會(huì)從這里繼承阅爽。頁(yè)面的展示符合預(yù)期，不管你對(duì)頁(yè)面的其他元素的字號(hào)大小做了什么改變荐开。
?
?
[ 圖 2.11 不帶單位的行高付翁，會(huì)在每個(gè)后代元素下重新計(jì)算出實(shí)際值 ]
把代碼片段2.21的內(nèi)容添加到你的樣式表。段落（<p>）繼承了1.2的行高晃听。因?yàn)樽痔?hào)是32px（2em * 16px百侧，瀏覽器默認(rèn)字號(hào)大小）杂伟，所以本地的行高計(jì)算值是38.4px（32px * 1.2）移层。這會(huì)給段落的行間距留下比較合適的空間。
?
[ 代碼片段 2.21 對(duì)line-height使用不帶單位的值 ]
body {
line-height: 1.2; 1
}
.about-us {
font-size: 2em;
}
- 1 后代元素繼承不帶單位的值
?
如果你給行高設(shè)定了一個(gè)帶單位的值赫粥，你可能會(huì)得到意想不到的結(jié)果观话，如圖2.12那樣，行間文字互相重疊了越平，代碼片段2.22則是造成這個(gè)結(jié)果的CSS代碼频蛔。
[ 圖 2.12 繼承行高造成的行間互疊 ]
?
[ 代碼片段 2.22 帶單位的行高值造成意外的結(jié)果 ]
body {
line-height: 1.2em; 1
}
.about-us {
font-size: 2em; 2
}
- 1 后代元素繼承了計(jì)算值（19.2px）
- 2 等于32px
?
這樣的結(jié)果源于一次奇怪的繼承：當(dāng)一個(gè)元素是用帶單位的值聲明的，那么它的后代元素會(huì)繼承計(jì)算結(jié)果值秦叛。當(dāng)行高屬性是用類(lèi)似em來(lái)聲明時(shí)晦溪，它的值會(huì)先被計(jì)算，然后計(jì)算后的值會(huì)傳到任何繼承它的后代元素挣跋。對(duì)于line-height這個(gè)屬性來(lái)說(shuō)三圆，如果子元素有跟父元素不一樣字號(hào)大小的情況，就會(huì)導(dǎo)致意想不到的結(jié)果避咆，譬如文字間的遮擋舟肉。
?
長(zhǎng)度 —— CSS中用來(lái)描述距離測(cè)量的正式用語(yǔ)。它是一個(gè)帶單位的數(shù)字查库，如5px路媚。長(zhǎng)度有兩種類(lèi)型：絕對(duì)的和相對(duì)的。百分比跟長(zhǎng)度很類(lèi)似樊销，但嚴(yán)格來(lái)說(shuō)整慎，百分比不能叫長(zhǎng)度。
?
當(dāng)你（對(duì)某個(gè)屬性）使用不帶單位的數(shù)字围苫，聲明的值會(huì)被繼承裤园，也就是說(shuō)這個(gè)值會(huì)在子元素中用來(lái)重新計(jì)算子元素域下的值，而這個(gè)通常是你想要的效果够吩。使用不帶單位的數(shù)字比然，可以讓你在body上設(shè)定一個(gè)行高，然后什么都不用管周循，頁(yè)面上其他元素會(huì)默認(rèn)繼承强法，除非在某個(gè)特定的地方你想要做一個(gè)額外的樣式万俗。
（未完待續(xù)，還有最后一篇《CSS Variables》）
《別說(shuō)你懂CSS相對(duì)單位》系列譯文：
- 如何更愉快地使用em
- 如何更愉快地使用rem
- 視口相關(guān)單位的應(yīng)用
- 無(wú)單位數(shù)字和行高 [本文]
- CSS自定義屬性
章節(jié)：
- 2.1 相對(duì)單位值的魔力
- 2.1.1 完美像素設(shè)計(jì)（pixel-perfect design）的掙扎
- 2.1.2 完美像素網(wǎng)頁(yè)的終結(jié)
- 像素（pixel）饮怯、點(diǎn)（point）和pc（pica）
- 2.2 em和rem
- 2.2.1 對(duì)font-size使用em
- 當(dāng)我們?cè)谝粋€(gè)元素內(nèi)用em同時(shí)聲明font-size和其他屬性
- 字號(hào)收縮問(wèn)題
- 2.2.2 對(duì)font-size使用rem
- 可用性：對(duì)font-size使用相對(duì)長(zhǎng)度單位
- 2.2.1 對(duì)font-size使用em
- 2.3 停止使用像素思維去思考
- 2.3.1 設(shè)置一個(gè)合理的字號(hào)默認(rèn)值
- 2.3.2 讓這個(gè)面板變得“響應(yīng)式”
- 2.3.3 調(diào)整單個(gè)組件的大小
- 2.4 視口相關(guān)單位（viewport-relative units）
- CSS3
- 2.4.1 在font-size上使用vw
- 2.4.2 在font-size上使用calc()
- 2.5 不帶單位的數(shù)字（unitless number）和行高（line-height）
- 2.6 自定義屬性（也叫“CSS變量”）
- 2.6.1 動(dòng)態(tài)改變自定義屬性的值
- 2.6.2 通過(guò)JavaScript改變自定義屬性的值
- 2.6.3 初探自定義屬性
- 總結(jié)
原著版權(quán)信息：
作者：Keith J.Grant
書(shū)籍：CSS in Depth
章節(jié)：Working with relative units
筆者 @Yuying Wu闰歪，前端愛(ài)好者 / 鼓勵(lì)師 / 新西蘭打工度假 / 鏟屎官。目前就職于某大型電商的B2B前端團(tuán)隊(duì)蓖墅。
感謝你讀到這里库倘，對(duì)上文若有任何疑問(wèn)或建議，歡迎留言论矾。
如果你和我一樣喜歡前端教翩，喜歡搗騰獨(dú)立博客或者前沿技術(shù)，或者有什么職業(yè)疑問(wèn)贪壳，歡迎關(guān)注我以及各種交流哈饱亿。
獨(dú)立博客：wuyuying.com
知乎ID：@Yuying Wu
Github：Yuying Wu
