CSS属性的计算过程

css属性值的计算过程

什么是css属性值的计算过程

某个元素从所有的CSS元素没有值，到所有的CSS属性都有值的过程叫做计算过程
也就是说就算只给div设置了一个背景颜色，不表示它没有其他属性值，它的所有css属性都有值

如何计算

分为四个步骤：（按顺序来，不能乱序）
    1.确定声明值：
        从作者样式表(我们所写的样式)和默认样式表(浏览器默认的样式)中找到没有冲突的样式，直接作为计算后的样式。
        （类似于red类型的会转化成rbg）

    2.层叠(css全称： 层叠样式表)
        对有冲突的样式进行层叠，通过以下三个步骤：
            1.比较重要性
                重要性从高到底：
                    1.带有important的作者样式
                    2.带有important的默认样式
                    3.作者样式
                    4.默认样式

            2.比较权重
                对每个样式进行计算：
                    sytye: 内敛为1 否则为0
                    id：id选择器的数量
                    属性：属性、类、伪类的数量
                    元素：元素 伪元素的数量

                比如：
                    .red {color : red}    0 0 1 0
                    h1 {color: red}       0 0 0 1
                    .div h1 .red           0 0 2 1   权重最大 优先级越高

            3.比较源次序
                如果权值相同，谁在下面谁优先级高

    3.继承
        对于仍然没有值的属性，若可以继承，则使用继承(可以去官网查看会不会继承，文字类大概率继承)

    4.使用默认值
        到目前还会没有值的(比如：background-color)会使用属性的默认值，每个属性都有默认值
        比如background-color的默认值是transparent(透明)

通过以上四个步骤 所有的css属性都会有值

因为继承发生在第三步  而有些元素因为有默认值 且跟作者元素没有冲突 导致内部元素没有继承
就是因为在某一部确定了值就不会进行下一步  比如：

<style>
    .box{
        color: red
    }
</style>
<div class='box'>
    <a>123</a>
</div>

a标签并不会继承红色，因为a标签有默认样式颜色 所以第一步就确定了值
如果第一步就确定了值 而没有继承值如a标签的颜色   可以使用color：inherit  将父元素属性值粘贴过来

实用技巧

主动将某一样式设置为默认样式

<style>
    .box{
        line-height: initial;
    }
</style>

想要清楚所有的浏览器默认样式 unset

<style>
    body,
    body *:not(script){
        all: unset;  
    }
</style>

恢复默认属性 revert

<style>
    .default{
        all: revert;  
    }
</style>