關於CSS中細節的詳解

　　這樣寫是沒問題，直到有個子項目需要設定一個不同的字型大小，比如，在這樣的標籤當中：

The cat sat on the mat.

　　如果你要設定span的字型大小為1.2em，你需要做什嗎？拿出計算機，算算1.2除以1.4是多少，結果如下：

p span { font-size: 0.85714em; }

　　這個問題不局限於em。如果用百分比來建立響應式的流式布局網站，而百分比是與容器相關的，所以，如果要定義一個元素為它的容器的40%，它的高是75%，寬則需要設定為53.33333%。
　　很明顯，這很不方便。
根相關的長度單位
　　為了修複字型大小定義的問題，現在可以使用單位rem（root em）。rem同樣是相對單位，但是它所對應的是固定的基本值，這個固定的基本值也就是文檔的根項目的字型大小（在HTML檔案中，就是html元素）。假設和上個例子一樣，同樣設定10px的字型大小為根項目的大小，那麼CSS這樣寫就OK了：

p { font-size: 1.4rem; } p span { font-size: 1.2rem; }

　　這兩個CSS規則都是相對於根項目的字型大小，這樣的代碼更加優雅和簡便，特別是在設定簡單的數值如10px或者12px的時候。這樣和使用px值很相似，不同點在於rem是可擴充的。
　　在整篇文章介紹的特性中，rem特性相對來說是相容性比較好，進階瀏覽器都能支援，包括IE9在內，除了Opera Mobile。
視窗相關的長度單位
　　覺得rem單位很酷吧，如果還有另外一組單位能解決百分比的問題，那就更酷了。它和rem的道理相似，不同點在於，它相對的不是文檔的根項目，而是相對於裝置視窗本身的大小。
　　這兩個單位就是vh和vw，即是相對於視窗大小的高和寬。每個單位在前面加上數字，代表的是多少個百分比。

p { height: 50vh; }

　　在上面的例子，高度被設定為視窗高度的一半。1vh相當於一個百分比的視窗高度，所以50vh即是50%的視窗高度。
　　如果視窗大小變了，那麼這個值也隨之改變。這相對百分比來說，好處是不需要擔心父容器，不管它的父容器如何，10vw的元素會一直是10%的視窗大小。
　　相應地，有vmin單位，相當於vh或者vw的最小值，最近還宣布有vmax單位會被加到規範文檔裡面（雖然在這篇文章發布的時候還沒有）。
　　現在支援這個特性的有IE9+、Chrome和Safari 6。
運算式的值
　　如果你在做響應式的流式布局網站，經常會遇到混合單位的問題——用百分比設定柵格，但是又用固定像素寬度設定margin。如：

p { margin: 0 20px; width: 33%;}

　　如果布局只用到padding和border，你可以使用box-sizing來解決，但是對於margin就無能為力了。更好、更靈活的方法是使用calc()函數，設定不同單位之間的數學方程式，如：

p { margin: 0 20px; width: calc(33% - 40px);}

　　它不僅可以用來計算寬，還可以用來計算長度——如果有必要，還可以在calc()裡面再加calc()。
　　這個特性IE9+和Firefox都支援，Firefox需要加上 -moz- 首碼（在版本16或17可能不用加首碼），Chrome和Safari也支援，但需要加上 -webkit- 首碼。然而，移動Webkit還不支援。
載入字型庫的部分字型
　　優越的效能往往很重要，尤其是市場上各種各樣的行動裝置——導致連線速度的差異和不確定性——更加體現了這個重要性。其中一個加快頁面載入速度的方法，就是減少外部檔案個數，@font-face的一個新屬性unicode-range就是為此而生。
　　這個屬性就是unicode-range（編碼範圍），代表的是編碼字型的參數範圍。在載入外部檔案的時候，只有那些被使用的字型才會被載入，而不是整套字型庫。下面的代碼示範了如何從foo.ttf字型庫中僅載入三個字型：

@font-face {font-family: foo;src: url(‘foo.ttf’);unicode-range: U+31-33;}

　　這點對於使用字型表徵圖的頁面尤其有用。我測試過，使用unicode-range，載入字型檔的時間平均減少了0.85秒，也不是小數目了。當然，你可能不會這麼想。
　　這個屬性，目前可以在IE9+、Webkit瀏覽器（如Chrome和Safari）中運行。
新的偽類
　　單位和值都應該好好利用，但是，讓我更興奮的是選取器和偽類。完善的選取器模式，即使只有少數瀏覽器支援，都讓我興奮不已。引用喬布斯的話：你要把柵欄的裡面修得和外面一樣漂亮，即使別人看不到裡面——因為你自己知道。
　　我第一次使用:nth-of-type()的時候，簡直是一次突破，就像我衝出了思想的桎梏。好吧，我有些誇張了。但有些新的CSS偽類，確實值得狂熱一番。
否定偽類
　　你大概不知道 :not() 偽類的好，除非你親自實踐一番。帶有參數的 :not() 其實就是普通的選取器——不是複合選取器。一組元素加上選取器 :not()，表示滿足這個參數的元素會被排除出去。聽起來有些複雜吧？但是實際上非常簡單。
　　假設：要對項目列表的奇數行進行選擇，但是最後一行除外。如果是以前，需要這樣寫：

li { color: #00F; } li:nth-child(odd) { color: #F00; } li:last-child { color: #00F; }

　　現在，通過設定:last-child作為否定偽類的參數，就可以把最後一個元素排除，這樣少了一行代碼，從而更加的簡潔和易維護。

li { color: #00F; } li:nth-child(odd):not(:last-child) { color: #F00; }

　　否定偽類看起來並沒有什麼驚人之處，你可以不用它，但是它還是挺實用的。我曾經把它用在基於Webkit的項目當中，優勢還是挺明顯的。說實話，它是我最喜歡的偽類之一。
　　是的，我有最喜歡的偽類。
　　在本文提到的特性當中，否定偽類是相容性最好的，它被IE9+和進階瀏覽器支援（不需要加瀏覽器產商首碼）。如果你熟悉jQuery，你可能習慣用它——版本1.0開始就有了，以及相似的not()方法。
“適用於”偽類
　　:matches() 偽類可以用普通的選取器、複合選取器、逗號隔開的列表或任何的選取器組合作為參數。太棒了！但是，它能做什嗎？
　　:matches() 偽類最強大的地方就是彙總多資料列選取器。例如，要選擇父容器裡面其中幾個不同子容器裡面的p元素，在這之前，代碼或許會寫成這樣：

.home header p,.home footer p,.home aside p {color: #F00;}

　　有了:matches()偽類，就可以把共同點提取出來，縮減代碼量。該例子裡面，選取器的共同點是以home為起點、以p為終點，所以可以用:matches()把中間的所有元素集合起來。是不是有些困惑？看看代碼就明白了：

.home :matches(header,footer,aside) p { color: #F00; }

　　這其實是CSS4的一部分（確切地說，是CSS選取器第四等級），這份規範文檔還提到將會有類似的文法（以逗號隔開的複合選取器）應用於:not()偽類。興奮ing！
　　目前，:matches()可以在Chrome和Safari瀏覽器中運行，但是要加上首碼-webkit-，Firefox也支援，但是要按照舊的寫法:any()，同時要加上-moz-首碼。