unset

如果屬性是繼承的，unset 將解析為繼承值。否則，將使用初始值。這基本上意味著 unset 根據(jù)屬性是否繼承來(lái)重置屬性。這是一個(gè)演示，它切換 unset 以顯示其對(duì)具有不同特異性級(jí)別的元素的影響。

revert

如果沒(méi)有在元素上設(shè)置 CSS 屬性，那么它是否會(huì)獲得任何樣式？當(dāng)然。它使用瀏覽器的默認(rèn)樣式。

例如，<span></span> 元素的 display 屬性的初始值為 inline，但我們可以在樣式表中將其指定為 block。使用以下演示中的按鈕在 <span></span> 元素的 display 和 color 屬性上切換 revert：

<span></span> 正確地恢復(fù)為內(nèi)聯(lián)元素，但是等等！您是否注意到 <span></span> 的顏色變?yōu)榫G色而不是瀏覽器的默認(rèn)黑色值？這是因?yàn)?revert 允許繼承。它將追溯到瀏覽器的默認(rèn)值以設(shè)置顏色，但是由于我們?cè)?<p></p> 元素上顯式設(shè)置了綠色，因此這就是繼承的內(nèi)容。

在開(kāi)發(fā)者工具中查找計(jì)算值

這就是我們開(kāi)始討論開(kāi)發(fā)者工具中計(jì)算值的地方。與屬性的默認(rèn)值一樣，CSS 屬性的計(jì)算值由 CSS 規(guī)范中該屬性的定義表確定。以下是 height 屬性的外觀。

假設(shè)我們?cè)?CSS 中使用相對(duì)長(zhǎng)度，例如 10em 或 70% 或 5vw 之一。由于這些是相對(duì)于某些東西——字體大小或視口——它們需要解析為像素絕對(duì)值。例如，如果視口寬度為 1000px，則寬度為 10% 的元素可能計(jì)算為 100px，但在視口寬度發(fā)生變化時(shí)，則會(huì)計(jì)算為其他數(shù)字。

這些值在 DOM 修改時(shí)在稱為計(jì)算樣式計(jì)算的過(guò)程中計(jì)算。這使瀏覽器知道將哪些樣式應(yīng)用于每個(gè)頁(yè)面元素。

樣式計(jì)算包含多個(gè)步驟，涉及多個(gè)值。這些在 CSS 級(jí)聯(lián)和繼承級(jí)別 4 規(guī)范中進(jìn)行了記錄，它們都會(huì)影響我們?cè)凇坝?jì)算”選項(xiàng)卡中看到的最終值。接下來(lái)讓我們看看這些。

值及其處理方式

為樣式計(jì)算過(guò)程定義的值包括聲明值、指定值、級(jí)聯(lián)值、計(jì)算值、使用值和實(shí)際值。誰(shuí)知道有這么多，對(duì)吧？

聲明值

聲明值是應(yīng)用于元素的任何屬性聲明。瀏覽器根據(jù)一些條件識(shí)別這些聲明，包括：

• 聲明位于應(yīng)用于當(dāng)前文檔的樣式表中
• 樣式聲明中存在匹配的選擇器
• 樣式聲明包含有效的語(yǔ)法（即，有效的屬性名稱和值）

以下 HTML：

<code><main>
? <p>It's not denial. I'm just selective about the reality I accept.</p>
</main></code>

以下是應(yīng)用于文本字體大小的聲明值：

<code>main {
? font-size: 1.2em; /* 如果段落元素沒(méi)有被專門(mén)定位，這將適用，即使那樣，作為繼承值，而不是“聲明值” */
}
?
main > p {
? font-size: 1.5em; /* 聲明值 */
}</code>

級(jí)聯(lián)值

應(yīng)用于元素的所有聲明值列表都根據(jù)以下內(nèi)容進(jìn)行優(yōu)先級(jí)排序以返回單個(gè)值：

• 聲明的來(lái)源（它來(lái)自瀏覽器、開(kāi)發(fā)人員還是其他來(lái)源？）
• 聲明是否標(biāo)記為“!important”
• 規(guī)則的具體程度（例如，span {} 與 section span {}）
• 外觀順序（例如，如果應(yīng)用多個(gè)聲明，則使用最后一個(gè)聲明）

換句話說(shuō)，級(jí)聯(lián)值是“獲勝”的聲明。如果級(jí)聯(lián)沒(méi)有產(chǎn)生獲勝的聲明值，那么就沒(méi)有級(jí)聯(lián)值。

<code>main > p  {
? font-size: 1.2em;
}
?
main > .product-description { /* 上一個(gè)規(guī)則中定位的相同段落 */
? font-size: 1.2em; /* 基于特異性和文檔順序的級(jí)聯(lián)值，忽略所有其他考慮因素，例如來(lái)源 */
}</code>

指定值

如前所述，級(jí)聯(lián)的輸出可能是空的。但是，仍然需要通過(guò)其他方式找到值。

現(xiàn)在，假設(shè)我們沒(méi)有為元素上的特定屬性聲明值，而是為父元素聲明了值。這是我們經(jīng)常故意做的事情，因?yàn)闊o(wú)需在多個(gè)位置設(shè)置相同的值。在這種情況下，將使用父元素的繼承值。這稱為指定值。

在許多情況下，級(jí)聯(lián)值也是指定值。但是，如果不存在級(jí)聯(lián)值并且所關(guān)注的屬性是繼承的（無(wú)論是默認(rèn)繼承還是使用 inherit 關(guān)鍵字），它也可以是繼承值。如果屬性未繼承，則指定值是屬性的初始值，如前所述，也可以使用 initial 關(guān)鍵字顯式設(shè)置。

總而言之，指定值是我們打算在元素上使用的值，無(wú)論是否在該元素上顯式聲明它。這有點(diǎn)模糊，因?yàn)槿绻麡邮奖碇袥](méi)有任何聲明，瀏覽器的默認(rèn)值也可以成為指定值。

<code>/* 瀏覽器默認(rèn)值 = 16px */
?
main > p {
? /* 沒(méi)有為段落元素及其所有祖先聲明字體大小的值 */
}</code>

計(jì)算值

前面我們簡(jiǎn)要討論了相對(duì)值需要如何解析為其像素絕對(duì)等效值。如前所述，此過(guò)程是預(yù)先確定的。例如，屬性定義表具有“計(jì)算值”字段，該字段詳細(xì)說(shuō)明了通常如何解析指定值。

在下面的示例中，我們使用 em，這是一個(gè)相對(duì)單位。在這里，在將屬性應(yīng)用于的元素進(jìn)行渲染時(shí)使用的最終值不是聲明值中顯示的固定數(shù)字，而是需要根據(jù)一些因素計(jì)算的值。

<code>main {
? font-size: 1.2em;
}
?
main > p {
? font-size: 1.5em; /* 聲明值 */
}</code>

段落元素的字體大小設(shè)置為 1.5em，它相對(duì)于 main 元素的字體大小值 1.2em。如果 main 是 元素的直接子元素——并且在上面沒(méi)有進(jìn)行額外的字體大小聲明，例如通過(guò)使用 :root 選擇器——我們可以假設(shè)段落字體大小的計(jì)算將遵循以下大致過(guò)程：

<code>Browser_Default_FontSize = 16px;
Calculated_FontSize_For_Main = 1.2 * Browser_Default_FontSize; // 19.2px
Calculated_FontSize_For_Paragraph = 1.5 * Calculated_FontSize_For_Main; // 28.8px</code>

28.8px 是計(jì)算值。這是一個(gè)演示：

打開(kāi)開(kāi)發(fā)者工具并查看“計(jì)算”選項(xiàng)卡中的計(jì)算字體大小。

假設(shè)我們使用的是 rem 單位：

<code>html {
? font-size: 1.2em;
}
?
main {
? font-size: 1.5rem;
}
?
div {
? font-size: 1.7rem;
}</code>

rem 單位的計(jì)算值基于根 HTML 元素的字體大小，這意味著計(jì)算會(huì)略有變化。在本例中，我們也在 HTML 元素上使用了相對(duì)單位，因此使用瀏覽器的默認(rèn)字體大小值來(lái)計(jì)算我們將用于解析所有 rem 值的基本字體大小。

<code>Browser_Default_FontSize = 16px
Root_FontSize = 1.2 * Browser_Default_FontSize; // 19.2px
Calculated_FontSize_For_Main = 1.5 * Root_FontSize; // 28.8px
Calculated_FontSize_For_Div = 1.7 * Root_FontSize; // 32.64px</code>

再次為這個(gè)演示打開(kāi)開(kāi)發(fā)者工具：

Browser_Default_FontSize 的值 16px 通常由瀏覽器使用，但這可能會(huì)因?yàn)g覽器而異。要查看您當(dāng)前的默認(rèn)值，請(qǐng)選擇開(kāi)發(fā)者工具中的元素并查看為其顯示的字體大小。請(qǐng)注意，如果像我們的示例一樣為根元素顯式設(shè)置了值，您可能必須在“規(guī)則”選項(xiàng)卡中將其關(guān)閉。接下來(lái)，在“計(jì)算”選項(xiàng)卡中切換“顯示全部”或“瀏覽器樣式”（Firefox）復(fù)選框以查看默認(rèn)值。

在繼承期間，計(jì)算值將從父元素傳遞給子元素。此計(jì)算過(guò)程考慮了我們前面看到的四個(gè)繼承控制關(guān)鍵字。通常，相對(duì)值變?yōu)榻^對(duì)值（即 1rem 變?yōu)?16px）。這也是相對(duì) URL 變?yōu)榻^對(duì)路徑的地方，以及諸如 bolder（font-weight 屬性的值）之類的關(guān)鍵字被解析的地方。您可以在文檔中看到更多此類示例。

使用值

使用值是在對(duì)計(jì)算值完成所有計(jì)算后的最終結(jié)果。在這里，所有相對(duì)值都變?yōu)榻^對(duì)值。此使用值將（暫時(shí)）應(yīng)用于頁(yè)面布局。您可能想知道為什么還需要進(jìn)一步計(jì)算。在處理指定值以計(jì)算值時(shí)，所有這些不都已在上一階段處理了嗎？

問(wèn)題是這樣的：某些相對(duì)值只有在此處才能解析為像素絕對(duì)值。例如，百分比指定的寬度可能需要頁(yè)面布局才能解析。但是，在許多情況下，計(jì)算值最終也成為使用值。

請(qǐng)注意，在某些情況下，使用值可能不存在。根據(jù) CSS 級(jí)聯(lián)和繼承級(jí)別 4 規(guī)范：

…如果屬性不應(yīng)用于元素，則它沒(méi)有使用值；因此，例如，flex 屬性在不是彈性項(xiàng)目的元素上沒(méi)有使用值。

實(shí)際值

有時(shí)，瀏覽器無(wú)法立即應(yīng)用使用值，需要進(jìn)行調(diào)整。此調(diào)整后的值稱為實(shí)際值?？紤]一下需要根據(jù)可用字體調(diào)整字體大小的情況，或者瀏覽器只能在渲染期間使用整數(shù)值并需要近似非整數(shù)值的情況。

瀏覽器樣式計(jì)算中的繼承

總而言之，繼承控制為未顯式設(shè)置的屬性應(yīng)用于元素的值。對(duì)于繼承屬性，此值取自父元素上計(jì)算的值，對(duì)于非繼承屬性，將設(shè)置該屬性的初始值（當(dāng)指定 initial 關(guān)鍵字時(shí)使用的值）。

我們前面簡(jiǎn)要討論了“計(jì)算值”的存在，但我們確實(shí)需要澄清一些事情。我們討論了計(jì)算值作為參與樣式解析過(guò)程的一種值類型，但“計(jì)算值”也是瀏覽器為頁(yè)面樣式計(jì)算的值的通用術(shù)語(yǔ)。您通?？梢酝ㄟ^(guò)周?chē)纳舷挛膩?lái)理解我們指的是哪種類型。

只有計(jì)算值才能訪問(wèn)繼承屬性。像素絕對(duì)值（例如 477px）、數(shù)字（例如 3）或值（例如 left（例如 text-align: left））已準(zhǔn)備好進(jìn)行繼承過(guò)程。像 85% 這樣的百分比值不是。當(dāng)我們?yōu)閷傩灾付ㄏ鄬?duì)值時(shí)，必須計(jì)算最終（即“使用”）值。百分比值或其他相對(duì)值將乘以參考大小（例如字體大?。┗蛑担ɡ缭O(shè)備視口的寬度）。因此，屬性的最終值可能只是聲明的值，也可能需要進(jìn)一步處理才能使用。

您可能已經(jīng)注意到，瀏覽器“計(jì)算”選項(xiàng)卡中顯示的值不一定是我們前面討論的計(jì)算值（如計(jì)算值與指定值或使用值）。相反，顯示的值與 getComputedStyle() 函數(shù)返回的值相同。此函數(shù)返回一個(gè)值，該值取決于屬性，將是計(jì)算值或使用值。

現(xiàn)在，讓我們看一些例子。

顏色繼承

<code>main {
? color: blue;
}

/* 顏色無(wú)論如何都會(huì)繼承，但我們也可以明確說(shuō)明： */
main > p {
? color: inherit;
}</code>

main 元素上 color 屬性的計(jì)算值為藍(lán)色。由于顏色默認(rèn)繼承，我們實(shí)際上不需要為段落子元素使用 color: inherit，因?yàn)樗罱K也會(huì)是藍(lán)色。但這有助于說(shuō)明這一點(diǎn)。

顏色值會(huì)經(jīng)歷自身的解析過(guò)程以成為使用值。

字體大小繼承

<code>main {
? font-size: 1.2em;
}

main > p {
? /* 未指定樣式 */
}</code>

正如我們?cè)陉P(guān)于值及其處理方式的部分中看到的，我們的字體大小相對(duì)值將計(jì)算為絕對(duì)值，然后由段落元素繼承，即使我們沒(méi)有顯式聲明它（同樣，字體大小默認(rèn)繼承）。如果我們之前通過(guò)全局段落元素選擇器設(shè)置了樣式，則段落可能會(huì)由于級(jí)聯(lián)而獲得一些額外的樣式。任何可能繼承的屬性值都將繼承，并且級(jí)聯(lián)和繼承沒(méi)有產(chǎn)生值的某些屬性將設(shè)置為其初始值。

百分比指定的字體大小繼承

<code>body {
? font-size: 18px;
}

main {
? font-size: 80%;
}

main > p {
? /* 未指定樣式 */
}</code>

與前面的示例類似，<main></main> 元素的字體大小將在準(zhǔn)備繼承之前被絕對(duì)化，段落將繼承一個(gè)字體大小，該字體大小是主體 18px 值的 80%，即 14.4px。

強(qiáng)制繼承和布局后計(jì)算

計(jì)算值通常在沒(méi)有布局的情況下盡可能多地解析指定值，但如前所述，某些值只能在布局后解析，例如百分比指定的寬度值。盡管 width 不是繼承屬性，但我們可以強(qiáng)制繼承以說(shuō)明布局前和布局后樣式解析。

這是一個(gè)人為的例子，但我們所做的是通過(guò)將 display 屬性設(shè)置為 none 來(lái)將元素從頁(yè)面布局中移除。我們的標(biāo)記中有兩個(gè) div 繼承了其父元素的寬度 50%。在我的開(kāi)發(fā)者工具“計(jì)算”選項(xiàng)卡中，第一個(gè) div 的計(jì)算寬度是絕對(duì)的，已解析為像素值（對(duì)我來(lái)說(shuō)是 243.75px）。另一方面，使用 display: none 從布局中移除的第二個(gè) div 的寬度仍然是 50%。

我們將假設(shè)父元素的指定值和計(jì)算值為 50%（布局前），使用值如“計(jì)算”選項(xiàng)卡下所示——對(duì)我來(lái)說(shuō)是 487.5px，布局后。此值被子 div 一分為二（包含塊的 50%）。

每當(dāng)瀏覽器視口的寬度發(fā)生變化時(shí)，都必須計(jì)算這些值。因此，百分比指定的值變?yōu)榘俜直扔?jì)算值，然后變?yōu)橄袼厥褂弥怠?/p>

默認(rèn)繼承的屬性

您如何知道屬性是否默認(rèn)繼承？對(duì)于 MDN 文檔中的每個(gè) CSS 屬性，都有一個(gè)規(guī)范部分提供一些額外的詳細(xì)信息，包括該屬性是否繼承。以下是 color 屬性的外觀：

哪些屬性默認(rèn)繼承，哪些屬性不繼承，這在很大程度上取決于常識(shí)。

MDN

另一個(gè)參考選項(xiàng)是 W3C 規(guī)范的屬性部分。另一個(gè)是這個(gè) StackOverflow 線程，在撰寫(xiě)本文時(shí)可能并不詳盡。

以下是一些默認(rèn)繼承的屬性示例：

• color
• direction
• font-family
• font-size
• font
• letter-spacing
• line-height
• list-style-type
• tab-size
• text-align
• text-justify
• text-transform
• visibility
• word-wrap

不繼承的屬性示例（但您可以使用 inherit 關(guān)鍵字強(qiáng)制繼承）：

• box-shadow
• border
• content
• height
• margin
• object-fit
• opacity
• padding
• position
• transform
• transition
• width
• z-index

希望這能讓您對(duì)瀏覽器如何計(jì)算樣式以及如何在開(kāi)發(fā)者工具中引用它們有一個(gè)清晰的了解。如您所見(jiàn)，幕后有很多值。擁有這些上下文對(duì)于幫助您排除工作故障以及進(jìn)一步了解我們所知的奇妙語(yǔ)言 CSS 非常有幫助。

進(jìn)一步閱讀

• QuirksMode.org 的 inherit、initial 和 unset 值
• Asha Laxmi 的 CSS 繼承：簡(jiǎn)介
• Heydon Pickering 的 CSS 繼承、級(jí)聯(lián)和全局范圍：您新的舊的壞最好的朋友
• Ollie Williams 的處理級(jí)聯(lián)、繼承和特異性的最新方法
• MDN 的級(jí)聯(lián)和繼承
• MDN 的繼承
• MDN 的級(jí)聯(lián)
• CSS 級(jí)聯(lián)和繼承級(jí)別 4（W3C 規(guī)范）
• Ilya Grigorik 的渲染樹(shù)構(gòu)建、布局和繪制
• MDN 的 Window.getComputedStyle()
• Aaron Gustafson 的交互式 URL