国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Airmusic / 3538人閱讀

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

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

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

如何更愉快地使用em

如何更愉快地使用rem

視口相關單位的應用

無單位數字和行高 [本文]

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的模板 ]


  

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

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

把代碼片段2.21的內容添加到你的樣式表。段落（

）繼承了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相對單位》系列譯文：

如何更愉快地使用em

如何更愉快地使用rem

視口相關單位的應用

無單位數字和行高 [本文]

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113524.html

相關文章

  • 視口相關單位的應用 —— 別說你懂CSS相對單位

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

    lbool 評論0 收藏0

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

    摘要：前段時間試譯了的好書，其中的第二章，書中對的講解和舉例可以說相當全面，看完之后發現自己并不太懂相對單位，也希望分享給大家，所以有了這個譯文系列。 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相對單位

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

    Snailclimb 評論0 收藏0

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

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

    gekylin 評論0 收藏0

  • CSS學習筆記(二) 字體和文本

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

    silenceboy 評論0 收藏0

發表評論

0條評論

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