[TOC] # 值處理 一旦用戶代理解析了一個文檔并構建了一個文檔樹，它就必須為樹中的每個元素以及相應的格式化結構中的每個框分配一個值給應用于目標媒體類型的每個屬性。 給定元素或框的css屬性的最終值是多步驟計算的結果： * 首先，為每個元素的每個屬性收集應用于元素的所有聲明值。可能有零個或多個聲明值應用于元素。 * 層疊產生層疊值。每個元素的每個屬性最多有一個級聯值。 * 默認值產生指定值。每個元素每個屬性只有一個指定值。 * 解析值依賴項將生成計算值。每個元素每個屬性只有一個計算值。 * 格式化文檔會產生使用值。如果該屬性適用于該元素，則元素僅具有給定屬性的使用值。 * 最后，根據顯示環境的約束條件將使用的值轉換為實際值。與使用值一樣，元素上給定屬性的實際值可能存在，也可能不存在。 <br> <br> ## 聲明值 應用于元素的每個屬性聲明都為與該元素關聯的屬性提供聲明值。 如 ~~~ <div class="box" style="width: 100px"> ~~~ <br> ~~~css div { width: 10em; } #box { width: 80%; } ~~~ <br> <br> ## 層疊值 通過計算層疊優先級，在第一步的多個值中找到優先級最高的那個。 <br> <br> ## 指定值 指定值是樣式表作者為該元素創作的給定屬性的值。 它是通過默認進程放入層疊值的結果，保證每個元素上的每個屬性都存在指定值。 在許多情況下，指定值是層疊值。 但是，如果根本沒有層疊值，則指定值為默認值。 <br> <br> ## 計算值 計算值是解析屬性定義表的“計算值”行中定義的指定值的結果，通常將其絕對化以準備繼承。 > 注意：計算的值是繼承期間從父級傳遞到子級的值。出于歷史原因，它不一定是 `getComputedStyle()` 函數返回的值。 計算值可以是相對（即不相對于另一個值，如 red 或 2mm）或絕對（即相對于另一個值，如auto、2em）。計算一個相對值使其絕對化： * 具有相對單位（em、ex、vh、vw）的值必須通過乘以適當的參考尺寸來確定為絕對值 * 某些關鍵字（例如，smaller、bolder）必須根據其定義進行替換 * 某些屬性的百分比必須乘以參考值（由屬性定義） * 有效的相對URL必須解析為絕對URL <br> <br> ## 使用值 多個屬性值結合以后，不一定滿足規范的約束，需要根據規范規定的方式確定各個屬性最后采用的值。 > 例如，`width：auto` 的聲明無法在不知道父元素布局的情況下解析為長度，因此計算值為auto，而使用的值為絕對長度，例如100px。 > 如果一個屬性不適用于一個元素，它就沒有Used Values；例如，flex屬性對不是flex項的元素沒有Used Values。 <br> <br> ## 實際值 原則上可以使用 Used Values，但是用戶代理可能無法在給定環境中使用該值。 例如，用戶代理可能只能渲染具有整數像素寬度的邊界，因此可能必須近似使用的寬度。 此外，元素的字體大小可能需要根據字體的可用性或font-size-adjust屬性的值進行調整。 實際值是進行任何此類調整后的使用值。 <br> <br> # 參考資料 [CSS Cascading and Inheritance Level 4](https://drafts.csswg.org/css-cascade-4/#value-stages) [CSS的樣式表 內聯外部和內部優先級？](https://www.zhihu.com/question/269658819)