HTML+CSS＜属性值的计算过程＞ 附加＜继承＞的简述

平台：VSCODE

版本：HTML5

HTML源代码需要浏览器的渲染才能正确的显示。

对于元素的渲染：一个元素一个元素依次进行渲染，渲染的顺序按照HTML的树型目录结构进行。

【】渲染元素的前提条件：

该元素的所以CSS属性必须有值。

简介图：

一个元素，从所有属性都没有值，再到所有属性都拥有值。这个过程，叫属性值的计算过程。

 

1. 确定声明值：参考样式表中没有冲突的声明，用来作为CSS样式来使用。
2. 层叠冲突：对样式表有冲突的声明使用层叠规则，计算值高的用来作为CSS样式使用。
3. 继承：对任然没有属性值的属性，若可以继承，便继承父元素的属性值。
4. 默认值：无父元素可以继承的，任然没有属性值的属性，采用默认值来指定属性值。

**继承**

子元素会继承父元素的某些CSS样式属性。

通常，更文字相关的属性都能够被继承。

特殊的CSS取值：

1. inherit：手动继承，将父元素的值取出，应用到指定的元素中。

 

1. Initial：初始值，将属性设置为默认值。

 

**一个经典的问题**

a元素是否会继承？

 

如图所示：a元素并未继承div父元素的属性值，在元素的所有CSS属性都必须有值的前提下，a元素的属性值来自于哪里？

浏览器在渲染时会为开发者提供一些浏览器代理样式表，在开发者未定义样式表时，浏览器将采用代理样式表中的样式，所有a元素在第一步-确定样式值时就已经完成了属性值的设置，完全不需要继承父元素的属性值。当然，若想要继承div父元素的值，可以采用 **color:inherit** 的方式来强制继承父元素的属性值。