網(wǎng)站建設(shè)網(wǎng)站需要什么日照高端網(wǎng)站建設(shè)
主線程遍歷得到的 DOM 樹(shù)，依次為樹(shù)中的每個(gè)節(jié)點(diǎn)計(jì)算出它最終的樣式，稱之為 Computed Style。
通過(guò)前面生成的DOM 樹(shù)和 CSSOM 樹(shù)，遍歷 DOM 樹(shù)，為每一個(gè) DOM 節(jié)點(diǎn)，計(jì)算它的所有 CSS 屬性，最后會(huì)得到一棵帶有樣式的 DOM 樹(shù)–也叫“渲染樹(shù) Render Tree”
可在控制臺(tái)查看樣式計(jì)算
屬性值的計(jì)算過(guò)程
1、確定聲明值
聲明值就是 “自己所書寫的 CSS 樣式+瀏覽器內(nèi)置的樣式表” 相加得到全部的聲明值，并且將部分值進(jìn)行轉(zhuǎn)換
如：color: red;轉(zhuǎn)換為`color: rgb(255, 0, 0);
? font-size: 2em;轉(zhuǎn)換為font-size: 14px;`。
2、層疊沖突
在確定聲明值時(shí)，聲明的樣式規(guī)則發(fā)生了沖突，解決沖突，下面這三個(gè)步驟：
（一）比較源的重要性
樣式有三種來(lái)源：
1. 瀏覽器默認(rèn)樣式（用戶代理樣式）：瀏覽器會(huì)有一個(gè)基本的樣式表來(lái)給任何網(wǎng)頁(yè)設(shè)置默認(rèn)樣式
2. 網(wǎng)頁(yè)設(shè)計(jì)者定義的樣式（頁(yè)面作者樣式）：即外聯(lián)樣式、內(nèi)部樣式、style行內(nèi)樣式等
3. 控制臺(tái)調(diào)試樣式（用戶樣式）：瀏覽器的用戶在開(kāi)發(fā)者模式里使用自定義樣式表定制使用體驗(yàn)
對(duì)應(yīng)的重要性順序依次為：網(wǎng)頁(yè)設(shè)計(jì)者定義的樣式 > 用戶樣式 > 瀏覽器默認(rèn)樣式
（二）比較優(yōu)先級(jí)–權(quán)重
如果在同一源中出現(xiàn)了樣式聲明沖突，則比較其優(yōu)先級(jí)。
權(quán)重的等級(jí)
!important，權(quán)重最大，會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。
內(nèi)聯(lián)樣式，寫在標(biāo)簽中的，權(quán)重為1000
ID選擇器，權(quán)重為0100
類、偽類、屬性選擇器，權(quán)重為0010
標(biāo)簽、偽元素選擇器，權(quán)重為0001
通配符、子選擇器、相鄰選擇器等，權(quán)重為0000
我手寫了計(jì)算權(quán)重的方法：
案例1
<ul id="nav" class="nav"><li class="active" id="bb"><a href=""></a></li>
</ul>ul#nav li.active a 權(quán)值為（0,1,1,3）；`ul li.active a` 權(quán)值為（0,0,1,3）；---一個(gè)偽類，三個(gè)標(biāo)簽`ul.nav li.active a` 的權(quán)值為（0,0,2,3）；`
如是行內(nèi)樣式（內(nèi)聯(lián)樣式），權(quán)值為（1,0,0,0） ；某項(xiàng) CSS 屬性后面帶 `!important` 時(shí)，權(quán)值最大。案例2
都是設(shè)置文字顏色，應(yīng)該以哪個(gè)為主？
<!DOCTYPE html>
<html lang="en">
<head> <style>/* 權(quán)重 0,0,1,1 */.nav a {color: red;}/* 權(quán)重 0,0,1,0 */.blog {color: yellow;}/* 權(quán)重 0,0,2,0 */.nav .blog {color: blue;}</style>
</head>
<body><div class="nav"><a href="" class="blog">java</a><a href="">python</a><a href="">css</a><a href="">ruby</a></div>
</body>
</html>分析：
0011>0010 以紅色為主
0020>0011 以藍(lán)色為主
案例3
<!DOCTYPE html>
<html lang="en">
<head><style>a{color: yellow;} /*權(quán)重：0,0,0,1*/div a{color: green;} /*權(quán)重：0,0,0,2*/.demo a{color: black;} /*權(quán)重：0,0,1,1*/.demo input[type="text"]{color: blue;} /*權(quán)重：0,0,2,1*/.demo *[type="text"]{color: grey;} /*權(quán)重：0,0,2,0*/#d1 a{color: orange;} /*權(quán)重：0,1,0,1*/div#d1 a{color: red;} /*權(quán)重：0,1,0,2*/</style>
</head>
<body><a href="">第一</a> <div class="demo"><input type="text" value="第二" /><a href="">第三</a></div><div id="d1"><a href="">第四</a></div>
</body>
</html>分析：
#d1 a和div#d1 a 設(shè)置相同的屬性，但0101<0102 以紅色為主
（三）比較次序----重要：如權(quán)重值相同，“就近原則”
后聲明的樣式會(huì)覆蓋先聲明的樣式。
p{/* 會(huì)被覆蓋 */color: yellow;
}p{ color: green;
}
3、使用繼承
對(duì)于每一個(gè) DOM 節(jié)點(diǎn)，都會(huì)去計(jì)算它的所有 CSS 屬性。
對(duì)于未聲明的屬性，并不是直接使用默認(rèn)值，而是使用繼承值。
<div><p>java</p>
</div>
div{color: red;
}
這里<p>標(biāo)簽會(huì)繼承來(lái)自<div>的color: red樣式。
繼承原則：
- 就近原則，誰(shuí)近就繼承誰(shuí)的，與權(quán)重?zé)o關(guān)。
- 大部分字體相關(guān)的屬性都是可繼承的
4、使用默認(rèn)值
如果最后仍不能確定屬性值，則使用瀏覽器默認(rèn)值。
