通常我們在學習CSS的時候，感覺文法很容易掌握，實際應用中卻碰到各式各樣難以填補的“坑”，為避免大家受到同樣的困惑與不解，本文詳細講解了CSS中優先級和Stacking Context等進階特性。讓你更深入了解CSS。
優先級是浏覽器是通過判斷哪些屬性值與元素最相關以決定并應用到該元素上的。優先級僅由選擇器組成的比對規則決定的。如果給一個P标簽增加一個類（Class）,運作後Class 中的部分屬性并未發生改變，及CSS選擇器存在優先級問題。
常見的選擇器種類：
内聯樣式（Inline Style）,如<span style="color:black">...</span>；
ID選擇符（ID selectors），如#id；
Class選擇符（Class），如 .class {...}、[href=‘’]、:hover；
标簽選擇符（Tag）,如 div,:before
每一類選擇器的權值不相同，各選擇器的優先級是由權值決定的，
内聯樣式：1,0,0,0
ID 選擇符：1,0,0
Class 選擇符：1,0
Tag選擇符：1
樣式系統從最右邊的選擇符開始向左進行比對規則。隻要目前選擇符的左邊還有其他選擇符，樣式系統就會繼續向左移動，直到找到和規則比對的元素，或者因為不比對而退出。
CSS 優先級法則：
選擇器都有一個權值，權值越大越優先；
當權值相等時，後出現的樣式表設定要優于先出現的樣式表設定；
創作者的規則高于浏覽者：即網頁編寫者設定的CSS 樣式的優先權高于浏覽器所設定的樣式；
繼承的CSS 樣式不如後來指定的CSS 樣式；
在同一組屬性設定中标有“!important”規則的優先級最大；
盒子模型(Box Model)就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
盒子模型相關CSS屬性元素内容（element content）、寬度及高度（Width/Height)、内邊距（padding）、邊框（border） 和 外邊距（margin） 。
在 CSS 中，width 和 height 指的是内容區域（element）的寬度和高度。增加内邊距、邊框和外邊距不會影響内容區域的尺寸，但是會增加元素框的總尺寸。假設框的每個邊上有 10 個像素的外邊距和 5 個像素的内邊距。如果希望這個元素框達到 100 個像素，就需要将内容的寬度設定為 70 像素。需要的屬性如下：
基本屬性
Width/Height
Padding
Margin
Boder
Outline
偏移量屬性
Top/Left/Bottom/Right
和.NET WinForm的差別:
預設情況下Width/Height不包含Padding
Margin/Padding屬性的四個值的順序是top right bottom left (順時針)
所有東西可視為盒子模型
如果<p>的縱向margin是12px，那麼兩個<p>之間縱向的距離是多少？按常理來說應該是 12 + 12= 24px，但是答案仍然是 12px。因為縱向的margin是會重疊的，大的會覆寫下的。
Position屬性規定元素的定位類型。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼類型。相對定位元素會相對于它在正常流中的預設位置偏移。以下是Posistion屬性取值範圍如下：
Static 普通流布局（Normal flow） ，預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
Relative 支援偏移量屬性的普通流布局 ，生成相對定位的元素，相對于其正常位置進行定位。是以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
Absolute 在容器元素内絕對定位的布局 ，生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
Fixed 在顯示範圍内的絕對定位布局，生成絕對定位的元素，相對于浏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
提供z-index棧空間特性并影響子元素渲染順序的結構，稱之為stacking context。
浏覽器會給符合下面規則的dom元素配置設定一個Stacking context。
root元素(html)
「已定位」元素（position: absolute or relative）且 指定z-index值非auto的元素
flex item且指定z-index值非auto的元素
opacity小于1的元素
指定transform值非none的元素
指定mix-blend-mode值非normal的元素
指定filter值非none的元素
指定isolation值為isolate的元素
在will-change屬性上指定值為上述清單任意屬性的元素
指定-webkit-overflow-scrolling值為touch的元素
根據DOM樹結構，具有stacking context的元素會形成一個樹形結構。
一個stacking context中的元素會根據z-index決定疊加順序。z-index大的靠前
z-index 0級元素中，有stacking context的元素的疊加順序靠前
以上條件不能區分時，使用DOM樹中的順序決定疊加順序。
提升性能需要在構造流水線中每個元素都需要注意：
Style
降低樣式選擇器的複雜度
減少需要執行樣式計算的元素的個數
Layout
盡可能避免觸釋出局
幾乎所有的布局都是在整個文檔範圍内發生的。
使用flexbox替代老的布局模型
避免強制同步布局事件的發生
避免快速連續的布局
Paint
除了transform和opacity之外，修改任何屬性都會觸發繪制
提升移動或漸變元素的繪制層
減少繪制區域
簡化繪制的複雜度
一個選擇器的最右端是這個選擇器的關鍵條件（Key Selector）
浏覽器按照從右向左的方式比對選擇器，是以應該将更具體的條件盡可能放在右端。
避免使用*規則
選擇器盡可能短
ID選擇符前面不要再加限定符
沒必要用Tag選擇符限定Class選擇符