這篇文章將為大家詳細(xì)講解有關(guān)CSS中優(yōu)先級(jí)和Stacking Context等高級(jí)特性是什么，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),張家口企業(yè)網(wǎng)站建設(shè),張家口品牌網(wǎng)站建設(shè),網(wǎng)站定制,張家口網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,張家口網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。創(chuàng)新互聯(lián)公司專注于安定網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供安定營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，安定網(wǎng)站制作、安定網(wǎng)頁(yè)設(shè)計(jì)、安定網(wǎng)站官網(wǎng)定制、成都小程序開(kāi)發(fā)服務(wù)，打造安定網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供安定網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

CSS 優(yōu)先級(jí)

優(yōu)先級(jí)是瀏覽器是通過(guò)判斷哪些屬性值與元素最相關(guān)以決定并應(yīng)用到該元素上的。優(yōu)先級(jí)僅由選擇器組成的匹配規(guī)則決定的。如果給一個(gè)P標(biāo)簽增加一個(gè)類（Class）,運(yùn)行后Class 中的部分屬性并未發(fā)生改變，及CSS選擇器存在優(yōu)先級(jí)問(wèn)題。

選擇符優(yōu)先級(jí)

常見(jiàn)的選擇器種類：

• 內(nèi)聯(lián)樣式（Inline Style）,如...；
• ID選擇符（ID selectors），如#id；
• Class選擇符（Class），如 .class {...}、[href=‘’]、:hover；
• 標(biāo)簽選擇符（Tag）,如 p,:before

每一類選擇器的權(quán)值不相同，各選擇器的優(yōu)先級(jí)是由權(quán)值決定的，

• 內(nèi)聯(lián)樣式：1,0,0,0
• ID 選擇符：1,0,0
• Class 選擇符：1,0
• Tag選擇符：1

來(lái)源優(yōu)先級(jí)順序，如圖所示

樣式系統(tǒng)從最右邊的選擇符開(kāi)始向左進(jìn)行匹配規(guī)則。只要當(dāng)前選擇符的左邊還有其他選擇符，樣式系統(tǒng)就會(huì)繼續(xù)向左移動(dòng)，直到找到和規(guī)則匹配的元素，或者因?yàn)椴黄ヅ涠顺觥?/p>

CSS 優(yōu)先級(jí)法則：

1. 選擇器都有一個(gè)權(quán)值，權(quán)值越大越優(yōu)先；
2. 當(dāng)權(quán)值相等時(shí)，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置；
3. 創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁(yè)編寫(xiě)者設(shè)置的CSS 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式；
4. 繼承的CSS 樣式不如后來(lái)指定的CSS 樣式；
5. 在同一組屬性設(shè)置中標(biāo)有“!important”規(guī)則的優(yōu)先級(jí)大；

CSS常用模型

盒子模型(Box Model)就是在網(wǎng)頁(yè)設(shè)計(jì)中經(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)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。假設(shè)框的每個(gè)邊上有 10 個(gè)像素的外邊距和 5 個(gè)像素的內(nèi)邊距。如果希望這個(gè)元素框達(dá)到 100 個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素。需要的屬性如下：

基本屬性

• Width/Height
• Padding
• Margin
• Boder
• Outline
• 偏移量屬性
  • Top/Left/Bottom/Right
• 和.NET WinForm的區(qū)別:
  • 默認(rèn)情況下Width/Height不包含Padding
  • Margin/Padding屬性的四個(gè)值的順序是top right bottom left (順時(shí)針)

所有東西可視為盒子模型

縱向Margin合并

如果

的縱向margin是12px，那么兩個(gè)

之間縱向的距離是多少？按常理來(lái)說(shuō)應(yīng)該是 12 + 12= 24px，但是答案仍然是 12px。因?yàn)榭v向的margin是會(huì)重疊的，大的會(huì)覆蓋下的。

Position屬性規(guī)定元素的定位類型。這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過(guò)絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。以下是Posistion屬性取值范圍如下：

• Static 普通流布局（Normal flow） ，默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
• Relative 支持偏移量屬性的普通流布局 ，生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
• Absolute 在容器元素內(nèi)絕對(duì)定位的布局 ，生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
• Fixed 在顯示范圍內(nèi)的絕對(duì)定位布局，生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

Float屬性

float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周?chē)贿^(guò)在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。

Stacking context

提供z-index?？臻g特性并影響子元素渲染順序的結(jié)構(gòu)，稱之為stacking context。

瀏覽器會(huì)給符合下面規(guī)則的dom元素分配一個(gè)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樹(shù)結(jié)構(gòu)，具有stacking context的元素會(huì)形成一個(gè)樹(shù)形結(jié)構(gòu)。
• 一個(gè)stacking context中的元素會(huì)根據(jù)z-index決定疊加順序。z-index大的靠前
• z-index 0級(jí)元素中，有stacking context的元素的疊加順序靠前

• 以上條件不能區(qū)分時(shí)，使用DOM樹(shù)中的順序決定疊加順序。

性能

像素渲染流水線

提升性能需要在構(gòu)造流水線中每個(gè)元素都需要注意：

• Style
  • 降低樣式選擇器的復(fù)雜度
  • 減少需要執(zhí)行樣式計(jì)算的元素的個(gè)數(shù)
• Layout
  • 盡可能避免觸發(fā)布局
    • 幾乎所有的布局都是在整個(gè)文檔范圍內(nèi)發(fā)生的。
    • 使用flexbox替代老的布局模型
    • 避免強(qiáng)制同步布局事件的發(fā)生
    • 避免快速連續(xù)的布局

• Paint
  • 除了transform和opacity之外，修改任何屬性都會(huì)觸發(fā)繪制
  • 提升移動(dòng)或漸變?cè)氐睦L制層
  • 減少繪制區(qū)域
  • 簡(jiǎn)化繪制的復(fù)雜度

CSS 選擇器性能

• 一個(gè)選擇器的最右端是這個(gè)選擇器的關(guān)鍵條件（Key Selector）
• 瀏覽器按照從右向左的方式匹配選擇器，因此應(yīng)該將更具體的條件盡可能放在右端。
• 避免使用*規(guī)則
• 選擇器盡可能短
• ID選擇符前面不要再加限定符
• 沒(méi)必要用Tag選擇符限定Class選擇符

關(guān)于CSS中優(yōu)先級(jí)和Stacking Context等高級(jí)特性是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文名稱：CSS中優(yōu)先級(jí)和StackingContext等高級(jí)特性是什么-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://weahome.cn/article/cehcgo.html