【CSS】层叠，优先级与继承（三）：超详细继承知识点

继承
- 一、什么是继承？
- - [2.1 祖先元素](#2.1 祖先元素)
  - [2.2 默认继承/默认不继承](#2.2 默认继承/默认不继承)
- 二、可继承属性
- - [2.1 字体相关属性](#2.1 字体相关属性)
  - [2.2 文本相关属性](#2.2 文本相关属性)
  - [2.3 列表相关属性](#2.3 列表相关属性)
- 三、不可继承属性
- - [3.1 盒模型相关属性](#3.1 盒模型相关属性)
  - [3.2 背景相关属性](#3.2 背景相关属性)
- 四、属性初始值
- - [4.1 根元素](#4.1 根元素)
  - [4.2 属性的初始值](#4.2 属性的初始值)
  - [4.3 得出结论](#4.3 得出结论)
- 五、强制继承
- - [5.1 initial关键字](#5.1 initial关键字)
  - [5.2 inherit关键字](#5.2 inherit关键字)
  - [5.3 unset关键字](#5.3 unset关键字)
- 六、继承的优先级
- 七、继承的性能
- - [7.1 减少渲染计算](#7.1 减少渲染计算)
  - [7.2 精简代码](#7.2 精简代码)

继承

一、什么是继承？

在 CSS 里，继承是一种机制，借助它元素能够从其祖先元素 那里获取属性值 这一特性可以让代码更简洁，减少重复的样式声明

2.1 祖先元素

html 复制代码

<div class="outer">
  <div class="inner"></div>
</div>

outer是innner的祖先元素

2.2 默认继承/默认不继承

在CSS中，每个 CSS 属性定义的概述都指出了这个属性是默认继承还是默认不继承的（"Inherited":Yes/No"）

对于可继承属性，没有指定值时的子元素会取父元素的同属性计算值
对于不可继承属性，子元素不会自动获取父元素设置的这些同属性计算值

css 复制代码

/* 对于上面的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 文件的速度，间接提高了页面的加载性能

【CSS】层叠，优先级与继承（三）：超详细继承知识点

目录

继承

一、什么是继承？

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 精简代码