CSS樣式的計算過程

2021-10-24 08:26:30 字數 1909 閱讀 9561

確定宣告值

層疊衝突

使用繼承

使用預設值

開發人員在程式設計時,編寫的樣式表中給每個屬性設定的值,如果有的屬性沒有宣告,如果可以繼承使用繼承值,如果不能使用繼承,使用瀏覽器的預設值

層疊是css的特性之一,層疊是指相同樣式多次作用於同乙個元素時確定該樣式的值的過程。

瀏覽器會根據以下規則進行計算

比較重要性

重要性從高到低分為

.mask

"first"

class

="mask"

>

這是乙個div

由此可見,帶有import的樣式的優先順序更高,即便後面還有乙個相同的樣式仍不會被覆蓋

2. 比較選擇器的優先順序

瀏覽器通過乙個四位數進行計算

#first

.mask

"first"

class

="mask"

>

這是乙個div

由此可見id選擇器的優先順序更高元素的樣式為id選擇器設定的樣式,即便類選擇器設定的樣式寫在後面。

同時,選擇器的優先順序不會因為該類選擇器的數量的多少而發生變化,也就是說量變不會引起質變

3. 比較順序

寫在後面的樣式優先

.mask

class

="mask"

>

這是乙個div

由此可見後面的font-size屬性生效此時的字型大小為20px

繼承值是在前面過程完成後還有樣式沒有值得情況下繼承能進行繼承的樣式的值

通常情況下字型樣式可以被繼承

.mask

class

="mask"

>

這是乙個div

>

這是乙個段落p

由此可見沒有給p元素設定字型的大小但是p中的字型大小和div中的字型大小相同,此時p繼承了div元素中的font-size屬性的值

該步驟是在前三個步驟完成後仍沒有值的屬性使用預設值

"first"

class

="mask"

>

這是乙個div

由此可見即便沒有設定任何樣式,字型也同樣有一定的大小,此時字型的大小使用的是預設的值

css樣式計算有四個步驟

選擇器的優先順序不會因為該類選擇器的數量的大小而發生變化,即量變不會發生質變

帶有!import的樣式優先順序非常高,可以打破計算規則

CSS屬性值的計算過程

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

CSS屬性值的計算過程

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

遞迴計算過程和迭代計算過程

這次主要想通過幾個sicp的題目來說明遞迴計算過程和迭代計算過程。1 階乘 遞迴計算過程 define factorial n if n 1 1 factorial n 1 n 迭代計算過程 define fact iter counter result if counter 1 result fa...