关于CSS属性值的计算过程（仅做参考）

这不合理

第一次发帖，语言组织不好，请见谅，如果有不明白的可以留言


学过CSS的都知道，元素在页面中的显示完全是靠CSS提供样式数据，但CSS中各种属性是如何计算属性值的？

首先，在浏览器渲染元素时，会按照HTML文档的树形目录结构，一个一个元素依次渲染

而渲染的前提条件就是每个元素的所有CSS属性都必须拥有属性值

对的，你没看错，是所有CSS属性都必须有属性值，才能被浏览器渲染

那么除了作者样式表（author style sheets），和用户代理样式表（User agent stylesheet）中的样式外其他属性是如何确定的？

                               
登录/注册后可看大图

这里就不得不提到属性值的计算过程了

一个元素从所有CSS属性都没有值，到所有CSS属性都有值的过程，就叫做属性值的计算过程

属性值的计算过程分为4步：

• 确定声明值
• 层叠冲突
• 使用继承
• 使用默认值
  

首先第一步：确定声明值

浏览器会将参考样式表（作者样式表和浏览器默认样式表）中，没有声明冲突的值，作为属性值

怎么理解呢，简单来说就是：对比作者样式表和浏览器默认样式表中，只要是没有同一个样式多次应用到同一个元素上的属性，就直接将样式表中的值应用，无论是浏览器默认样式



此时会进入第二步：层叠冲突

浏览器会将有冲突的属性值，根据层叠规则，将这些属性值确定

层叠冲突简单来讲就是：经过三个步骤计算权重

• 比较重要性
• 比较特殊性
• 比较源次序
  

这里就不细讲了，相信大家都懂



经过上诉两个步骤后，如果还有属性没有确定属性值，则进行第三步：使用继承

继承仅会发生在部分属性上，可以简单概况为：文字相关的属性都可以被继承，继承的属性会使用其父元素对应的属性值



剩下仍然没有值的属性，要么是没有被参考样式表声明的值，要么是不能被继承的值，此时就会使用属性的默认值

每个属性都会有默认值，不信可以在Chrome浏览器的开发者工具中，Computed栏中查看元素的所有CSS属性

好了属性值的计算过程大体上就是这样的，以上内容仅供参考
@不二如是 @小甲鱼
求两位大神指点