由图中我们可以看到，一个自定义不书写任何样式的p元素在样式计算过后都会产生很多的样式值，这是因为浏览器渲染每个元素的前提条件是，该元素的所有CSS属性必须有值
那么一个元素的属性值从无到有经历了哪些过程呢？
属性值计算的4个步骤
一、确定声明值
将样式表中没有冲突的声明，作为CSS属性值
假设我们需要设置一个元素的CSS属性值，一开始所有属性值都为空，经历步骤一的计算就可以确定下来部分属性的值
二、层叠冲突
对样式表有冲突的声明使用层叠规则，确定CSS属性值
经过步骤二后确定出font-size等属性的值
三、使用继承
对仍然没有值且可以继承的属性，则继承父元素的值
即使是根元素浏览器都会有默认的样式表，所以说如果一个元素经历步骤一和步骤二后某个属性仍然没有值，则会依次向上去继承父元素中的属性值，当然并不是所有的属性都可以继承，详情的规则可以参照MDN的官方文档。
四、使用默认值
对仍然没有值的属性，使用默认值
以width属性为例，默认值可以在MDN官方文档中查询到。所有的属性值都有自己的默认值。
所以经历以上四个步骤后，该元素的所有CSS属性的值都会计算完毕
看一个经典的面试题
先明确一点就是color属性是可以被继承的
面试题：下图中a标签中文字的颜色是什么？
左题目，右答案
如果你对于a标签为什么没有不是红色有疑问的话，可以继续往下看
通过浏览器调试工具我们可以看到，a标签在浏览器的默认样式表（用户代理样式表）表中存在color属性，所以计算的过程中，第一步就已经确定了a标签的color属性值了
而p标签在浏览器的默认样式表（用户代理样式表）表中不存在color属性，则会在走到第三步时从父元素div中继承color的属性值
所以这也是为什么p标签中文字颜色是红色而a标签不是
网友评论