在網頁制作中，CSS是很重要的一個部分。它可以為HTML頁面添加樣式，包括顏色、字體大小、邊框、圖片等。但是，CSS是如何工作的？
首先，瀏覽器會將HTML文檔解析成DOM樹。DOM樹是一種樹形結構，它由HTML中的元素和它們的屬性組成。然后，瀏覽器會從DOM樹中生成另一種樹形結構：渲染樹。
渲染樹只包含要顯示在頁面上的元素和元素的CSS屬性。換句話說，渲染樹是DOM樹的一個子集。渲染樹中的元素和屬性是按照它們在HTML中出現的順序來構建的。
下面是一個例子：
<html>
<head>
<title>CSS底層渲染</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>這是一個段落。</p>
</body>
</html>
現在我們來看看瀏覽器是如何將它轉化為渲染樹的：
1. 瀏覽器解析HTML文檔，生成DOM樹。
2. 瀏覽器發現有一個樣式表，將其中的CSS規則應用于DOM樹，創建“帶樣式”的DOM樹。
3. 瀏覽器根據“帶樣式”的DOM樹創建渲染樹，對渲染樹中的每個節點應用樣式，計算它們應該在頁面上出現的位置和大小。在計算完成后，瀏覽器將渲染樹轉換為繪圖指令，并發送給圖形設備，顯示在屏幕上。這就是CSS底層的渲染原理。
上一篇css應用于網頁元素