首先一點要明確的是瀏覽器渲染某一個元素之前绍绘，它的每一個css屬性值必須都要有確定的值轧叽，否則是沒法渲染的
那么我們今天要講的就是瀏覽器是怎么一步步的 把每一個屬性值都確定下來的矗烛。
首先我們把最主要的四個步驟簡單列出來憨募，之后再一一講解
- 確定聲明值
- 解決層疊沖突
- 繼承
- 默認值
這是一個元素所有的css屬性（總共大概有小幾百個黄痪，這里就不一一列舉了）：
/* 這時所有的值都是沒有確定的 */
{
color:?
background-color:?
text-align:?
font-size:?
font-weight:?
display:?
其他CSS屬性:?
}
假設用戶寫了如下樣式：
.red {
color:red;
font-size:40px;
}
h1 {
font-size:26px;
}
div h1.red {
font-size:3em;
font-size:30px;
}
這是瀏覽器默認樣式表：
h1 {
display: block;
font-size: 2em;
font-weight: bold;
}
接下來我們來看看瀏覽器是如何根據(jù)這四個步驟將這幾百個屬性值全都確定下來的
1. 確定聲明值
這一步就是說將沒有樣式?jīng)_突的屬性先確定下來
那么這一步完了之后富寿，我們可以確定如下屬性：
display: block;
color:red;
font-weight: bold;
{
color:red;
background-color:?
text-align:?
font-size:?
font-weight: bold;
display:block;
其他CSS屬性:?
}
2. 解決層疊沖突
這一步就開始要解決沖突了，即對樣式表中有沖突的聲明使用層疊規(guī)則郁副，確定css屬性值
那么層疊規(guī)則又是什么呢？
- 重要性
- 特殊性
- 源次序
首先這個重要性的意思就是：
!important > 用戶樣式表 > 瀏覽器默認樣式表
這里我們可以看到豌习，color屬性是有沖突的存谎。由于樣式表中沒有!important 標明，所以我們繼續(xù)往后看（如果哪一個地方標明了肥隆，則直接就能確定該值了既荚，但如果有多個地方標明，則還需要進行后面的比較）栋艳，由于用戶樣式表 > 瀏覽器默認樣式表,所以瀏覽器默認樣式表中的樣式就被淘汰了恰聘。然后就進入到了權重的計算，
這里我們可以直接看出
div h1.red {
font-size:3em;
font-size:30px;
}
這個選擇器的權重是最高的吸占，但是這里寫了兩個font-size晴叨，那么就需要比較源次序了，這里的意思就是后面的會覆蓋前面的矾屯，那么最終的值就確定為30px
這一步兼蕊，我們最后確定了如下css樣式的屬性值：
{
color:red;
background-color: ?
text-align: ?
font-size:30px;
font-weight:bold;
display:block;
其他CSS屬性：...
}
3. 繼承
到了這一步盡管確定了一些沒有沖突的，有沖突的屬性值件蚕，但是還是有一些屬性的值沒有確定孙技，因為有一些屬性用戶樣式表和瀏覽器默認樣式表中都沒有進行聲明产禾。所以這一步，對仍然沒有值的屬性牵啦，若可以繼承亚情，則繼承父元素的值
css可以繼承的屬性：
1.字體系列屬性
font：組合字體
font-family：規(guī)定元素的字體系列
font-weight：設置字體的粗細
font-size：設置字體的尺寸
font-style：定義字體的風格
2、文本系列屬性
text-indent：文本縮進
text-align：文本水平對齊
line-height：行高
word-spacing：增加或減少單詞間的空白（即字間隔）
letter-spacing：增加或減少字符間的空白（字符間距）
text-transform：控制文本大小寫
direction：規(guī)定文本的書寫方向
color：文本顏色
3哈雏、元素可見性：visibility
4势似、表格布局屬性：
caption-side、border-collapse僧著、border-spacing履因、empty-cells、table-layout
5盹愚、列表屬性：
list-style-type栅迄、list-style-image、list-style-position皆怕、list-style
6毅舆、光標屬性：cursor
根據(jù)以上信息可以確定，text-algin屬性是可以繼承的愈腾，假設h1標簽的父元素的text-algin的值為center憋活，則h1的text-algin的值也為center。
至此虱黄，我們最后確定了如下css樣式的屬性值：
{
color:red;
background-color: ?
text-align: center;
font-size:30px;
font-weight:bold;
display:block;
其他CSS屬性：...
}
4. 默認值
到了這一步悦即，對仍然沒有值的屬性，使用默認值
background-color的默認值為transparent橱乱，至此我們就將所有的屬性值確定了下來辜梳。
{
color:red;
background-color: transparent;
text-align: center;
font-size:30px;
font-weight:bold;
display:block;
其他CSS屬性：...
}
兩個特殊的css屬性
最后，說一下兩個特殊的css屬性：
- inherit泳叠。強制（手動）繼承作瞄，將父元素的值取出應用到該元素（不管這個屬性值是否可以繼承）。
- initial危纫。初始值宗挥，將該元素的屬性變?yōu)槟J值。
