CSS部分比較容易掌握的，但是深入到CSS，並不會太容易。CSS的知識比較零碎，所用到的技巧也相對比較多。一句話“入門容易就，提升難”，今天教授帶你走一趟，一起對CSS的一此冷門知識做個梳理.
關注“教授學苑”，期待帶給你快樂的開發知識！
歷史課
貌似教授最愛講的就是歷史。why? 學習一個新的知識，要想全面理解和掌握，一定要弄清楚它的歷史，本質和侷限。這條規則是通解哦，大家可以看我的其它文章。比如講Node.js的。
混沌未分天地亂，CSS的誕生就是為了終結當時由推動Web世界繁榮的首功之臣HTML引發的混亂局面。在1990~1993年Web世界還處於一片荒蕪的時候，HTML這個勤勞而艱難生存的族群帶著描述段落、標題、超鏈接等結構性內容（後來這些成員榮升HTML國的貴族，經過幾次戰亂並一直生活到現在）的技能給Web世界帶來了生機。而後 Mosaic（早期的一款瀏覽器）的出現讓文字和圖片可以一起顯示出來，也一夜之間讓Web威名遠揚，這裡充滿魔力與神奇。無數的站點冒了出來，無數的站點吸引無數的人，無數的人帶來無數的新功能，我要字體能變色，我要字體能加粗，各種樣式要求不斷增加。HTML為了滿足人們不斷膨脹的慾望和要求努力擴充技能樹，最後弄得自己苦不堪言，一大堆描述樣式的標籤（現在還有的<i><em>等）搞得開發亂七八糟。結構化標記語言就這樣變成了一坨坨的字符串！:-) .
剛成立的Web世界聯合國W3C並沒有坐視不管，而是在積極的尋找與焦急的等待。終於他們找到了CSS。CSS在現在Web開發中可謂平淡無奇，寫CSS是很自然的事情因為它就屬於開發的一部分，但在當時卻是絕無僅有的。它最初由Wium Lie於1994.10.10提出來，這帥哥是Lee（萬維網的發明者）的同事。之後又由Bert Bos建議經過W3C的公開和內部討論最終在1996年底推出CSS1，並使之成為標準被推薦，很快瀏覽器廠商也爭相在自家產品中實現以佔領市場。這中間也並非一帆風順，比如網景公司就提交了一種新語言JSSS來實現樣式，但最終並沒有被接受。
1997年初，W3C內組織了專門管CSS的工作組，其負責人是克里斯·裡雷。工作組始討論第一版中沒有涉及到的問題。最後在1998年5月推出了CSS2的版本，之後又進行了細微的修正定版CSS2.1。接下來就是CSS3，這一步就是10年啊....直到2011年6月7日，CSS 3 Color Module終於發佈為W3C Recommendation。當然CSS3也並沒有停也發展的腳步，2017年1月31還發布了一個snapshot.
CSS原理
教授不會去講定義。談定義沒有意思！知道了定義又如何？不理解就是白說.教授在面試時常問的過程：“介紹一下CSS？”，“CSS就是層疊樣式表”,然後就沒有然後了。是不是這個理？那怎麼來理解層疊，給你一張圖來悟一下
這是CSS中最最最重要的一個知識點盒子（Box），理解CSS工作原理的關鍵在於能夠設想每一個HTML元素的周圍都有一個看不見的盒子。
“設想HTML元素周圍有一個盒子”
CSS允許你創建規則，來控制每一個盒子以及盒子中的內容的呈現方式。
說到這，要理解CSS如何工作，還要扯一點瀏覽器的工作原理！
當瀏覽器顯示文檔時，它必須將文檔的內容與其樣式信息結合。它分兩個階段處理文檔：
瀏覽器將 HTML 和 CSS 轉化成 DOM （文檔對象模型）。DOM在計算機內存中表示文檔。它把文檔內容和其樣式結合在一起。
瀏覽器顯示 DOM 的內容。
關於 DOM
DOM是一種樹形結構. 標記語言中的每個元素,屬性,文本片段都變為一個 DOM 節點。這些節點由它們與其它 DOM 節點的關係來定義。有的元素是某些子節點的父節點，且這些子節點有兄弟（節點）。
由於 DOM 是 CSS 與文檔內容的相遇之處，理解 DOM 有助於設計，調試和維護你的 CSS 文件。
表示 DOM
相對於漫長而無聊的解釋，讓我們通過一個例子來看一下 DOM 和 CSS 如何一同工作。
讓我們假定下面這段HTML代碼：
可解析成如下的 DOM 樹：
CSS 解析
和 HTML 不同，CSS 是上下文無關的語法。CSS語法採用 BNF 格式描述如下：
別蒙....CSS本身就是程序...WebKit 使用 Flex 和 Bison 解析器生成器，通過 CSS 語法文件自動創建解析器。正如我們之前在解析器簡介中所說，Bison 會創建自下而上的移位歸約解析器。Firefox 使用的是人工編寫的自上而下的解析器。這兩種解析器都會將 CSS 文件解析成 StyleSheet 對象，且每個對象都包含 CSS 規則。CSS 規則對象則包含選擇器和聲明對象，以及其他與 CSS 語法對應的對象。
至此兩個樹相互關聯，渲染引擎就可以渲染了。
在渲染的過程中還有一些非常重要的概念：
樣式計算
需要計算每一個呈現對象的可視化屬性。這是通過計算每個元素的樣式屬性來完成的。
樣式計算存在以下難點：
樣式數據是一個超大的結構，存儲了無數的樣式屬性，這可能造成內存問題。
如果不進行優化，為每一個元素查找匹配的規則會造成性能問題。要為每一個元素遍歷整個規則列表來尋找匹配規則，這是一項浩大的工程。選擇器會具有很複雜的結構，這就會導致某個匹配過程一開始看起來很可能是正確的，但最終發現其實是徒勞的，必須嘗試其他匹配路徑。
使用規則樹計算樣式上下文
在計算某個特定元素的樣式上下文時，首先計算規則樹中的對應路徑，或者使用現有的路徑。然後沿此路徑應用規則，在新的樣式上下文中填充結構。從路徑中擁有最高優先級的底層節點（通常也是最特殊的選擇器）開始，並向上遍歷規則樹，直到結構填充完畢。如果該規則節點對於此結構沒有任何規範，那麼可以實現更好的優化：尋找路徑更上層的節點，找到後指定完整的規範並指向相關節點即可。這是最好的優化方法，因為整個結構都能共享。這可以減少端值的計算量並節約內存。
如果找到了部分定義，就會向上遍歷規則樹，直到結構填充完畢。
如果找不到結構的任何定義，那麼假如該結構是“繼承”類型，我們會在上下文樹中指向父代的結構，這樣也可以共享結構。如果是 reset 類型的結構，則會使用默認值。
如果最特殊的節點確實添加了值，那麼需要另外進行一些計算，以便將這些值轉化成實際值。然後將結果緩存在樹節點中，供子代使用。
如果某個元素與其同級元素都指向同一個樹節點，那麼它們就可以共享整個樣式上下文。
以正確的層疊順序應用規則
樣式對象具有與每個可視化屬性一一對應的屬性（均為 CSS 屬性但更為通用）。如果某個屬性未由任何匹配規則所定義，那麼部分屬性就可由父代元素樣式對象繼承。其他屬性具有默認值。
如果定義不止一個，就會出現問題，需要通過層疊順序來解決。（這兒有沒有理解一點點什麼是層疊？）
樣式表層疊順序
某個樣式屬性的聲明可能會出現在多個樣式表中，也可能在同一個樣式表中出現多次。這意味著應用規則的順序極為重要。這稱為“層疊”順序。根據 CSS2 規範，層疊的順序為（優先級從低到高）：
瀏覽器聲明
用戶普通聲明
作者普通聲明
作者重要聲明
用戶重要聲明
瀏覽器聲明是重要程度最低的，而用戶只有將該聲明標記為“重要”才可以替換網頁作者的聲明。同樣順序的聲明會根據特異性進行排序，然後再是其指定順序。HTML 可視化屬性會轉換成匹配的 CSS 聲明。它們被視為低優先級的網頁作者規則。
特異性
選擇器的特異性由 CSS2 規範定義如下：
如果聲明來自於“style”屬性，而不是帶有選擇器的規則，則記為 1，否則記為 0 (= a)
記為選擇器中 ID 屬性的個數 (= b)
記為選擇器中其他屬性和偽類的個數 (= c)
記為選擇器中元素名稱和偽元素的個數 (= d)
將四個數字按 a-b-c-d 這樣連接起來（位於大數進制的數字系統中），構成特異性。
您使用的進製取決於上述類別中的最高計數。
例如，如果 a=14，您可以使用十六進制。如果 a=17，那麼您需要使用十七進制；當然不太可能出現這種情況，除非是存在如下的選擇器：html body div div p ...（在選擇器中出現了 17 個標記，這樣的可能性極低）。
特異性示例
繪製順序
CSS2 規範定義了繪製流程的順序。繪製的順序其實就是元素進入堆棧樣式上下文的順序。這些堆棧會從後往前繪製，因此這樣的順序會影響繪製。塊的堆棧順序如下：
背景顏色
背景圖片
邊框
子代
輪廓
佈局處理的方式
佈局通常具有以下模式：
父元素確定自己的寬度。
父元素依次處理子元素，並且：
放置子元素（設置 x,y 座標）。
如果有必要，調用子元素的佈局,這會計算子元素的高度。
父元素根據子元素的累加高度以及邊距和補白的高度來設置自身高度，此值也可供父元素的父元素使用。
關注“教授學苑”，期待帶給你快樂的開發知識！