CSS學習筆記——顯示模式，背景，三大特性
元素顯示模式
HTML元素一般分為塊元素和行內元素兩種型別。
塊元素
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。
塊級元素的特點：
- 比較霸道，自己獨佔一行。
- 高度，寬度、外邊距以及內邊距都可以控制。
- 寬度預設是容器（父級寬度）的100%。
- 是一個容器及盒子，裡面可以放行內或者塊級元素。
注意
-
文字類的元素內不能使用塊級元素。
-
<p>標籤主要用於存放文字，因此<p>裡面不能放塊級元素，特別是不能放<div> -
同理，
<h1>~<h6>等都是文字類塊級標籤，裡面也不能放其他塊級元素。
行內元素
常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>
行內元素的特點：
-
相鄰行內元素在一行上，一行可以顯示多個。
-
高、寬直接設定是無效的。
-
預設寬度就是它本身內容的寬度。
-
行內元素只能容納文字或其他行內元素。
注意
- 連結裡面不能再放連結。
- 特殊情況連結
<a>裡面可以放塊級元素，但是給<a>轉換一下塊級模式最安全。
行內塊元素
在行內元素中有幾個特殊的標籤—<img/>、<input/>、<td>，它們同時具有塊元素和行內元素的特點。
行內塊元素的特點：
-
和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。一行可以顯示多個（行內元素特點）。
-
預設寬度就是它本身內容的寬度（行內元素特點）。
-
高度，行高、外邊距以及內邊距都可以控制（塊級元素特點）。
元素顯示模式的轉換
轉換為塊元素：display:block;
轉換為行內元素：display.inline;
轉換為行內塊：display:inline-block;
一個小技巧：單行文字垂直居中
讓文字的行高等於盒子的高度就可以讓文字在當前盒子內垂直居中。
背景
背景顏色
background-color屬性定義了元素的背景顏色。
background-color: 顏色值;
一般情況下元素背景顏色預設值是transparent（透明），我們也可以手動指定背景顏色為透明色。
背景圖片
background-image屬性描述了元素的背景影象。
實際開發常見於logo或者一些裝飾性的小圖片或者是超大的背景圖片，優點是非常便於控制位置（精靈圖也是一種運用場景）。
background-image: none | url (url)
背景平鋪
如果需要在HTML頁面上對背景影象進行平鋪，可以使用background-repeat屬性。
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
頁面元素既可以新增背景顏色也可以新增背景圖片，只不過背景圖片會壓住背景顏色。
背景圖片位置
利用background-position屬性可以改變圖片在背景中的位置。
background-position: x y;
引數代表的意思是：x座標和y座標。可以使用方位名詞或者精確單位。
| 引數值 | 說明 |
|---|---|
| length | 百分數 |
| position | top | center | bottom | left | center | right 方位名詞 |
引數是方位名詞
如果指定的兩個值都是方位名詞，則兩個值前後順序無關，比如left top和top left效果一致。
如果只指定了一個方位名詞，另一個值省略，則第二個值預設居中對齊。
引數是精確單位
如果引數值是精確座標，那麼第一個肯定是x座標，第二個一定是y座標。
如果只寫一個座標，則預設設定給x，而y預設為居中。
引數是混合單位
如果指定的兩個值是精確單位和方位名詞混合使用，則第一個值是x座標，第二個值是y座標。
背景影象固定（背景附著）
background-attachment屬性設定背景影象是否固定或者隨著頁面的其餘部分滾動。
background-attachment後期可以製作視差滾動的效果。
background-attachment: scroll | fixed
| 引數 | 作用 |
|---|---|
| scroll | 背景影象是隨物件內容滾動 |
| fixed | 背景影象固定 |
背景複合寫法
為了簡化背景屬性的程式碼，我們可以將這些屬性合併簡寫在同一個屬性background中。從而節約程式碼量。
當使用簡寫屬性時，沒有特定的書寫順序，一般習慣約定順序為：
background: 背景顏色 背景圖片地址 背景平鋪 背景影象滾動 背景圖片位置;
案例
background: transparent url(image.jpg) repeat-y fixed top;
背景色半透明
CSS3為我們提供了背景顏色半透明的效果。
background: rgba(0, 0, 0, 0.3);
最後一個引數是alpha透明度，取值範圍在0~1之間。
我們習慣把0.3的0省略掉，寫為background: rgba(0, 0, 0, .3);。
注意：背景半透明是指盒子背景半透明，盒子裡面的內容不受影響。
CSS3新增屬性，是IE9+版本瀏覽器才支援的。
但是現在實際開發，我們不太關注相容性寫法了，可以放心使用。
三大特性
層疊性
相同選擇器給設定相同的樣式，此時一個樣式就會覆蓋（層疊）另一個衝突的樣式。層疊性主要解決樣式衝突的問題。
層疊性原則：
-
樣式衝突，遵循的原則是就近原則，哪個樣式離結構近，就執行哪個樣式。
-
樣式不衝突，不會層疊。
繼承性
CSS中的繼承：子標籤會繼承父標籤的某些樣式，如文字顏色和字號。
子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）。
繼承行高時，若行高的單位是倍數，則按具體元素的當前字號計算行高。
優先順序
| 選擇器 | 選擇器權重 |
|---|---|
| 繼承或者* | 0,0,0,0 |
| 元素選擇器 | 0,0,0,1 |
| 類選擇器，偽類選擇器 | 0,0,1,0 |
| id選擇器 | 0,1,0,0 |
| 行內樣式 style="" | 1,0,0,0 |
| important重要的 | 無窮大 |
div {
color: pink!important;
}
繼承的權重是0，如果該元素沒有直接選中，不管父元素權重多高，子元素得到的權重都是0。
同理，有預設樣式的元素不會受到繼承的影響，例如a，h1。