關於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-前缀。 

以上是關於CSS中細節的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！