摘要：樣式聲明通過一個稱為級聯(lián)的過程來解釋和決定。級聯(lián)級聯(lián)可能是中最容易被弄錯的屬性之一。因此很容易認為元素的視覺邊界等于其寬度，但情況并非如此。

如果你在日常工作中使用CSS，那么你的主要目標(biāo)很可能集中在使事情看起來是正確的。最終得到的正確結(jié)果遠比如何實現(xiàn)更重要。這意味著相比正確的語法和視覺效果我們更少關(guān)注CSS的實現(xiàn)原理。

你可能還沒有意識到，但CSS的視覺效果通常是操縱隱藏屬性的間接結(jié)果。一些CSS屬性（如 background-color）和你看到的視覺效果就有顯然的直接關(guān)系。而其他的（比如display）對我們許多人來說仍然含糊不清，因為結(jié)果似乎高度依賴于上下文。

我懷疑很多開發(fā)者都不能簡單的描述當(dāng)設(shè)置了display: block之后實際上做了什么。最多你可能只是直觀地了解這個屬性是如何工作的。沒關(guān)系，你可以在不了解基本原理的情況下，對CSS有很好的使用。雖然，你知道解決問題的方案，但是你卻不一定真的了解問題。

對于許多人來說，諸如盒子模型、級聯(lián)和特殊性等概念是我們所熟知的。雖然他們經(jīng)常被曲解，但是知道這些工作原理有助于我們編寫更好的CSS。

正因為如此，我想試著揭示CSS的這些隱藏黑科技部分，只介紹涉及你需要知道的部分，并希望以邏輯順序解釋該過程，以便你更好的理解CSS真正的工作原理。

當(dāng)你加載一個HTML文檔的時候，頁面的渲染過程中會按照順序發(fā)生了很多事情。

第一步就是解析HTML文檔。從這一步開始瀏覽器會生成一個“文檔樹”。樹的結(jié)構(gòu)是一種用HTML代表具有明顯層次結(jié)構(gòu)信息的方式。樹中的元素可以用類似于家譜的方式描述，比如：后代節(jié)點、父節(jié)點、子孫節(jié)點和兄弟節(jié)點。

你可能聽說過“DOM”這個術(shù)語。它代表“文檔對象模型（Document Object Model）”。它是文檔樹結(jié)構(gòu)的擴展，它被用來存儲web文檔內(nèi)容和操作信息。

隨著HTML被解析，樣式文件和其他資源文件會被下載。樣式聲明通過一個稱為級聯(lián)的過程來解釋和決定。

在此過程中，將解析CSS屬性的最終值。經(jīng)過計算，這些值可能與我們樣式表中所寫的值不同。例如：像auto 這樣的相對單位的關(guān)鍵字被賦予了真正的值，并會應(yīng)用繼承的值。這些計算好的值會像存儲在DOM樹中的元素一樣被存儲在一個樹中，毫無疑問會被稱為CSS對象模型（CSS Object Model ）或CSSOM。

現(xiàn)在就可以開始渲染頁面的過程了。這個過程中的第一步是計算 盒模型。這一步對于計算出元素的大小和間距是很重要的，盡管可能并不是最終的位置。

和 盒模型相比并不是那么被熟知的過程叫做 視覺格式模型。此過程會確定頁面上元素的布局和位置。它包含您可能已經(jīng)熟悉的一些概念，例如：定位方案（positioning schemes）, 格式化上下文（formatting contexts）, 顯示模式（display modes）, 和 堆疊上下文（stacking contexts）。

最終頁面被渲染出來。

以上段落中可能有幾個術(shù)語，您還不熟悉。如果是這樣的話，最重要的是理解 級聯(lián), 盒模型, 和 視覺格式模型，理解這些術(shù)語是解釋、處理和渲染HTML和CSS至關(guān)重要的一步。在描述上面每個渲染過程的細節(jié)時，我跳過了很多的細節(jié)，所以接下來我們更加仔細地看這三個步驟。

級聯(lián)可能是CSS中最容易被弄錯的屬性之一。它指的是合并不同樣式表并解決CSS選擇器之間沖突的過程。

級聯(lián)查看聲明的優(yōu)先級、來源、特性和順序，以確定使用哪種樣式規(guī)則。

你需要知道什么:

大多數(shù)網(wǎng)站都有多種樣式表。通常的樣式是在頁面中添加了一個引用css文件的link 標(biāo)簽，或者在HTML主體中使用 style 標(biāo)簽。即使最基本的頁面也有由瀏覽器提供的默認樣式。此默認樣式表有時稱為用戶代理樣式表（user-agent stylesheet）。

在級聯(lián)過程中樣式表按以下順序解釋：

!important 聲明

開發(fā)者編寫的樣式表

瀏覽器默認的樣式表

注意事項: 我跳過了用戶樣式表，因為它已不是常見的了。

合并這些來源的樣式之后，如果很多規(guī)則被用在了同一個元素上，則用權(quán)重確定應(yīng)用的規(guī)則。

特殊性是指選擇器的權(quán)重。僅僅把它看作一個多帶帶的數(shù)字是一個常見的錯誤。實際上它是4個獨立的數(shù)字或4種類別的權(quán)重。

計算特殊性，把下面的權(quán)重相加：

ID,

class, 屬性 和 偽類,

元素 和 偽元素

例如: #nav .selected:hover > a::before 的權(quán)重分別是 1, 2, 2。

無論多少個class的權(quán)重，都沒有ID的權(quán)重高。當(dāng)比較選擇器時，首先應(yīng)該比較ID的權(quán)重大小。僅當(dāng)ID的權(quán)重一樣的時候，再比較class、屬性和偽類的權(quán)重，最后，如果權(quán)重依然一樣的話就比較元素和偽元素的權(quán)重。

如果每個類別的權(quán)重都相等的話，則采用就近優(yōu)先的原則（即應(yīng)用來源中最后聲明的規(guī)則）。

是的！我知道我說了4類的權(quán)重大小。但是行內(nèi)樣式的權(quán)重比ID的更高。盡管它們是技術(shù)上權(quán)重計算中的第一類，但是通常是無法和行內(nèi)樣式競爭的，所以，很容易記住行內(nèi)樣式總是高于其他類別的權(quán)重。

重要注意事項: !important 聲明沒有考慮權(quán)重計算，但是它們比級聯(lián)中的正常聲明具有更高的優(yōu)先級。

繼承不是級聯(lián)中的一部分，但是這里我把它包含進來主要是因為它經(jīng)常和級聯(lián)一起被討論。

繼承是應(yīng)用于元素的值可以由其子元素傳遞（或繼承）的過程。

您可能很熟悉字體屬性（當(dāng)應(yīng)用于body或另一個容器元素時）也由該容器內(nèi)的每個元素繼承的事實。這就是繼承。

并非所有屬性都默認繼承。 了解繼承是編寫更加優(yōu)雅和簡潔CSS的關(guān)鍵。 使用inherit關(guān)鍵字強制繼承是非常有用的。

注意事項: 某些屬性如border-color 具有默認值currentcolor。 這意味著他們將使用color屬性上設(shè)置的值。 這個默認值與繼承不一樣。 雖然顏色屬性本身通常是繼承的。

了解盒子模型對于限制使用布局和定位時的問題是必不可少的。 它是CSS中最基本的概念之一。

盒模型用于計算元素的寬和高。這是一個計算步驟，并不完全被依賴于確定元素的最終布局和定位。

你需要知道什么:

HTML的每一個元素都是一個矩形的盒子。每個盒子都有4個區(qū)域，用于定義元素的邊距（margin）、邊框（border）、填充（padding）和內(nèi)容區(qū)域。

默認情況下，你給一個元素設(shè)置的寬度，只是設(shè)置了內(nèi)容區(qū)域的寬度。當(dāng)你給元素添加padding、border和margin時，這是增加了除了寬度之外的部分。實際上，這意味著寬度為50％的兩個元素如果添加了padding，margin或border，則會超過100%的寬度，進而導(dǎo)致不能并排排版了。

就是這樣！這是相當(dāng)簡單的對吧？為什么這常常是困惑的來源呢?好吧，你可能遇到過一些情況，事情似乎有些不同的表現(xiàn)…

當(dāng)你給一個元素設(shè)置背景的時候，填充的不僅僅是內(nèi)容區(qū)域，而且還包括內(nèi)部padding區(qū)域和邊框區(qū)域。

從概念上來說，我們認為HTML元素是單一的東西。因此很容易認為元素的視覺邊界等于其寬度，但情況并非如此。盡管元素的視覺邊界包括填充（padding）和邊框（border）區(qū)域，width 屬性明確地應(yīng)用于內(nèi)容區(qū)域上。

注意事項: 改變 box-sizing 屬性可以改變這種表現(xiàn)行為。

另一個潛在的困惑的來源是width: auto 是怎樣工作的。一個自動的寬度對于大部分的HTML元素都是一個默認值，比如：div和p標(biāo)簽，auto 的寬度計算以便于margin、border、padding和內(nèi)容區(qū)域合并之后能夠適應(yīng)可用的空間。

實際上，是重新計算寬度以確保一切都適合。 通過比較，設(shè)置寬度為“100％”時，不管邊距、填充和邊框的大小是多少，內(nèi)容區(qū)域都將填充可用空間。

box-sizing屬性能夠改變盒模型的工作方式。當(dāng) box-sizing設(shè)置為border-box 時，padding和border將減少內(nèi)容區(qū)域的內(nèi)部寬度，而不是增加元素的整體寬度。這意味著一個元素的寬度現(xiàn)在與它的可視寬度相同。

很多人喜歡這個屬性，如果你正在建立一個網(wǎng)格系統(tǒng)，或任何其他需要水平對齊類型的布局項目，這可以更直觀的工作方式。

當(dāng)邊距意外重疊的時候，真的令人很困惑，因為你不知道發(fā)生了什么。當(dāng)兩個或多個相鄰的垂直邊距接觸時，邊距有時會發(fā)生重疊，并且不會用填充或邊框分隔。如果子元素的邊緣擴展到父元素的邊緣，并且不會被填充分隔開，那么就會出現(xiàn)邊距重疊的現(xiàn)象。

如果元素采用的是絕對定位、浮動定位或者有一個不一樣的 格式化上下文時，邊距不會發(fā)生重疊現(xiàn)象。

如果你感到困惑，沒關(guān)系。邊距不會發(fā)生重疊的規(guī)則是復(fù)雜的。 您需要知道的主要事情是當(dāng)元素沒有填充或邊框時，垂直邊距可能會重疊。

當(dāng)盒模型計算元素的尺寸時，它是負責(zé)確定這些盒布局的視覺格式模型。 視覺格式模型考慮了盒的類型、定位方案、元素之間的關(guān)系和由內(nèi)容強加的約束，以確定頁面上每個元素的最終位置和呈現(xiàn)。

你需要知道什么:

視覺格式模型遍歷文檔樹，并按CSS盒模型生成一個或多個渲染元素所需的盒子。CSSdisplay 屬性在決定元素如何參與當(dāng)前的格式化上下文和定位方案中起著關(guān)鍵的作用。這些部分將決定元素的最終布局和位置。

這是一個復(fù)雜的步驟，是迄今為止最難嘗試和總結(jié)的。如果你還不了解所有的關(guān)于這個部分的話，沒關(guān)系。理解我們?nèi)绾瓮ㄟ^CSS屬性操作 定位方案和格式化上下文是一個很好的開始。如果你能掌握這一模式的不同部分之間的相互作用，你就會比大多數(shù)人做得更好。至少你應(yīng)該知道它們是存在的。

我們知道在CSS中設(shè)置display 屬性可以決定一個元素怎樣被渲染，但是目前還不清楚它的工作原理是什么樣的。事實上，有時甚至是不可預(yù)測的。

這是因為display 屬性決定了元素的“盒類型”。該隱藏屬性由內(nèi)部顯示類型和外部顯示類型組成，這些類型一起幫助確定元素的呈現(xiàn)方式。

外部顯示類型通常解析為“block”或“inline”，并且?guī)缀跖cCSS中的“display”屬性的期望一致。 從技術(shù)上講，外部顯示類型決定了元素如何參與其父元素的格式化上下文。

內(nèi)部顯示類型確定該元素將生成什么樣的格式化上下文。 這將影響其子元素的布局。

想象一下Flexbox容器的工作原理。 它的外部類型是block，其內(nèi)部類型是flex。 它的子元素外部類型也可以是block，但它們的布局受到Flexbox容器的格式上下文的影響。

格式化上下文是關(guān)于布局的。 它們是管理容器內(nèi)元素布局的規(guī)則，以及它們?nèi)绾蜗嗷ソ换ァ?/p>

一些格式化上下文可以直接在容器上建立，例如通過使用display 的值為：flex、grid或table。 其他類型（如塊和內(nèi)聯(lián)格式化上下文）按照瀏覽器的要求創(chuàng)建。

注意事項: 一度，因為它和浮動元素的交互方式，理解如何讓瀏覽器建立一個新的塊格式化上下文非常重要。一個塊格式化上下文的元素會包含浮動的元素。

一個盒元素可以根據(jù)3種定位方案中的一種來布局。這三種方案分別是：正常文檔流布局, 浮動布局 和 絕對定位布局。您可能熟悉浮動和絕對定位布局的方式，因為我們在編寫CSS時經(jīng)常與這些方案進行交互。 當(dāng)一個元素未浮動或絕對定位布局時，就是正常文檔流布局。

正常文檔流布局
正常文檔流描述了默認的定位方案，“in-flow”描述符合此要求的元素。 在文檔流中您可以認為是根據(jù)其源的順序和格式化上下文布局的元素的自然位置。

浮動布局
Float（浮動）是一個CSS屬性，它使一個元素從正常流中跳出來，并盡可能地向左或向右偏移，直到它接觸到其上一級的盒元素或另一個浮動元素的邊緣。 當(dāng)這種情況發(fā)生時，文本和內(nèi)聯(lián)元素將包圍浮動元素。

通常如果不設(shè)置，元素的高度將適應(yīng)其所有后代元素。 當(dāng)元素浮動時，它們從正常文檔流跳出來，這意味著容器不會調(diào)整其高度以將其清除。

正是這種行為允許多種文本、標(biāo)題和其他元素對浮動內(nèi)容進行流式包裹。但有時這是有問題的。清除浮動和建立一個新的塊格式化上下文將使容器清除其浮動的子元素。這種技術(shù)允許使用浮動來進行布局，很久之前這就已經(jīng)成為web開發(fā)技術(shù)之一了。這種技術(shù)仍然很重要，但它也正逐漸被新的布局技術(shù)所取代，比如Flexbox和Grid。

絕對定位布局
絕對定位的元素完全從文檔流中去除，不同于浮動元素，它們對周圍的內(nèi)容沒有影響。

具有相對定位的容器允許您使用絕對定位來控制后代元素的偏移量。

相對定位的元素也可以被給定一個偏移量，但是這個偏移量是與元素的正常位置相對的，而不是另一個相對的容器。

CSS的top, bottom, left 和 right 屬性用來計算“盒容器的偏移量”。這些屬性不是二維偏移，而是每個邊緣相對于其容器的內(nèi)容盒子進行定位。

具有重疊偏移的定位元素可以導(dǎo)致元素占用相同空間而發(fā)生重疊問題。堆疊上下文可以解決這個問題。

堆疊上下文決定事物呈現(xiàn)到頁面的順序。 你可以想象一個堆疊上下文，如圖層。 堆疊底部的圖層首先繪制，堆疊上方的元素出現(xiàn)在頂部（相對于底部來說是在上層）。

在一個絕對或相對定位的元素上設(shè)置z-index 是建立新的堆疊上下文的最常見方式。 但是還有其他一些方法可以形成堆疊上下文，包括設(shè)置不透明度（opacity），轉(zhuǎn)換（transforms），過濾（filters）或使用will-change屬性。

其中的一些原因并不直觀，與開發(fā)人員的預(yù)期相比，更多的是與渲染的性能有關(guān)。這有助于理解這些層可以由瀏覽器多帶帶渲染。因此，出于性能考慮，故意創(chuàng)建一個新的堆棧上下文有時會很有用。

除非建立了堆疊上下文，不然設(shè)置z-index沒有效果。 z-index的值設(shè)置的越高，層疊放置的堆疊越高（越靠近被最終顯示的上層）。

關(guān)于堆疊最令人困惑的部分之一是可以在現(xiàn)有堆疊環(huán)境中建立新的堆疊上下文。 這意味著您可以擁有多層圖層。

在這種情況下，并不總是擁有最高的z-index值顯示在堆疊越高的位置。

簡短地介紹一些CSS的重要的不為人熟知的工作原理部分。如果你只是讀了其中的一部分也沒關(guān)系。希望這篇文章澄清了一些事情，或者對所涉及的過程有了一個大致的說明。在不犧牲精確性的情況下，用簡單的術(shù)語解釋這些東西是一個真正的挑戰(zhàn)。