css屬性值的計算

2021-10-10 21:38:16 字數 686 閱讀 9404

了解css屬性值的計算之前,我們先了解一下瀏覽器的html文件的渲染過程:

html文件載入時 先載入html**,搭建出骨架;

然後按照html文件樹的樹形順序依次給每個元素渲染樣式屬性;

1、每個元素渲染的前提條件是:該元素的所有css屬性都必須有值(我們可能只指定部分css屬性,

但是那些預設的css屬性也必須有值的);

2、屬性值計算過程:乙個元素,從所有屬性都沒有值,到所有屬性都有值,瀏覽器會自動幫我們計算,

這個計算過程叫做屬性值計算過程;

css屬性值的計算遵循一定的規則:

確定宣告值

將樣式表(作者樣式表和瀏覽器預設樣式表)中沒有衝突的樣式宣告,作為css屬性值;

層疊衝突

對於樣式表中有衝突的宣告使用層疊規則(比較重要性、比較特殊性、比較源次序)來確定css屬性值;

比較重要性:作者樣式 > 瀏覽器樣式

比較特殊性:權重計算參考:css選擇器及權重計算

比較源次序:權重相同的情況下,後來者居上。

繼承

使用預設值

經過以上計算任然沒有被賦值的屬性,將使用瀏覽器預設屬性值

CSS屬性值的計算

瀏覽器如何渲染頁面 乙個元素乙個元素依次渲染,順序按照頁面文件的樹形目錄結構進行 渲染每個元素的前提條件 該元素的所有css屬性都必須要有值 屬性值的計算過程 乙個元素從所有屬性都沒有值,到所有的屬性都有值,這個計算過程,叫做css屬性值計算過程 宣告衝突 多個css樣式,多次應用到同乙個元素 層疊...

CSS屬性值的計算過程

瀏覽器渲染網頁 乙個元素乙個元素依次渲染,順序按照頁面文件的樹形目錄結構進行渲染的 渲染每個元素的前提條件,該元素的所有css屬性必須有值 乙個元素,從所有屬性都沒有值,到所有的屬性都有屬性值,這個計算過程,叫做屬性計算過程 html元素 到有值從沒有值到到有值的過程 確定宣告值 參考樣式表中沒有衝...

CSS屬性值的計算過程

確定宣告值 包括作者樣式表,就是自己寫的,還有瀏覽器預設樣式表 這一步會參考樣式表中沒有衝突的宣告作為css屬性值 層疊衝突 第一步有衝突的宣告,會使用層疊規則確定css屬性值 比較重要性 重要性從高到低 作者樣式表 我們自己寫的 中的 importment 不推薦使用 作者樣式表中的普通樣式 不加...