CSS 屬性計算

CSS 屬性計算過程

你是否了解 CSS 的屬性計算過程呢？

有的同學可能會講，CSS屬性我倒是知道，例如：

p{
  color : red;
}

上面的 CSS 代碼中，p 是元素選擇器，color 就是其中的一個 CSS 屬性。

但是要說 CSS 屬性的計算過程，還真的不是很清楚。

沒關系，通過此篇文章，能夠讓你徹底明白什么是 CSS 屬性的計算流程。

首先，不知道你有沒有考慮過這樣的一個問題，假設在 HTML 中有這么一段代碼：

<body>
  <h1>這是一個h1標題</h1>
</body>

上面的代碼也非常簡單，就是在 body 中有一個 h1 標題而已，該 h1 標題呈現(xiàn)出來的外觀是如下：

目前我們沒有設置該 h1 的任何樣式，但是卻能看到該 h1 有一定的默認樣式，例如有默認的字體大小、默認的顏色。

那么問題來了，我們這個 h1 元素上面除了有默認字體大小、默認顏色等屬性以外，究竟還有哪些屬性呢？

答案是該元素上面會有 CSS 所有的屬性。你可以打開瀏覽器的開發(fā)者面板，選擇【元素】，切換到【計算樣式】，之后勾選【全部顯示】，此時你就能看到在此 h1 上面所有 CSS 屬性對應的值。

換句話說，我們所書寫的任何一個 HTML 元素，實際上都有完整的一整套 CSS 樣式。這一點往往是讓初學者比較意外的，因為我們平時在書寫 CSS 樣式時，往往只會書寫必要的部分，例如前面的：

p{
  color : red;
}

這往往會給我們造成一種錯覺，認為該 p 元素上面就只有 color 屬性。而真實的情況確是，任何一個 HTML 元素，都有一套完整的 CSS 樣式，只不過你沒有書寫的樣式，大概率可能會使用其默認值。例如上圖中 h1 一個樣式都沒有設置，全部都用的默認值。

但是注意，我這里強調的是“大概率可能”，難道還有我們“沒有設置值，但是不使用默認值”的情況么？

嗯，確實有的，所以我才強調你要了解“CSS 屬性的計算過程”。

總的來講，屬性值的計算過程，分為如下這么 4 個步驟：

確定聲明值
層疊沖突
使用繼承
使用默認值

確定聲明值

首先第一步，是確定聲明值。所謂聲明值就是作者自己所書寫的 CSS 樣式，例如前面的：

p{
  color : red;
}

這里我們聲明了 p 元素為紅色，那么就會應用此屬性設置。

當然，除了作者樣式表，一般瀏覽器還會存在“用戶代理樣式表”，簡單來講就是瀏覽器內置了一套樣式表。

在上面的示例中，作者樣式表中設置了 color 屬性，而用戶代理樣式表（瀏覽器提供的樣式表）中設置了諸如 display、margin-block-start、margin-block-end、margin-inline-start、margin-inline-end 等屬性對應的值。

這些值目前來講也沒有什么沖突，因此最終就會應用這些屬性值。

層疊沖突

在確定聲明值時，可能出現(xiàn)一種情況，那就是聲明的樣式規(guī)則發(fā)生了沖突。

此時會進入解決層疊沖突的流程。而這一步又可以細分為下面這三個步驟：

比較源的重要性
比較優(yōu)先級
比較次序

來來來，我們一步一步來看。

比較源的重要性

當不同的 CSS 樣式來源擁有相同的聲明時，此時就會根據(jù)樣式表來源的重要性來確定應用哪一條樣式規(guī)則。

那么問題來了，咱們的樣式表的源究竟有幾種呢？

整體來講有三種來源：

瀏覽器會有一個基本的樣式表來給任何網頁設置默認樣式。這些樣式統(tǒng)稱用戶代理樣式。
網頁的作者可以定義文檔的樣式，這是最常見的樣式表，稱之為頁面作者樣式。
瀏覽器的用戶，可以使用自定義樣式表定制使用體驗，稱之為用戶樣式。

對應的重要性順序依次為：頁面作者樣式 > 用戶樣式 > 用戶代理樣式

更詳細的來源重要性比較，可以參閱 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Cascade

我們來看一個示例。

例如現(xiàn)在有頁面作者樣式表和用戶代理樣式表中存在屬性的沖突，那么會以作者樣式表優(yōu)先。

p{
  color : red;
  display: inline-block;
}

可以明顯的看到，作者樣式表和用戶代理樣式表中同時存在的 display 屬性的設置，最終作者樣式表干掉了用戶代理樣式表中沖突的屬性。這就是第一步，根據(jù)不同源的重要性來決定應用哪一個源的樣式。

比較優(yōu)先級

那么接下來，如果是在在同一個源中有樣式聲明沖突怎么辦呢？此時就會進行樣式聲明的優(yōu)先級比較。

例如：

<div class="test">
  <h1>test</h1>
</div>

.test h1{
  font-size: 50px;
}

h1 {
  font-size: 20px;
}

在上面的代碼中，同屬于頁面作者樣式，源的重要性是相同的，此時會以選擇器的權重來比較重要性。

很明顯，上面的選擇器的權重要大于下面的選擇器，因此最終標題呈現(xiàn)為 50px。

可以看到，落敗的作者樣式在 Elements>Styles 中會被劃掉。

有關選擇器權重的計算方式，不清楚的同學，可以進入此傳送門：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

比較次序

經歷了上面兩個步驟，大多數(shù)的樣式聲明能夠被確定下來。但是還剩下最后一種情況，那就是樣式聲明既是同源，權重也相同。

此時就會進入第三個步驟，比較樣式聲明的次序。

舉個例子：

h1 {
  font-size: 50px;
}

h1 {
  font-size: 20px;
}

在上面的代碼中，同樣都是頁面作者樣式，選擇器的權重也相同，此時位于下面的樣式聲明會層疊掉上面的那一條樣式聲明，最終會應用 20px 這一條屬性值。

至此，樣式聲明中存在沖突的所有情況，就全部被解決了。

使用繼承

層疊沖突這一步完成后，解決了相同元素被聲明了多條樣式規(guī)則究竟應用哪一條樣式規(guī)則的問題。

那么如果沒有聲明的屬性呢？此時就使用默認值么？

No、No、No，別急，此時還有第三個步驟，那就是使用繼承而來的值。

例如：

<div>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

div {
  color: red;
}

在上面的代碼中，我們針對 div 設置了 color 屬性值為紅色，而針對 p 元素我們沒有聲明任何的屬性，但是由于 color 是可以繼承的，因此 p 元素從最近的 div 身上繼承到了 color 屬性的值。

這里有兩個點需要同學們注意一下。

首先第一個是我強調了是最近的 div 元素，看下面的例子：

<div class="test">
  <div>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

div {
  color: red;
}
.test{
  color: blue;
}

因為這里并不涉及到選中 p 元素聲明 color 值，而是從父元素上面繼承到 color 對應的值，因此這里是誰近就聽誰的，初學者往往會產生混淆，又去比較權重，但是這里根本不會涉及到權重比較，因為壓根兒就沒有選中到 p 元素。

第二個就是哪些屬性能夠繼承？

關于這一點的話，大家可以在 MDN 上面很輕松的查閱到。例如我們以 text-align 為例，如下圖所示：

使用默認值

好了，目前走到這一步，如果屬性值都還不能確定下來，那么就只能是使用默認值了。

如下圖所示：

前面我們也說過，一個 HTML 元素要在瀏覽器中渲染出來，必須具備所有的 CSS 屬性值，但是絕大部分我們是不會去設置的，用戶代理樣式表里面也不會去設置，也無法從繼承拿到，因此最終都是用默認值。

好了，這就是關于 CSS 屬性計算過程的所有知識了。

一道面試題

好了，學習了今天的內容，讓我來用一道面試題測試測試大家的理解程度。

下面的代碼，最終渲染出來的效果，a 元素是什么顏色？p 元素又是什么顏色？

<div>
  <a href="">test</a>
  <p>test</p>
</div>

div {
  color: red;
}

大家能說出為什么會呈現(xiàn)這樣的結果么？

解答如下：

實際上原因很簡單，因為 a 元素在用戶代理樣式表中已經設置了 color 屬性對應的值，因此會應用此聲明值。而在 p 元素中無論是作者樣式表還是用戶代理樣式表，都沒有對此屬性進行聲明，然而由于 color 屬性是可以繼承的，因此最終 p 元素的 color 屬性值通過繼承來自于父元素。

你答對了么？-）

-EOF-

posted @ 2024-06-19 21:49 二價亞鐵閱讀(295) 評論(0) 收藏舉報

刷新頁面返回頂部

二價亞鐵.