在前面兩天，已經學習了html和css基礎部分了。
其實，文章只把一些關鍵語法語義記錄，如果想要更好的掌握它最好還是能夠多加練習。
今天就繼續學習CSS樣式。
三種顯示模式
標籤顯示模式是什麼
比如div與span，前者一行只能顯示一個，後者則一行可以顯示多個。
html標籤一般的分爲塊標籤和行內標籤兩種
簡單的理解爲塊狀獨佔一行，行內則一行可以並存。
塊級元素(block-level)
常見元素
<h1>~<h6> <p> <ul><ol> <div>
特點（重點）
- 獨佔一行
- 高度（height）、寬度（width）、內邊距（padding）、外邊距(margin)可以控制
- 寬度默認爲容器的100%
- 是一個容器及盒子，裏面可以放行內或塊級元素
- p標籤內不能放塊級元素
- 文字類塊級元素均不能放其他塊級元素
行內元素(inline-level)
常見元素
<a> <strong> <b> <em> <i> <del><s> <ins><u> <span>
特點
- 相鄰行內元素 在一行上
- 高、寬設置無效
- 默認寬度是本身內容寬度
- 行內元素只能容納文本或其他行內元素
- 鏈接
<a>內不能放鏈接 - 特殊情況時，
<a>內可以放塊狀元素，但給a轉換成塊級元素更安全
行內塊元素(inline-block)
特殊標籤
<img>、<input>、<td>
特點
- 和相鄰行內元素在一行，但會留有空白。
- 默認高度是內容本身高度
- 高度、行高、內外邊距可以設置
標籤顯示模式轉換
最常用的三個css屬性
display:inline塊轉行內
display:block行內轉塊
display:inline-block塊、行內轉行內塊
行高（line-height）
行高的測量
行高=從上一行的文字的基線到本行的文字的基線或者從上一行文字的底線到本行文字的底線
行高和高度的三種關係
- 行高等於高度文字居中
- 行高低於高度文字偏上
- 行高低於高度文字偏下
行高等於高度實現垂直居中
單行文本垂直居中
文字的行高等於盒子的高度
行高 = 上距離 + 內容高度 + 下距離
背景(background)
背景顏色(color)
background-color:color
- 默認值爲transparent 背景色透明
背景圖片(image)
background-image:url(圖片地址)
- 在盒子底部
- 默認屬性爲none
- 圖片地址不提倡加引號
背景平鋪(repeat)
background-repeat:屬性
屬性
repeat默認的在縱向和橫向平鋪no-repeat不平鋪repeat-x水平平鋪repeat-y縱向平鋪
背景位置(position)重點
background-position：length || length
background-position：position || position
屬性
- length
- 百分數（長度值）
- position
- top
- center
- bottom
- left
- center
- right
注意
- 首先必須有
background-image屬性 - position後面是x座標和y座標，可以使用方位名詞或精確單位
- 如果指定兩個值，兩個值都是方位名字，則兩個值前後順序無關，比如left top和top left效果一致
- 如果只指定了一個方位名詞，另一個值默認居中對齊。
- 如果position 後面是精確座標， 那麼第一個，肯定是 x 第二的一定是y
- 如果只指定一個數值,那該數值一定是x座標，另一個默認居中對齊
- 如果指定的兩個值是 精確單位和方位名字混合使用，則第一個值是x座標，第二個值是y座標
舉例
.bg {
background-image:url{a.jpg};
/*background-position: 0 0; 默認*/
/*background-position: center center; 上下左右居中*/
/*background-position: left butto; 左下*/
}
<div class="bg">
背景附着
就是解釋背景是滾動的還是固定的
background-attachment：scroll | fixed
scroll 默認是滾動
fixed是固定的
背景簡寫
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
背景透明（css3）
background:rgba(0,0,0,0.1)
r: red
g: green
b: black
a: alpha(透明度)
- 最後一位是透明度，0-1之間
- 背景半透明是指盒子背景半透明，盒子的內容不受影響
- css3不被低於ie9的版本支持
CSS三大特性
CSS層疊性
div {
color:red;
}
div {
color:green;
}
此處後者會覆蓋前者設置，最終顯示爲green。
定義： 所謂層疊性是指多種CSS樣式的疊加
是瀏覽器處理衝突的一個能力，如果一個屬性通過兩個相同的選擇器進行設置同一個元素，那麼這個時候後一個屬性會覆蓋掉前者
原則：
樣式衝突，遵循就近原則，哪個樣式離結構近，就執行哪個樣式
樣式不衝突，不會層疊
繼承性
子標籤會繼承父親的樣式
<div>
<p>
</p>
</div>
當給div寫樣式時，p標籤會繼承其div的樣式，比如字體、顏色等。
CSS優先級
概念：
定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，此時，
- 選擇器相同，則執行層疊性
- 選擇器不同，就會出現優先級的問題。
權重計算公式
| 標籤選擇器 | 計算權重公式 |
|---|---|
| 繼承或者 * | 0,0,0,0 |
| 每個元素（標籤選擇器） | 0,0,0,1 |
| 每個類，僞類 | 0,0,1,0 |
| 每個ID | 0,1,0,0 |
| 每個行內樣式 style="" | 1,0,0,0 |
| 每個!important 重要的 | ∞ 無窮大 |
- 值從左到右，左面的最大，一級大於一級，數位之間沒有進制，級別之間不可超越。
- 關於CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity（特殊性）
權重疊加
我們經常用交集選擇器，後代選擇器等，是有多個基礎選擇器組合而成，那麼此時，就會出現權重疊加。
就是一個簡單的加法計算
- 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
1） 如果選中了，那麼以上面的公式來計權重。誰大聽誰的。
2） 如果沒有選中，那麼權重是0，因爲繼承的權重爲0.
相關推薦：
《CSS盒子模型》
《學習html看這個就夠了》
