摘要：布局完成后，瀏覽器會返回，解析尚未解決的所有基于或基于百分比的值。為了確保瀏覽器遵循標準，并且內容圍繞浮動，瀏覽器更改了的的幾何形狀。

　　想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你!

　　解析

　　一旦 CSS 被瀏覽器下載，CSS 解析器就會被打開來處理它遇到的任何CSS。這可以是單個文檔內的CSS、

　　瀏覽器從 body 元素開始，生成它的主盒(principal box)，它的寬度為50px，默認高度為auto。

　　現在移動到 p 標簽并生成其主盒(principal box)，并且由于 p 標簽默認有邊距(margin)，這將影響正文的高度，如下所示：

　　現在瀏覽器移動到 “Hello world” 文本，這是 DOM 中的文本節點。因此，我們在布局中生成一個 行內盒(line box) 。請注意，文本溢出了正文，我們將在下一步處理這個問題。

　　因為加上“world”長度后實際長度比較設置大并且我們沒有設置 overflow 屬性，所以引擎會向其父級報告它在布局文本時停止的位置。

　　由于父級已收到其子級無法完成所有內容布局的指令，因此它會克隆包含所有樣式的 行內盒(line box)，并傳遞該框的信息以完成布局。

　　布局完成后，瀏覽器會返回 box tree，解析尚未解決的所有基于 auto 或基于百分比的值。 在圖中，可以看到正文和段落現在包含所有 “Hello world”，因為它的 height 設置為 auto。

　　處理浮動 float

　　現在讓布局變得更復雜一點。我們將使用一個普通布局，其中有一個按鈕，內容為 “Share It”，并將其浮動到一段文本的左側。浮動本身被認為是“shrink-to-fit” 上下文。之所以將其稱為“shrink-to-fit”，是因為如果尺寸是自動的，則該框將圍繞其內容進行收縮。

　　浮動盒子是與這種布局類型匹配的盒子的一種類型，但是還有許多其他的盒子，例如絕對定位盒子(包括 position: fixed)和基于自動調整大小的表格單元格，如下代碼：

　　SHARE IT

　　Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesq

　　該過程開始時遵循與“Hello world”示例相同的模式，因此我將跳到我們開始處理浮動按鈕的位置。

　　由于浮動創建了一個新的塊格式化上下文(BFC)，并且是一個 shrink-to-fit 上下文，因此瀏覽器執行一種稱為內容度量的特定布局類型。

　　在這種模式下，它看起來與其他布局相同，但有一個重要的區別，即它是在無限空間中完成的。在此階段，瀏覽器所做的就是以 BFC 的最大和最小寬度布局 BFC 樹。

　　在本例中，它使用文本布局一個按鈕，因此其最窄的大小(包括所有其他CSS框)將是最長單詞的大小。在最寬的地方，它將是一行的所有文本，加上 CSS Box。注意:這里按鈕的顏色不是文字的顏色。這只是為了說明問題。

　　現在我們知道最小寬度是86px，最大寬度是115px，我們將此信息傳遞回父類的box，讓它決定寬度并適當地放置按鈕。在這個場景中，有足夠的空間來適應浮動的最大大小，這就是按鈕的布局方式。

　　為了確保瀏覽器遵循標準，并且內容圍繞浮動，瀏覽器更改了 article 的 BFC 的幾何形狀。這個幾何圖形被傳遞給段落，以便在段落布局期間使用。

　　從這里開始，瀏覽器遵循與第一個示例相同的布局過程——但是它確保任何內聯內容的內聯和塊的起始位置都位于浮動所占用的約束空間之外。

　　當瀏覽器繼續沿著樹向下移動并克隆節點時，它將越過約束空間的塊位置。這允許最后一行文本(以及它之前的一行)以內聯方向開始于content box 的開頭。然后瀏覽器返回到樹中，根據需要解析 auto 和百分數。

　　了解片段(UNDERSTANDING FRAGMENTATION

　　關于布局如何工作的最后一個方面是碎片化。 如果你曾經打印過網頁或使用過CSS多列，那么你已經利用了碎片。 碎片化是將內容分開以使其適合不同幾何形狀的邏輯。 讓我們來看看同一個例子，利用 CSS 多列情況:

　　Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh orci, tincidunt eget enim et, pellentesque condimentum risus. Aenean sollicitudin risus velit, quis tempor leo malesuada vel. Donec consequat aliquet mauris. Vestibulum ante ipsum primis in faucibus

　　一旦瀏覽器到達 multicol 格式化上下文盒子，它就會看到它有一組設定的列。

　　它遵循以前類似的克隆模型，并創建了一個具有正確維度的碎片處理程序，以滿足作者對其列的要求。

　　然后瀏覽器按照與之前相同的模式盡可能多地布局行，然后瀏覽器創建另一個碎片管理器，并繼續完成布局。

　　繪畫(Painting)

　　來回顧一下我們現在的情況，我們取出所有的 CSS 內容，對其進行解析，將其級聯到DOM 樹中，并完成布局。但是我們還沒有對布圖應用顏色、邊框、陰影和類似的設計處理——處理這些過程被稱為繪畫。

　　繪畫基本上是由CSS標準化的，簡單地說，你可以按照以下順序繪畫:

　　background;

　　border;

　　and content.

　　更多繪畫的順序可查看 CSS 2.2 Appendix E。

　　因此，如果我們從前面的“SHARE IT”按鈕開始，并遵循這個過程，它繪制過程大致如下:

　　完成后，它將轉換為位圖，最終每個布局元素(甚至文本)都成為引擎中的圖像。

　　關于 Z-INDEX

　　現在，我們大多數的網站都不是由單一的元素組成的。此外，我們經常希望某些元素出現在其他元素之上。為了實現這一點，我們可以利用 z-index 的特性將一個元素疊加到另一個元素上。

　　這可能感覺就像我們在設計軟件中使用圖層一樣，但是唯一存在的圖層是在瀏覽器的合成器中。看起來好像我們在使用 z-index 創建新層，但實際上并不是這樣，那么到底是怎么樣呢?

　　我們要做的是創建一個新的堆棧上下文。創建一個新的堆疊上下文可以有效地改變你繪制元素的順序。讓我們來看一個例子:

　　Item 1

　　Item 2

　　如果沒有使用 z-index，上面的文檔將按照文檔順序繪制，這將把 “Item 2” 置于 “Item 1” 之上。但由于 z-index 的影響，繪畫順序發生了變化。讓我們逐步完成每個階段，類似于我們之前完成布局的方式。

　　瀏覽器以根框開頭，我們在后臺畫畫。

　　然后瀏覽器按照文檔順序遍歷較低層次的堆棧上下文(在本例中是“Item 2”)，并開始按照上面的規則繪制該元素。

　　然后它遍歷到下一個最高的堆棧上下文(在本例中是“Item 1”)，并按照 CSS 2.2中定義的順序繪制它。

　　z-index 不影響顏色，只影響哪些元素對用戶可見，因此也不影響哪些文本和顏色可見。

　　組成(COMPOSITION)

　　在這個階段，我們至少有一個位圖從繪畫傳遞到合成。合成程序的工作是創建一個或多個層，并將位圖呈現到屏幕上供最終用戶查看。

　　此時一個合理的問題是，“為什么任何站點都需要不止一個位圖或合成層?”，根據我們目前看到的例子，我們真的不會這么做。我們來看一個稍微復雜一點的例子。假設在一個假設的世界中，Office 團隊想讓 Clippy 重新上線，他們想通過 CS S轉換讓Clippy 跳動來吸引人們對他的注意。

　　動畫 Clippy 的代碼可以是這樣的:

　　當瀏覽器讀取 web 開發人員希望在無限循環中為 Clippy 添加動畫時，它有兩個選項:

　　它可以返回到動畫的每一幀的重繪階段，并生成一個新的位圖以返回合成器。

　　或者它可以生成兩個不同的位圖，并允許合成程序僅在應用了該動畫的層上執行動畫本身。

　　在大多數情況下，瀏覽器將選擇選項2并生成以下內容(我有意簡化了Word Online為此示例生成的圖層數量)：

　　然后，它將重新組合剪輯位圖在正確的位置，并處理脈動動畫。這對于性能來說是一個很好的優勢，因為在許多引擎中，合成程序是在它自己的線程上的，這樣就可以解除主線程的阻塞。如果瀏覽器選擇上面的選項1，它將不得不阻塞每一幀以完成相同的結果，這將對最終用戶的性能和響應能力產生負面影響。

　　創造互動的視覺

　　正如我們剛剛了解到的，我們使用了所有的樣式和DOM，并生成了一個呈現給最終用戶的圖像。那么瀏覽器如何創建交互性的假象呢?嗯，我相信你現在已經學過了，所以讓我們看一個例子，用我們的 “SHARE IT” 按鈕作為類比:

　　button {

　　float: left;

　　background: rgb(210, 32, 79);

　　padding: 3px 10px;

　　border: 2px solid black;

　　}

　　button:hover {

　　background: teal;

　　color: black;

　　}

　　我們在這里添加的是一個偽類，它告訴瀏覽器在用戶懸停在按鈕上時更改按鈕的背景和文本顏色。這就引出了一個問題，瀏覽器如何處理這個問題?

　　瀏覽器不斷跟蹤各種輸入，當這些輸入正在移動時，它會經歷稱為命中測試的過程。 對于此示例，該過程如下所示：

　　用戶將鼠標移到按鈕上。

　　瀏覽器觸發鼠標已移動的事件，并進入命中測試算法，該算法本質上是問“鼠標正在觸摸哪個 box”

　　該算法返回鏈接到我們的 “SHARE IT” 按鈕。

　　瀏覽器會問這個問題:“既然有鼠標在你上方盤旋，我應該做什么?”。

　　它快速運行此框及其子框的樣式/級聯，并確定:hover 在聲明塊內部有一個僅使用繪制樣式調整的偽類。

　　它將這些樣式掛起 DOM 元素(正如我們在級聯階段所學到的)，在這種情況下是按鈕。

　　它跳過布局，直接繪制一個新的位圖。

　　新的位圖被傳遞給合成程序，然后傳遞給用戶。

　　總結

　　希望這部分對你關于css 解析過程多多少少有點幫助，共進步!

　　代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。