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

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

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

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

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

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

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

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

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

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

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

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

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

最終頁面被渲染出來。

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

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

級聯查看聲明的優先級、來源、特性和順序，以確定使用哪種樣式規則。

你需要知道什么:

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

在級聯過程中樣式表按以下順序解釋：

!important 聲明

開發者編寫的樣式表

瀏覽器默認的樣式表

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

合并這些來源的樣式之后，如果很多規則被用在了同一個元素上，則用權重確定應用的規則。

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

計算特殊性，把下面的權重相加：

ID,

class, 屬性 和 偽類,

元素 和 偽元素

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

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

如果每個類別的權重都相等的話，則采用就近優先的原則（即應用來源中最后聲明的規則）。

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

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

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

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

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

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

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

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

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

你需要知道什么:

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

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

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

當你給一個元素設置背景的時候，填充的不僅僅是內容區域，而且還包括內部padding區域和邊框區域。

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

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

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

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

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

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

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

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

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

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

你需要知道什么:

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

這是一個復雜的步驟，是迄今為止最難嘗試和總結的。如果你還不了解所有的關于這個部分的話，沒關系。理解我們如何通過CSS屬性操作 定位方案和格式化上下文是一個很好的開始。如果你能掌握這一模式的不同部分之間的相互作用，你就會比大多數人做得更好。至少你應該知道它們是存在的。

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

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

外部顯示類型通常解析為“block”或“inline”，并且幾乎與CSS中的“display”屬性的期望一致。 從技術上講，外部顯示類型決定了元素如何參與其父元素的格式化上下文。

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

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

格式化上下文是關于布局的。 它們是管理容器內元素布局的規則，以及它們如何相互交互。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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