計算值：超過眼睛不超過眼睛-css教學-PHP中文網

首頁

web前端

css教學

計算值：超過眼睛不超過眼睛

Christopher Nolan

Apr 03, 2025 am 09:29 AM

Computed Values: More Than Meets the Eye

前端開發者離不開瀏覽器開發者工具。本文將深入探討開發者工具中的“計算”選項卡，它雖然不起眼，卻能揭示許多重要信息，例如相對CSS 值是如何解析的。我們還將了解繼承如何在瀏覽器的樣式計算過程中發揮作用。

“計算”選項卡中的內容至關重要，因為它顯示了瀏覽器實際用於渲染網站的值。如果元素的樣式與預期不符，“計算”選項卡可以幫助您理解原因。

如果您習慣使用“樣式”選項卡（Firefox 中稱為“規則”），您可能想知道它與“計算”選項卡有何不同。它們都顯示應用於元素的樣式。答案是：“計算”選項卡顯示按字母順序排列的已解析樣式列表，其中包括樣式表中聲明的樣式、繼承的樣式以及瀏覽器的默認樣式。

另一方面，“樣式”選項卡精確地顯示所選元素的規則集，如同編寫時的樣子。因此，“樣式”選項卡可能顯示類似.subhead {font-size: 75%}的內容，而“計算”選項卡將顯示實際字體大小，或70% 當前解析後的值。例如，上面顯示的渲染文本的實際字體大小為13.2px。

接下來，讓我們簡要回顧一下繼承和級聯的概念，這是得出“計算”選項卡中計算值的兩個重要因素。

繼承和級聯速成課程

CSS 代表層疊樣式表，而“層疊”這個詞非常重要——級聯的行為方式是理解CSS 的關鍵。

MDN

級聯值得關注，因為它代表CSS 中的“C”。它是用於解決文檔不同樣式聲明源之間衝突的機制。

例如，假設一個樣式表兩次定義div 的寬度：

 <code>div { width: 65vw; } /* 在后面的某个位置*/ div { width: 85vw; }</code>

在此示例中，第二個寬度獲勝，因為它最後聲明。第一個寬度仍然可以使用!important獲勝，但這實際上是通過蠻力破壞級聯。關鍵是級聯算法確定哪些樣式應用於每個元素，並按預定順序對其進行優先級排序以確定一個值。

級聯適用於顯式設置的屬性，無論是瀏覽器、Web 開發人員還是用戶設置的。當級聯的輸出為空時，繼承就發揮作用了。發生這種情況時，元素父元素上屬性的計算值將作為該屬性的自身值被提取。例如，如果您為元素指定顏色，則如果您沒有指定子元素的顏色，所有子元素都將繼承該顏色。

在我們繼續之前，我們應該熟悉與繼承相關的四個關鍵屬性值。我們將在整篇文章中使用它們。

initial

在HTML 文檔中，DOM 樹的最高級別是元素，當我們在元素上使用initial關鍵字時，例如……

……該元素的文本顏色為黑色，即使元素設置為綠色。<code><div>選擇器具有更高的特異性，但是我們感興趣的是為什麼<code>initial轉換為黑色。

簡單來說，此關鍵字根據其定義表（在CSS 規範中）設置屬性的默認值。在這種情況下，黑色恰好是瀏覽器對初始顏色值的實現。

我在文章結尾提到，您可以通過查看MDN 上的頁面來了解屬性是否默認繼承。您也可以通過這種方式找到任何屬性的初始值。

inherit

對於非繼承屬性，此關鍵字強制繼承。在下面的示例中，<p>元素具有實心紅色邊框。 <code>border屬性不是默認繼承的，但是我們可以通過在border屬性上使用inherit關鍵字來告訴我們的<div>繼承在<code><p>元素上聲明的相同紅色邊框：</p> <h4 id="unset"> unset</h4> <p>如果屬性是繼承的， <code>unset將解析為繼承值。否則，將使用初始值。這基本上意味著unset根據屬性是否繼承來重置屬性。這是一個演示，它切換unset以顯示其對具有不同特異性級別的元素的影響。

revert

如果沒有在元素上設置CSS 屬性，那麼它是否會獲得任何樣式？當然。它使用瀏覽器的默認樣式。

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

<span></span>正確地恢復為內聯元素，但是等等！您是否注意到<span></span>的顏色變為綠色而不是瀏覽器的默認黑色值？這是因為revert允許繼承。它將追溯到瀏覽器的默認值以設置顏色，但是由於我們在<p>元素上顯式設置了綠色，因此這就是繼承的內容。</p> <h3 id="在開發者工具中查找計算值">在開發者工具中查找計算值</h3> <p>這就是我們開始討論開發者工具中計算值的地方。與屬性的默認值一樣，CSS 屬性的計算值由CSS 規範中該屬性的定義表確定。以下是<code>height屬性的外觀。

假設我們在CSS 中使用相對長度，例如10em 或70% 或5vw 之一。由於這些是相對於某些東西——字體大小或視口——它們需要解析為像素絕對值。例如，如果視口寬度為1000px，則寬度為10% 的元素可能計算為100px，但在視口寬度發生變化時，則會計算為其他數字。

這些值在DOM 修改時在稱為計算樣式計算的過程中計算。這使瀏覽器知道將哪些樣式應用於每個頁面元素。

樣式計算包含多個步驟，涉及多個值。這些在CSS 級聯和繼承級別4 規範中進行了記錄，它們都會影響我們在“計算”選項卡中看到的最終值。接下來讓我們看看這些。

值及其處理方式

為樣式計算過程定義的值包括聲明值、指定值、級聯值、計算值、使用值和實際值。誰知道有這麼多，對吧？

聲明值

聲明值是應用於元素的任何屬性聲明。瀏覽器根據一些條件識別這些聲明，包括：

聲明位於應用於當前文檔的樣式表中
樣式聲明中存在匹配的選擇器
樣式聲明包含有效的語法（即，有效的屬性名稱和值）

以下HTML：

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

以下是應用於文本字體大小的聲明值：

 <code>main { font-size: 1.2em; /* 如果段落元素没有被专门定位，这将适用，即使那样，作为继承值，而不是“声明值” */ } main > p { font-size: 1.5em; /* 声明值*/ }</code>

級聯值

應用於元素的所有聲明值列表都根據以下內容進行優先級排序以返回單個值：

聲明的來源（它來自瀏覽器、開發人員還是其他來源？）
聲明是否標記為“ !important ”
規則的具體程度（例如， span {}與section span {} ）
外觀順序（例如，如果應用多個聲明，則使用最後一個聲明）

換句話說，級聯值是“獲勝”的聲明。如果級聯沒有產生獲勝的聲明值，那麼就沒有級聯值。

 <code>main > p { font-size: 1.2em; } main > .product-description { /* 上一个规则中定位的相同段落*/ font-size: 1.2em; /* 基于特异性和文档顺序的级联值，忽略所有其他考虑因素，例如来源*/ }</code>

指定值

如前所述，級聯的輸出可能是空的。但是，仍然需要通過其他方式找到值。

現在，假設我們沒有為元素上的特定屬性聲明值，而是為父元素聲明了值。這是我們經常故意做的事情，因為無需在多個位置設置相同的值。在這種情況下，將使用父元素的繼承值。這稱為指定值。

在許多情況下，級聯值也是指定值。但是，如果不存在級聯值並且所關注的屬性是繼承的（無論是默認繼承還是使用inherit關鍵字），它也可以是繼承值。如果屬性未繼承，則指定值是屬性的初始值，如前所述，也可以使用initial關鍵字顯式設置。

總而言之，指定值是我們打算在元素上使用的值，無論是否在該元素上顯式聲明它。這有點模糊，因為如果樣式表中沒有任何聲明，瀏覽器的默認值也可以成為指定值。

 <code>/* 浏览器默认值= 16px */ main > p { /* 没有为段落元素及其所有祖先声明字体大小的值*/ }</code>

計算值

前面我們簡要討論了相對值需要如何解析為其像素絕對等效值。如前所述，此過程是預先確定的。例如，屬性定義表具有“計算值”字段，該字段詳細說明了通常如何解析指定值。

在下面的示例中，我們使用em，這是一個相對單位。在這裡，在將屬性應用於的元素進行渲染時使用的最終值不是聲明值中顯示的固定數字，而是需要根據一些因素計算的值。

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

段落元素的字體大小設置為1.5em，它相對於main元素的字體大小值1.2em。如果main是元素的直接子元素——並且在上面沒有進行額外的字體大小聲明，例如通過使用:root選擇器——我們可以假設段落字體大小的計算將遵循以下大致過程：

 <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 是計算值。這是一個演示：

打開開發者工具並查看“計算”選項卡中的計算字體大小。

假設我們使用的是rem 單位：

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

rem 單位的計算值基於根HTML 元素的字體大小，這意味著計算會略有變化。在本例中，我們也在HTML 元素上使用了相對單位，因此使用瀏覽器的默認字體大小值來計算我們將用於解析所有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>

再次為這個演示打開開發者工具：

Browser_Default_FontSize的值16px 通常由瀏覽器使用，但這可能會因瀏覽器而異。要查看您當前的默認值，請選擇開發者工具中的元素並查看為其顯示的字體大小。請注意，如果像我們的示例一樣為根元素顯式設置了值，您可能必須在“規則”選項卡中將其關閉。接下來，在“計算”選項卡中切換“顯示全部”或“瀏覽器樣式”（Firefox）複選框以查看默認值。

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

使用值

使用值是在對計算值完成所有計算後的最終結果。在這裡，所有相對值都變為絕對值。此使用值將（暫時）應用於頁面佈局。您可能想知道為什麼還需要進一步計算。在處理指定值以計算值時，所有這些不都已在上一階段處理了嗎？

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

請注意，在某些情況下，使用值可能不存在。根據CSS 級聯和繼承級別4 規範：

…如果屬性不應用於元素，則它沒有使用值；因此，例如， flex屬性在不是彈性項目的元素上沒有使用值。

實際值

有時，瀏覽器無法立即應用使用值，需要進行調整。此調整後的值稱為實際值。考慮一下需要根據可用字體調整字體大小的情況，或者瀏覽器只能在渲染期間使用整數值並需要近似非整數值的情況。

瀏覽器樣式計算中的繼承

總而言之，繼承控制為未顯式設置的屬性應用於元素的值。對於繼承屬性，此值取自父元素上計算的值，對於非繼承屬性，將設置該屬性的初始值（當指定initial關鍵字時使用的值）。

我們前面簡要討論了“計算值”的存在，但我們確實需要澄清一些事情。我們討論了計算值作為參與樣式解析過程的一種值類型，但“計算值”也是瀏覽器為頁面樣式計算的值的通用術語。您通常可以通過周圍的上下文來理解我們指的是哪種類型。

只有計算值才能訪問繼承屬性。像素絕對值（例如477px）、數字（例如3）或值（例如left （例如text-align: left ））已準備好進行繼承過程。像85% 這樣的百分比值不是。當我們為屬性指定相對值時，必須計算最終（即“使用”）值。百分比值或其他相對值將乘以參考大小（例如字體大小）或值（例如設備視口的寬度）。因此，屬性的最終值可能只是聲明的值，也可能需要進一步處理才能使用。

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

現在，讓我們看一些例子。

顏色繼承

<code>main { color: blue; } /* 颜色无论如何都会继承，但我们也可以明确说明： */ main > p { color: inherit; }</code>

main元素上color屬性的計算值為藍色。由於顏色默認繼承，我們實際上不需要為段落子元素使用color: inherit ，因為它最終也會是藍色。但這有助於說明這一點。

顏色值會經歷自身的解析過程以成為使用值。

字體大小繼承

<code>main { font-size: 1.2em; } main > p { /* 未指定样式*/ }</code>

正如我們在關於值及其處理方式的部分中看到的，我們的字體大小相對值將計算為絕對值，然後由段落元素繼承，即使我們沒有顯式聲明它（同樣，字體大小默認繼承）。如果我們之前通過全局段落元素選擇器設置了樣式，則段落可能會由於級聯而獲得一些額外的樣式。任何可能繼承的屬性值都將繼承，並且級聯和繼承沒有產生值的某些屬性將設置為其初始值。

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

<code>body { font-size: 18px; } main { font-size: 80%; } main > p { /* 未指定样式*/ }</code>

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

強制繼承和佈局後計算

計算值通常在沒有佈局的情況下盡可能多地解析指定值，但如前所述，某些值只能在佈局後解析，例如百分比指定的寬度值。儘管width不是繼承屬性，但我們可以強制繼承以說明佈局前和佈局後樣式解析。

這是一個人為的例子，但我們所做的是通過將display屬性設置為none來將元素從頁面佈局中移除。我們的標記中有兩個div 繼承了其父元素的寬度50%。在我的開發者工具“計算”選項卡中，第一個div 的計算寬度是絕對的，已解析為像素值（對我來說是243.75px）。另一方面，使用display: none從佈局中移除的第二個div 的寬度仍然是50%。

我們將假設父元素的指定值和計算值為50%（佈局前），使用值如“計算”選項卡下所示——對我來說是487.5px，佈局後。此值被子div 一分為二（包含塊的50%）。

每當瀏覽器視口的寬度發生變化時，都必須計算這些值。因此，百分比指定的值變為百分比計算值，然後變為像素使用值。