成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Airmusic / 3553人閱讀

摘要：無單位數(shù)字和行高有一些屬性可以接收不帶單位的數(shù)值意思就是一個不帶長度單位的數(shù)字，如和等于，等于，如此類推。警告不帶單位的只可以表示長度單位和百分比的值，譬如和。段落繼承了的行高。長度有兩種類型絕對的和相對的。

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

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

如何更愉快地使用em

如何更愉快地使用rem

視口相關(guān)單位的應(yīng)用

無單位數(shù)字和行高 [本文]

CSS自定義屬性

本文對應(yīng)的章節(jié)目錄：

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

譯者說：本節(jié)的內(nèi)容比較短，但是內(nèi)容相對獨立，故沒有跟其他小節(jié)合并。
2.5 無單位數(shù)字（unitless number）和行高（line-height）

有一些屬性可以接收不帶單位的數(shù)值（意思就是一個不帶長度單位的數(shù)字），如line-height、z-index和font-weight（700等于bold，400等于normal，如此類推）。你也可以在需要長度單位的地方（如px、em、rem）使用一個不帶單位的0，因為長度已經(jīng)是0了，帶不帶單位也無所謂了 —— 0px 等于 0% 等于 0em。
?
?

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

?
line-height屬性最特別的地方，在于同時支持帶單位和不帶單位的值。你應(yīng)該保持使用不帶單位的數(shù)值，因為這樣就可以從父元素繼承。我們在頁面上寫點文字，看看它是怎么表現(xiàn)的吧。把下面代碼添加到你的樣式表。

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


  

    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.

?
給body聲明一個line-height，然后文檔的其他元素會從這里繼承。頁面的展示符合預(yù)期，不管你對頁面的其他元素的字號大小做了什么改變。
?
?

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

把代碼片段2.21的內(nèi)容添加到你的樣式表。段落（

）繼承了1.2的行高。因為字號是32px（2em 16px，瀏覽器默認(rèn)字號大小），所以本地的行高計算值是38.4px（32px 1.2）。這會給段落的行間距留下比較合適的空間。

?

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

body {
  line-height: 1.2;               1
}

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

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

?
如果你給行高設(shè)定了一個帶單位的值，你可能會得到意想不到的結(jié)果，如圖2.12那樣，行間文字互相重疊了，代碼片段2.22則是造成這個結(jié)果的CSS代碼。

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

?
[ 代碼片段 2.22 帶單位的行高值造成意外的結(jié)果 ]

body {
  line-height: 1.2em;             1
}

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

1 后代元素繼承了計算值（19.2px）

2 等于32px

?
這樣的結(jié)果源于一次奇怪的繼承：當(dāng)一個元素是用帶單位的值聲明的，那么它的后代元素會繼承計算結(jié)果值。當(dāng)行高屬性是用類似em來聲明時，它的值會先被計算，然后計算后的值會傳到任何繼承它的后代元素。對于line-height這個屬性來說，如果子元素有跟父元素不一樣字號大小的情況，就會導(dǎo)致意想不到的結(jié)果，譬如文字間的遮擋。

?

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

?
當(dāng)你（對某個屬性）使用不帶單位的數(shù)字，聲明的值會被繼承，也就是說這個值會在子元素中用來重新計算子元素域下的值，而這個通常是你想要的效果。使用不帶單位的數(shù)字，可以讓你在body上設(shè)定一個行高，然后什么都不用管，頁面上其他元素會默認(rèn)繼承，除非在某個特定的地方你想要做一個額外的樣式。

（未完待續(xù)，還有最后一篇《CSS Variables》）

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

如何更愉快地使用em

如何更愉快地使用rem

視口相關(guān)單位的應(yīng)用

無單位數(shù)字和行高 [本文]

CSS自定義屬性

章節(jié)：

2.1 相對單位值的魔力

2.1.1 完美像素設(shè)計（pixel-perfect design）的掙扎

2.1.2 完美像素網(wǎng)頁的終結(jié)

像素（pixel）、點（point）和pc（pica）

2.2 em和rem

2.2.1 對font-size使用em

當(dāng)我們在一個元素內(nèi)用em同時聲明font-size和其他屬性

字號收縮問題

2.2.2 對font-size使用rem

可用性：對font-size使用相對長度單位

2.3 停止使用像素思維去思考

2.3.1 設(shè)置一個合理的字號默認(rèn)值

2.3.2 讓這個面板變得“響應(yīng)式”

2.3.3 調(diào)整單個組件的大小

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 動態(tài)改變自定義屬性的值

2.6.2 通過JavaScript改變自定義屬性的值

2.6.3 初探自定義屬性

總結(jié)

原著版權(quán)信息：
作者：Keith J.Grant  
書籍：CSS in Depth  
章節(jié)：Working with relative units

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

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

如果你和我一樣喜歡前端，喜歡搗騰獨立博客或者前沿技術(shù)，或者有什么職業(yè)疑問，歡迎關(guān)注我以及各種交流哈。

獨立博客：wuyuying.com
知乎ID：@Yuying Wu
Github：Yuying Wu

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113524.html

相關(guān)文章

  • 視口相關(guān)單位的應(yīng)用 —— 別說你懂CSS相對單位

    摘要：還有視口相關(guān)單位，依賴瀏覽器的視口大小來定義長度的。如果你不熟悉視口相關(guān)單位的話，在這里簡單介紹一下。筆記視口相關(guān)單位對于大多數(shù)瀏覽器還是一項比較新的特性，所以當(dāng)你試圖把這個特性和其他樣式混搭時，有可能會有一些很奇怪的。 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對rel...

    lbool 評論0 收藏0

  • CSS自定義屬性 —— 別說你懂CSS相對單位

    摘要：前段時間試譯了的好書，其中的第二章，書中對的講解和舉例可以說相當(dāng)全面，看完之后發(fā)現(xiàn)自己并不太懂相對單位，也希望分享給大家，所以有了這個譯文系列。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with r...

    JinB 評論0 收藏0

  • 如何更愉快地使用rem —— 別說你懂CSS相對單位

    摘要：值得注意的是，這個設(shè)置對使用或其他絕對單位定義的字號大小無效。事實上，提供了一個在和間的相對單位折中解決方案，而且更易于使用。圖使用相對單位和繼承字號的面板下面是模板，加到你的頁面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其...

    Snailclimb 評論0 收藏0

  • 如何更愉快地使用em —— 別說你懂CSS相對單位

    摘要：相對單位的值會根據(jù)外部影響因素的變化而變化。很自然，相對單位使用起來會比較困難。在本章中，我將揭開相對單位的神秘面紗。重點來了，使用相對單位聲明的值會由瀏覽器轉(zhuǎn)化為一個絕對值，我們稱之為計算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《W...

    gekylin 評論0 收藏0

  • CSS學(xué)習(xí)筆記(二) 字體和文本

    摘要：理解字體和文本屬性，對于創(chuàng)造出專業(yè)水準(zhǔn)的網(wǎng)頁排版非常重要。為字體和文本分別定義了屬性。字體屬性主要描述了一類字體的大小和外觀。還有一種新增的單位字體樣式值示例說明和都表示斜體英文中的斜體主要表示強調(diào)。字體粗細(xì)可能的值，或者和。 理解字體和文本屬性，對于創(chuàng)造出專業(yè)水準(zhǔn)的網(wǎng)頁排版非常重要。一個網(wǎng)站的品質(zhì)如何，有時候只要看看它用的字體就能一目了然。 1.網(wǎng)頁中字體的來源 用戶機...

    silenceboy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<