瀏覽器如何渲染頁面
乙個元素乙個元素依次渲染，順序按照頁面文件的樹形目錄結構進行
渲染每個元素的前提條件
該元素的所有css屬性都必須要有值
屬性值的計算過程
乙個元素從所有屬性都沒有值，到所有的屬性都有值,這個計算過程，叫做css屬性值計算過程
宣告衝突
多個css樣式,多次應用到同乙個元素
層疊
解決宣告衝突的過程，瀏覽器自動處理(按權重計算)
繼承
子元素會繼承父元素的某些css的屬性
通常跟文字內容相關的屬性會被繼承
1.確定宣告值：參考樣式表中沒有衝突的宣告，作為css屬性值
樣式表可以使作者樣式表也可以是瀏覽器預設樣式表
2.層疊衝突：對樣式表有衝突的宣告使用層疊規則，確定css屬性值
3.使用繼承：對仍然沒有值的屬性,若可以繼承則繼承父元素的值
4.使用預設值：對仍然沒有值得屬性，全部繼承預設屬性
以乙個針對h1的例子為說明：
h1在瀏覽器中的預設樣式是這樣的(我的是谷歌瀏覽器)
在執行完第乙個步驟之後css的屬性變成這樣
第二步：層疊衝突
對樣式表有衝突的宣告使用層疊規則，確定css屬性值
這一步執行完後的css屬性是
作者樣式表中的字型大小屬性於瀏覽器預設的字型大小屬性衝突，最終經過權重計算,選擇作者樣式表中的字型屬性作為最終渲染效果的字型屬性
3.使用繼承：對仍然沒有值的屬性,若可以繼承則繼承父元素的值
繼承text-align:center這個屬性
4.使用預設值：對仍然沒有值得屬性，全部繼承預設屬性
最後改元素擁有所有的css屬性值
顯示不全，只是其中的一部分，有興趣的話，可以拿自己的電腦試一試
問題1
p元素和a元素同為div下的子元素，為什麼p元素繼承了div的字型顏色這個屬性，但a元素卻沒有繼承?
今天下雨了
今天下雨了
這便和上面說到的css屬性值的計算有關，在第一步執行時因為瀏覽器給a標籤有預設的字型顏色，所以a標籤會使用這個預設的字型顏色，而不會繼承父級元素div的字型顏色。但是瀏覽器沒有給p標籤有預設的字型顏色，所以才會繼承父級元素div的字型顏色。
問題2
如果還想a標籤繼續繼承父元素的字型顏色這個屬性，那麼要怎麼辦？
先介紹兩個特殊的css取值
inherit:手動(強制繼承),將父元素的值取出應用到該元素
initial:初始值,將該屬性設定為預設值
那麼就只需要這樣改就好了
css屬性值的計算
了解css屬性值的計算之前，我們先了解一下瀏覽器的html文件的渲染過程 html文件載入時 先載入html 搭建出骨架 然後按照html文件樹的樹形順序依次給每個元素渲染樣式屬性 1 每個元素渲染的前提條件是 該元素的所有css屬性都必須有值 我們可能只指定部分css屬性，但是那些預設的css屬性...
CSS屬性值的計算過程
瀏覽器渲染網頁 乙個元素乙個元素依次渲染，順序按照頁面文件的樹形目錄結構進行渲染的 渲染每個元素的前提條件，該元素的所有css屬性必須有值 乙個元素，從所有屬性都沒有值，到所有的屬性都有屬性值，這個計算過程，叫做屬性計算過程 html元素 到有值從沒有值到到有值的過程 確定宣告值 參考樣式表中沒有衝...
CSS屬性值的計算過程
確定宣告值 包括作者樣式表，就是自己寫的，還有瀏覽器預設樣式表 這一步會參考樣式表中沒有衝突的宣告作為css屬性值 層疊衝突 第一步有衝突的宣告，會使用層疊規則確定css屬性值 比較重要性 重要性從高到低 作者樣式表 我們自己寫的 中的 importment 不推薦使用 作者樣式表中的普通樣式 不加...