目錄
- 繼承
- 一、什么是繼承？
- 2.1 祖先元素
- 2.2 默認繼承/默認不繼承
- 二、可繼承屬性
- 2.1 字體相關屬性
- 2.2 文本相關屬性
- 2.3 列表相關屬性
- 三、不可繼承屬性
- 3.1 盒模型相關屬性
- 3.2 背景相關屬性
- 四、屬性初始值
- 4.1 根元素
- 4.2 屬性的初始值
- 4.3 得出結論
- 五、強制繼承
- 5.1 initial關鍵字
- 5.2 inherit關鍵字
- 5.3 unset關鍵字
- 六、繼承的優先級
- 七、繼承的性能
- 7.1 減少渲染計算
- 7.2 精簡代碼
繼承
一、什么是繼承？
在 CSS 里，繼承是一種機制，借助它元素能夠從其祖先元素那里獲取屬性值這一特性可以讓代碼
更簡潔，減少重復的樣式聲明
2.1 祖先元素
<div class="outer"><div class="inner"></div>
</div>
- outer是innner的祖先元素
2.2 默認繼承/默認不繼承
在CSS中，每個 CSS 屬性定義的概述 都指出了這個屬性是默認繼承還是默認不繼承的 （"Inherited":Yes/No"）
- 對于可繼承屬性，沒有指定值時的子元素會取父元素的同屬性計算值
- 對于不可繼承屬性，子元素不會自動獲取父元素設置的這些同屬性計算值
/* 對于上面的HTML代碼 */
.outer{color:red;width:100px;
}
.inner{/* 當子元素沒有顯示聲明color與width的值，它們默認取什么呢？ */
}
二、可繼承屬性
某些 CSS 屬性具備繼承性，也就是說子元素會自動繼承父元素設置的這些屬性值。常見的可繼承屬性如下：
2.1 字體相關屬性
- font-family (
字體族) - font-size (
字體大小) - font-weight (
字體粗細) - font-style (
字體族)
2.2 文本相關屬性
- color (
文本顏色) - text-align (
文本對齊方式) - line-height (
行高)
2.3 列表相關屬性
- line-style-type (
列表項標記類型) - line-style-position (
列表項標記位置)
三、不可繼承屬性
還有部分 CSS 屬性是不可繼承的，子元素不會自動獲取父元素設置的這些屬性值。常見的不可繼承屬性有：
3.1 盒模型相關屬性
- width (
寬度) - height (
高度) - margin (
外邊距) - padding (
內邊距) - border (
邊框)
3.2 背景相關屬性
- background-color (
背景顏色) - background-image (
背景圖像)
四、屬性初始值
上面我們提到了默認繼承和默認不繼承屬性的特點與具體類型
那么現在出現一個問題：
父元素的屬性來自哪里？對于不可繼承屬性，這些屬性默認取值又是什么？
4.1 根元素
- 首先我們需要知道一個概念“根元素”，它是整個文檔樹的起始點，也是
所有其他元素的父元素或者祖先元素 - 在 HTML 文檔中，
<html>元素是根元素 - 對于大部分屬性，只有文檔的根元素會
使用屬性的初始值，而其他元素會依據繼承規則或者層疊規則來確定屬性值
4.2 屬性的初始值
- 屬性的初始值是由 CSS 規范定義的，這些初始值的定義是為了保證在不同瀏覽器和設備上有一個統一的基礎樣式表現。
- 比如
color屬性的初始值是black，font-size的初始值是medium等
4.3 得出結論
-
對于具有繼承性的屬性
- 若子元素沒有為這些屬性顯式聲明值，它們會從父元素那里繼承屬性值。
- 因為根元素是所有其他元素的
祖先，所以在中間元素沒有重新賦值的情況下，子元素最終會繼承根元素上設置的屬性值
?
-
對于默認不繼承的屬性
- 當元素沒有被顯式地設置該屬性值時，元素使用的就是該屬性的初始值。
五、強制繼承
在某些情景，可能我們想要指定的元素屬性強制繼承自父元素或重置為初始值
這時就可能使用到三個關鍵字：initial關鍵字,inherit關鍵字，unset關鍵字
5.1 initial關鍵字
initial關鍵字的作用是把屬性值設置為該屬性在 CSS規范 里定義的初始值
- 對于可繼承屬性，使用
initial會讓元素放棄繼承父元素的屬性值，轉而使用屬性的初始值 - 對于不可繼承屬性，
initial同樣會將屬性值設定為初始值。
5.2 inherit關鍵字
inherit關鍵字的主要作用是讓元素強制繼承其父元素的某個屬性值，不管該屬性在默認情況下是否具備繼承性
- 對于可繼承屬性，
inherit關鍵字會強化這種繼承行為。即便可能存在其他因素干擾繼承，也能確保元素繼承父元素的屬性值。 - 對于不可繼承屬性，
inherit關鍵字可以打破常規，讓元素繼承父元素的該屬性值
5.3 unset關鍵字
unset關鍵字的行為取決于屬性是否具有繼承性
- 對于可繼承屬性，它會使用繼承值
- 對于不可繼承屬性，它的效果等同于
initial，也就是使用屬性的初始值
六、繼承的優先級
繼承的屬性值優先級是最低的。若你給元素直接設置了某個屬性值，這個值會覆蓋繼承來的值。
七、繼承的性能
7.1 減少渲染計算
- 對于具有繼承性的屬性，只需要計算一次父元素的屬性值，從而節省了渲染時間和計算資源，提高了頁面的渲染性能
7.2 精簡代碼
- 通過繼承，我們可以在父元素上統一設置一些共有的樣式屬性，這樣不僅使 CSS 代碼更簡潔易讀，也減少了代碼量，從而加快了瀏覽器下載和解析 CSS 文件的速度，間接提高了頁面的加載性能
 -- 圖形界面)
