CSS的三大特徵

1.1 CSS層疊性

概念：是指CSS樣式的層疊。這種特性只針對出現樣式衝突的情況，遵循就近原則顯示樣式。

比如：如果一個屬性通過兩個相同選擇器設定到同一個元素上，那麼這個時候一個屬性就會將另一個屬性層疊掉。

簡單來講就是：長江後浪推前浪，只顯後浪無前浪。

1.2 CSS繼承性

概念：子標籤會繼承父標籤的某些樣式，想要設定一個可繼承的屬性，只需將它應用於父元素即可（子承父業）。

優點：恰當地使用繼承可以簡化程式碼，降低CSS樣式的複雜性。

比如有很多子級孩子都需要某個樣式，可以給父級指定一個，這些孩子繼承過來就好了。

一般用於對文字、字型、顏色等屬性可以使用。（

簡單來講就是：龍生龍，鳳生鳳，老鼠的兒子會打洞。

1.3 CSS優先順序

概念：定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，此時，

• 選擇器相同，則執行層疊性

• 選擇器不同，就會出現優先順序的問題。

優先順序（權重）計算：

1.3.1 權重計算公式

1.3.2 權重疊加

經常用交集選擇器，後代選擇器等，是有多個基礎選擇器組合而成，那麼此時，就會出現權重疊加。

就是一個簡單的加法計算

• div ul li ------> 0,0,0,3

• .nav ul li ------> 0,0,1,2

• a:hover -----—> 0,0,1,1

• .nav a ------> 0,0,1,1

數位之間沒有進位制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0

CSS標籤的顯示模式

我們網頁的標籤非常多，在不同的地方會有不同的顯示需求。標籤的顯示模式表示標籤以什麼方式進行顯示。比如div 自己佔一行， 比如span 一行可以放很多個。

2.1塊級元素(block-level)

2.2 行內元素(inline-level)

2.3行內塊元素（inline-block）

2.4 三種模式總結區別

2.5標籤顯示模式轉換 display

• 塊轉行內：display:inline;

• 行內轉塊：display:block;

• 塊、行內元素轉換為行內塊： display: inline-block;