由圖中我們可以看到，一個(gè)自定義不書寫任何樣式的p元素在樣式計(jì)算過后都會(huì)產(chǎn)生很多的樣式值，這是因?yàn)?strong>瀏覽器渲染每個(gè)元素的前提條件是，該元素的所有CSS屬性必須有值

那么一個(gè)元素的屬性值從無到有經(jīng)歷了哪些過程呢？

屬性值計(jì)算的4個(gè)步驟

一、確定聲明值

將樣式表中沒有沖突的聲明，作為CSS屬性值

假設(shè)我們需要設(shè)置一個(gè)元素的CSS屬性值，一開始所有屬性值都為空，經(jīng)歷步驟一的計(jì)算就可以確定下來部分屬性的值

二、層疊沖突

對樣式表有沖突的聲明使用層疊規(guī)則，確定CSS屬性值

三、使用繼承

對仍然沒有值且可以繼承的屬性，則繼承父元素的值

即使是根元素瀏覽器都會(huì)有默認(rèn)的樣式表，所以說如果一個(gè)元素經(jīng)歷步驟一和步驟二后某個(gè)屬性仍然沒有值，則會(huì)依次向上去繼承父元素中的屬性值，當(dāng)然并不是所有的屬性都可以繼承，詳情的規(guī)則可以參照MDN的官方文檔。

四、使用默認(rèn)值

對仍然沒有值的屬性，使用默認(rèn)值

以width屬性為例，默認(rèn)值可以在MDN官方文檔中查詢到。所有的屬性值都有自己的默認(rèn)值。

所以經(jīng)歷以上四個(gè)步驟后，該元素的所有CSS屬性的值都會(huì)計(jì)算完畢

看一個(gè)經(jīng)典的面試題

先明確一點(diǎn)就是color屬性是可以被繼承的

面試題：下圖中a標(biāo)簽中文字的顏色是什么？

左題目，右答案

如果你對于a標(biāo)簽為什么沒有不是紅色有疑問的話，可以繼續(xù)往下看

通過瀏覽器調(diào)試工具我們可以看到，a標(biāo)簽在瀏覽器的默認(rèn)樣式表（用戶代理樣式表）表中存在color屬性，所以計(jì)算的過程中，第一步就已經(jīng)確定了a標(biāo)簽的color屬性值了

而p標(biāo)簽在瀏覽器的默認(rèn)樣式表（用戶代理樣式表）表中不存在color屬性，則會(huì)在走到第三步時(shí)從父元素div中繼承color的屬性值

所以這也是為什么p標(biāo)簽中文字顏色是紅色而a標(biāo)簽不是