當前內容所在位置
- 第一章 層疊、優先級與繼承
- 第二章 相對單位
- 2.1 相對單位的威力
- 2.2 em 與 rem
- 2.3 告別像素思維
- 2.4 視口的相對單位
- 2.5 無單位的數值與行高 ??
- 2.6 自定義屬性
- 2.7 本章小結
2.5 無單位的數值與行高
有些屬性允許使用無單位的數值（unitless values，即沒有指定單位的數字）。支持無單位值的屬性（properties）包括 line-height、z-index 和 font-weight（700 相當于 bold 粗體字；400 相當于 normal 常規大小等等）；此外，還可以在任何設置長度單位（如 px、em 或 rem）的地方使用無單位數值 0，因為在這些情況下單位并不重要——0px、0%、0em 均等效。
警告
無單位的
0只能用于長度值和百分比，例如內邊距（paddings）、邊框（borders）和寬度（widths）；0不可用于角度值，例如度，或者與時間相關的值，例如秒。
line-height 屬性比較特殊，其屬性值既可以是帶單位的值，也可以不帶單位。通常應該使用無單位的值，因為二者的繼承方式有所不同。讓我們在頁面中輸入文字，看看不帶單位的行高是什么效果。按如下代碼更新頁面：
代碼清單 2.15 繼承 line-height 的 HTML
<body><p class="about-us">We have built partnerships with small farms around the world tohand-select beans at the peak of season. We then carefully roast insmall batches to maximize their potential.</p>
</body>
接下來給 body 正文元素指定行高，并讓頁面其他元素繼承該行高。可以看到，無論怎么調整頁面字號，行高都會正常顯示（如圖 2.12 所示）：
圖 2.12 圖 為每個后代元素重新計算無單位的行高，往往會產生間距適中的文本行
按代碼清單 2.16 更新樣式表。該段落的行高為繼承過來的 1.2。由于字號為 32px（2em × 16px，瀏覽器默認值），因此本地計算的行高為 38.4px（32px × 1.2）。這將在行與行之間留出適當的空間。
代碼清單 2.16 無單位的數值定義的行高
body {line-height: 1.2; /* 后代元素繼承了無單位的值 */
}
.about-us {font-size: 2em;
}
如果用帶單位的值來設置行高，則可能產生意想不到的結果，如圖 2.13 所示，每行文字會相互重疊。代碼清單 2.17 為對應的 CSS 樣式。
圖 2.13 使用帶單位的行高在繼承給子元素時間距可能達不到預期
代碼清單 2.17 用帶單位的值定義行高，產生了意想不到的結果
body {line-height: 1.2em; /* 后代元素繼承了計算值（19.2px） */
}
.about-us {font-size: 2em; /* 計算值為 32px */
}
這些效果是由于繼承的一個怪異特性所造成的：當一個元素的值是用長度（px、em、rem 等）定義時，其 計算值 會被子元素繼承。當使用 em 等相對單位設置行高時，它們的具體大小會被先計算出來，然后再將該計算值繼承給子元素。對于行高 line-height 屬性，如果子元素的字號與該計算值對應的字號不一致，就會導致像文字重疊這樣意想不到的結果。
而當使用的是無單位數值時，被繼承的是該聲明值，也就是說其計算值將在每個繼承的子元素中重新計算。這樣得出的結果幾乎總是我們所希望的。我們可以用一個無單位的數值給 body 設置行高，之后就不用修改了，除非個別地方需要其他不一樣的行高。
項目實戰)
