屬性值的計算過程

屬性值的計算過程

1. 一個一個元素依次渲染，順序按照頁面文檔的樹形目錄結構進行

2. 渲染每個元素的前提條件：該元素的所有css屬性必須有值。

3. 一個元素，從所有屬性都沒有值，到所有屬性都有值，這個計算過程，叫做屬性值計算過程

1. 確定聲明值：參考樣式表中沒有衝突的聲明，直接作爲css屬性值

2. 層疊衝突：對樣式表中有衝突的聲明使用層疊規則，確定css屬性值

    - 比較重要性
    - 比較特殊性
    - 比較原次序
   

3. 使用繼承：對仍然沒有值的屬性，若可以繼承，則繼承父元素的值

4. 對仍然沒有值的屬性，使用默認值

例：

    div {
        color: brown;
    }

    <div>
        <a href="">a元素</a>		在第一步有聲明值，所以不繼承
    </div>
    <div>
        <p>p元素</p>
    </div>

但如果設置

    a{
        color: inherit;
    }

則強制繼承：即在第一步或者第二部則確定屬性值，不會繼承

特殊的兩個css屬性：

• inherit：手動（強制）繼承，將父元素的值取出來應用到該元素
• initial：初始值，將該屬性設置爲默認值

    div {
        width: 100px;
        height: 100px;
        background-color: lightblue;
    }
    
    .mydiv {
        background: initial;
    }

    <div class="mydiv">

    </div>

	1. 聲明值未確定
	2. 層疊衝突確定