CSS：7個你可能不認識的單位

時間 2020-04-19

標籤 css 可能不認識單位欄目 CSS 简体版

原文原文鏈接

原文：7 CSS Units You Might Not Know Aboutcss

譯文：7個你可能不知道的CSS單位html

譯者：dwqs前端

衆所周知，當使用CSS技術的時候，很容被一些奇異問題給困住。而當咱們面對新的問題時，這會讓咱們處於很是不利的位置。web

可是，伴隨着Web的發展，新的解決方案也在慢慢成熟。所以，做爲一個Web設計和前端開發人員，除了對咱們使用的工具或屬性很是瞭解並能熟練運用，已經別無選擇了。瀏覽器

這也意味着，對於那些特別的工具或屬性，即便日常不多使用，可是當須要的時候，咱們也能很好的把它運用到工做中。ide

今天，我就介紹一些你以前可能不知道的CSS 屬性，是一些例如px和ems測量方面的單位，可是頗有可能你以前都沒聽過這些。一塊兒來看看吧。工具

rem

從與咱們已經熟悉的但很類似的單位開始介紹。em被定義爲相對於當前對象內文本的字體大小。若是你給body元素設置了一個字體大小，那麼body的任何子元素的em值都等於body設置的font-size。佈局

<body>
    <div class="test">Test</div>
</body>



body {
    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

div中的字體大小是1.2em，也就是div從父類元素繼承的字體大小的1.2倍。在這裏，body的字體是14px，那麼div的字體大小是1.2*14=16.8px.字體

可是，若是你用em一層一層級聯得定義嵌套元素的字體大小又會花生什麼事情呢？在下面這一小段代碼裏咱們應用了和上面同樣同樣的CSS，每個div都從它上一級父元素繼承了字體大小，而且逐漸得增長。網站

<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>

雖然在某些地方這正是咱們想要的，可是一般狀況下咱們仍是但願就依賴單一的相對度量單位就好。這時，就應該用rem了，rem中的r表明根元素，它的值就是根元素設置的字體大小。在大多數狀況下，根元素就是html了。

html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}

這樣在上面的那三個嵌套的div娃們的字體大小都是 1.2*14px = 16.8px 了。

適用於網格佈局

Rems不只適用於字體大小，也用於網格佈局。例如，你能夠用基於html根元素字體大小的rem做爲整個網格佈局或者UI庫的大小單位，而後在其餘特定的地方用em單位。這樣將會給你帶來更多的字體大小和伸縮的可控性，

.container {
    width: 70rem; // 70 * 14px = 980px
}

概念上來講，這個方法的思想就是讓你的界面根據你的內容進行縮放。可是，這樣作並非對全部的狀況都有意義。

vh和vw

響應式Web設計對百分比規則有很大的依賴性。然而，對於每個問題，CSS百分比並非最好的解決方案。CSS寬度是相對於包含它的最近的父元素的寬度的。若是你想使用的是視口的高度或寬度，而不是父元素的，那要腫麼辦呢？vh和vw就能知足這個需求了。

1vh等於1%的視口高度。例如，瀏覽器高度是900px，那麼1vh = 900*1%=9px，同理，若視口寬度是750px,則1vw是7.5px。

它們的用途很普遍。好比，咱們用很簡單的方法只用一行CSS代碼就實現同屏幕等高的框。

.slide {
    height: 100vh;
}

假設你要來一個和屏幕同寬的標題，你只要設置這個標題的font-size的單位爲vm，那標題的字體大小就會自動根據瀏覽器的寬度進行縮放，以達到字體和viewport大小同步的效果，有木有？！

vmin和vmax

vh和vw是相對於視口的寬度和高度，而vmin和vmax則關於視口高度和寬度二者的最小或者最大值。例如，若是瀏覽器的高寬分別爲700px和1100px，則1vmin=7px，1vmax=11px；若是高寬分別是1080px和800px,則1vmin=8px,1vmax=10.8px。

那麼何時須要這些值呢？

假設有一個元素，你須要讓它始終在屏幕上可見。只要對其高度和寬度使用vmin單位，並賦予其低於100的值就能夠作到了。例如，能夠這樣定義一個至少有兩個邊觸摸到屏幕的方形：

.box {
    height: 100vmin;
    width: 100vmin;
}

若是你要讓這個方形框框始終鋪滿整個視口的可見區域（四邊始終觸摸到屏幕的四邊）：

.box {
    height: 100vmax;
    width: 100vmax;
}

結合使用這些單位能夠爲咱們提供一個新穎有意思的方式來靈活地利用咱們視口的大小。

ex和ch

單位ex和ch，就跟em和rem相似，取決於當前的字體和字體大小。然而，跟em和rem不一樣的是，ex和ch是基於字體的度量單位，依賴於設定的字體。

單位ch一般被定義爲數字0的寬度。你能夠在Eric Meyers的博客裏找到關於它的一些有意思的討論，例如將一個等寬字體的字母」N」的寬度設置爲40ch,那麼在另外一種類型的字體裏它卻能夠包含40個字母。這個單位的傳統用途主要是盲文的排版，可是除此以外，確定還有能夠應用他的地方。

單位ex定義爲當前字體的小寫x的高度或者1/2的em。不少時候，它是字體的中間標誌。

x-height; the height of the lower case x（read more about The Anatomy of Web Typography）

他們有不少的用途，可是大部分用於版式的微調。好比，sup元素（上角標字符），能夠利用position:relative;bottom: 1ex;實現，同理，能夠實現一個下角標文字。瀏覽器默認的處理方式是利用上標和下標特定垂直對齊規則，可是若是你想更細粒度更精確得控制，你能夠像下面這樣作：

sup {
    position: relative;
    bottom: 1ex;
}
sub {
    position: relative;
    bottom: -1ex;
}

總結

持續關注CSS的發展和擴展是很是重要的，這樣你才能熟練運用你工具箱中特定的工具。說不定未來你遇到的某個特殊的問題就須要使用這些複雜的單位來解決。花點時間去閱讀新的技術規範，註冊訂閱一些不錯的網站或者資源，相似 cssweekly這樣的。固然不要忘記如今就去註冊像Tuts+這樣的網站來獲取每週的更新，課程，免費教程還有資源！