通常我們在學習css的時候，感覺語法很容易掌握，實際應(yīng)用中卻碰到各式各樣難以填補的“坑”，為避免大家受到同樣的困惑與不解，本文詳細講解了css中優(yōu)先級和stacking context等高級特性。讓你更深入了解css。
css 優(yōu)先級
優(yōu)先級是瀏覽器是通過判斷哪些屬性值與元素最相關(guān)以決定并應(yīng)用到該元素上的。優(yōu)先級僅由選擇器組成的匹配規(guī)則決定的。如果給一個p標簽增加一個類（class）,運行后class 中的部分屬性并未發(fā)生改變，及css選擇器存在優(yōu)先級問題。
選擇符優(yōu)先級
常見的選擇器種類：
內(nèi)聯(lián)樣式（inline style）,如<span style="color:black">…</span>；id選擇符（id selectors），如#id；class選擇符（class），如 .class {…}、[href=‘’]、:hover；標簽選擇符（tag）,如 p,:before
每一類選擇器的權(quán)值不相同，各選擇器的優(yōu)先級是由權(quán)值決定的，
內(nèi)聯(lián)樣式：1,0,0,0id 選擇符：1,0,0class 選擇符：1,0tag選擇符：1
來源優(yōu)先級順序，如圖所示
樣式系統(tǒng)從最右邊的選擇符開始向左進行匹配規(guī)則。只要當前選擇符的左邊還有其他選擇符，樣式系統(tǒng)就會繼續(xù)向左移動，直到找到和規(guī)則匹配的元素，或者因為不匹配而退出。
css 優(yōu)先級法則：
選擇器都有一個權(quán)值，權(quán)值越大越優(yōu)先；當權(quán)值相等時，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置；創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁編寫者設(shè)置的css 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式；繼承的css 樣式不如后來指定的css 樣式；在同一組屬性設(shè)置中標有“!important”規(guī)則的優(yōu)先級最大；css常用模型
盒子模型(box model)就是在網(wǎng)頁設(shè)計中經(jīng)常用到的css技術(shù)所使用的一種思維模型。
盒子模型相關(guān)css屬性元素內(nèi)容（element content）、寬度及高度（width/height)、內(nèi)邊距（padding）、邊框（border） 和 外邊距（margin） 。
在 css 中，width 和 height 指的是內(nèi)容區(qū)域（element）的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的總尺寸。假設(shè)框的每個邊上有 10 個像素的外邊距和 5 個像素的內(nèi)邊距。如果希望這個元素框達到 100 個像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素。需要的屬性如下：
基本屬性
width/heightpaddingmarginboderoutline偏移量屬性top/left/bottom/right和.net winform的區(qū)別:默認情況下width/height不包含paddingmargin/padding屬性的四個值的順序是top right bottom left (順時針)
所有東西可視為盒子模型
縱向margin合并
如果<p>的縱向margin是12px，那么兩個<p>之間縱向的距離是多少？按常理來說應(yīng)該是 12 12= 24px，但是答案仍然是 12px。因為縱向的margin是會重疊的，大的會覆蓋下的。
position屬性規(guī)定元素的定位類型。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。以下是posistion屬性取值范圍如下：
static 普通流布局（normal flow） ，默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。relative 支持偏移量屬性的普通流布局 ，生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 left 位置添加 20 像素。absolute 在容器元素內(nèi)絕對定位的布局 ，生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。fixed 在顯示范圍內(nèi)的絕對定位布局，生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
float屬性
float 屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
stacking context
提供z-index?？臻g特性并影響子元素渲染順序的結(jié)構(gòu)，稱之為stacking context。
瀏覽器會給符合下面規(guī)則的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的元素z-index stacking order根據(jù)dom樹結(jié)構(gòu)，具有stacking context的元素會形成一個樹形結(jié)構(gòu)。一個stacking context中的元素會根據(jù)z-index決定疊加順序。z-index大的靠前z-index 0級元素中，有stacking context的元素的疊加順序靠前
以上條件不能區(qū)分時，使用dom樹中的順序決定疊加順序。
性能
像素渲染流水線
提升性能需要在構(gòu)造流水線中每個元素都需要注意：
style降低樣式選擇器的復(fù)雜度減少需要執(zhí)行樣式計算的元素的個數(shù)layout盡可能避免觸發(fā)布局幾乎所有的布局都是在整個文檔范圍內(nèi)發(fā)生的。使用flexbox替代老的布局模型避免強制同步布局事件的發(fā)生避免快速連續(xù)的布局paint除了transform和opacity之外，修改任何屬性都會觸發(fā)繪制提升移動或漸變元素的繪制層減少繪制區(qū)域簡化繪制的復(fù)雜度css 選擇器性能一個選擇器的最右端是這個選擇器的關(guān)鍵條件（key selector）瀏覽器按照從右向左的方式匹配選擇器，因此應(yīng)該將更具體的條件盡可能放在右端。避免使用*規(guī)則選擇器盡可能短id選擇符前面不要再加限定符沒必要用tag選擇符限定class選擇符
更多編程相關(guān)知識，請訪問：編程入門！！