你所不知的七個css單位（高度百分百用vh）

今天，我將要向你介紹一些你以前可能不知道的css工具。這些工具都是計量單位，就像畫素或者相對單位,但是很可能你從來沒聽說過它們！讓我們一**竟吧。

我們將從你已經熟悉的東西開始。em單位被定義為當前字型大小。例如，如果你在body元素上設定乙個字型大小，那麼在body元素內的任何子元素的em值都等於這個字型大小。

>

class
="test"
>
testdiv
>
body
>
body 
div 在這裡，我們說這個div
將有乙個1.2em的font-size。它是所繼承的字型大小的1.2倍，在這個例子中為14px。結果為16.8px.
但是，當你在每個元素內都級聯em定義的字型大小將會發生什麼？在下面的**片段中我們應用和上面一模一樣的css.每個div從它們的父節點繼承字型大小，帶給我們逐漸增加的字型大小。
>
>
test 
>
test 
>
test 
div>
div>
div>
body
>
雖然在某些情況下可能需要這個，但是通常你可能想基於乙個唯一的度量標準來按比例縮放。在這種情況下，你應該用rem。rem中的"r"代表"root"；這等同於font-size基於根元素進行設定；在大多數情況下根元素為html元素。
html
div

rem不是只對定義字型大小有用。比如，你可以使用rem把整個網格系統或者ui樣式庫基於html根元素的字型大小上,然後在特定的地方使用em比例縮放。這將帶給你更加可**的字型大小和比例縮放。

.container

"rem(root em)單位"的相容性列表。

響應式網頁設計技術很大程度上依賴於比例規則。然而，css比例不總是每個問題的最佳解決方案。css寬度是相對於最近的包含父元素。如果你想使用顯示視窗的寬度或高度而不是父元素的寬度將會怎麼樣？這正是vh和vw單位所提供的。

vh等於viewport高度的1/100.例如，如果瀏覽器的高是900px,1vh求得的值為9px。同理，如果顯示視窗寬度為750px,1vw求得的值為7.5px。

這些規則表面上看起來有無盡的用途。例如，做乙個佔滿高度的或者接近佔滿高度的幻燈片，可以用乙個非常簡單的方法實現，只要用一行css：

.slide

視窗單位:vw,vh"的相容性列表。

vh和vm總是與視口的高度和寬度有關，與之不同的，vmin和vmax是與這次寬度和高度的最大值或最小值有關，取決於哪個更大和更小。例如，如果瀏覽器設定為1100px寬、700px高，1vmin會是7px,1vmax為11px。然而，如果寬度設定為800px，高度設定為1080px，1vmin將會等於8px而1vmax將會是10.8px。

所以你什麼時候可能用到這些值？

設想你需要乙個總是在螢幕上可見的元素。使用高度和寬度設定為低於100的vmin值將可以實現這個效果。例如，乙個正方形的元素總是至少接觸螢幕的兩條邊可能是這樣定義的：

如果你需要乙個總是覆蓋可視視窗的正方形(一直接觸螢幕的四條邊),使用相同的規則只是把單位換成vmax。

這些規則的組合提供了乙個非常靈活的方式，用新的、令人興奮的方式利用你的可視視窗的大小。

viewport units: vmin, vmax "相容列表。

ex和ch單位，與em和rem相似，依賴於當前字型和字型大小。然而，與em和rem不同的是，這兩個單位只也依賴於font-family，因為它們被定為基於特殊字型的法案。

ch單位，或者字元單位被定義為0字元的寬度的「先進的尺寸」。在"eric meyer's的部落格"中可以找到一些非常有趣的討論關於這意味著什麼，但是基本的概念是，給定乙個等寬字型的字型，乙個n個字元單位寬的盒子，比如width：40ch;,可以一直容納乙個有40個字元的應用那個特定字型的字串。雖然這個特殊規則的傳統用途與列出盲文有關，但是這裡創造性的可行性一定會超越這些簡單的用途。

ex單位被定義為"當前字型的x-height或者乙個em的一半"。給定的字型的x-height是指那個字型的小寫x的高度。通常，這是這個字型的中間的標誌。

x-height:小寫字母x的高度(閱讀更多關於the anatomy of web typography)

對於這種單位有很多的用途，大多數是用於排版的微調。例如，sup元素,代表上標，可以用相對定位和乙個1ex的底部值在行內被推高。類似地，你可以拉低乙個下標元素。瀏覽器預設支援這些利用上標和下標特性的vertical-align規則，但是如果你想要更精細的控制，你可以像這樣更明確的處理樣式：

sup

sub

密切關注css的持續發展和擴張是非常重要的，一邊在你的工具集裡知道所有的工具。也許你會遇到乙個特殊的問題需要乙個意想不到的解決方案，利用這些更隱蔽的計量單位之一。花時間去閱讀新規範，記錄來自好的資源的新聞資訊！

著作權歸作者所有。

原文:

w3cplus.com

七個你可能不了解的CSS單位

我們很容易無法擺脫的使用我們所熟悉的css技術，當新的問題出現，這樣會使我們處於不利的地位。隨著web繼續的發展，對新的解決方案的需求也會繼續增大。因此，作為網頁設計師和前端開發人員，我們別無選擇，只有去了解我們的工具集並且熟悉它。這意味著我們還要了解一些特殊的工具 那些不經常使用的，但是當需要它們...

你所不知道的CSS浮動小知識

前面的話 浮動最早的使用是出自right 用於文字環繞的排版處理。如今浮動作為css中常用的布局方式，本文將就浮動內容做詳細介紹和梳理 float 浮動 浮動元素脫離普通流，然後按照指定方向，向左或者向右移動，碰到父級邊界或者另外乙個浮動元素停止 值 left right none inherit ...

你所不知道的 CSS 負值技巧與細節

假設我們有這樣乙個簡單的結構 div div 修改 outline offset 到乙個合適的負值 那麼在恰當的時候，outline 邊框就會向內縮排為乙個加號。經過一番嘗試，修改上述 div 的 outline offset為 118px。div codepen demo 使用outline實現加...