Web前端學習筆記——CSS顯示模式、特性、背景
標籤顯示模式（display）
非洲黑人： 面板內黑色素含量高，以吸收陽光中的紫外線，保護面板內部結構免遭損害，頭髮象羊毛一樣捲曲，使每根捲髮周圍都有許多空隙，空隙充滿空氣，捲髮有隔熱作用。
歐洲白人： 生活寒帶或著是說常年溫度較低的地緣,加上年日照時間少，身體的黑色素沉澱比較少``所以出現面板、髮色、瞳暈都呈現淺色
最重要的總結： 是為了更好的適應環境而完成的自然選擇。
同理，我們網頁的標籤非常多，再不同地方會用到不同型別的標籤，以便更好的完成我們的網頁。
標籤的型別(顯示模式)
HTML標籤一般分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。具體如下：
塊級元素(block-level)
每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。
塊級元素的特點：
（1）總是從新行開始
（2）高度，行高、外邊距以及內邊距都可以控制。
（3）寬度預設是容器的100%
（4）可以容納內聯元素和其他塊元素。
行內元素(inline-level)
行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字型大小和影象尺寸來支撐結構，一般不可以設定寬度、高度、對齊等屬性，常用於控制頁面中文字的樣式。
常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。
行內元素的特點：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。
（3）預設寬度就是它本身內容的寬度。
（4）行內元素只能容納文字或則其他行內元素。（a特殊）
注意：
- 只有 文字才 能組成段落 因此 p 裡面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裡面不能放其他塊級元素。
- 連結裡面不能再放連結。
塊級元素和行內元素區別
塊級元素的特點：
（1）總是從新行開始
（2）高度，行高、外邊距以及內邊距都可以控制。
（3）寬度預設是容器的100%
（4）可以容納內聯元素和其他塊元素。
行內元素的特點：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。
（3）預設寬度就是它本身內容的寬度。
（4）行內元素只能容納文字或則其他行內元素。
行內塊元素（inline-block）
在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，可以對它們設定寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。
行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。
（2）預設寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。
標籤顯示模式轉換 display
塊轉行內：display:inline;
行內轉塊：display:block;
塊、行內元素轉換為行內塊： display: inline-block;
此階段，我們只需關心這三個，其他的是我們後面的工作。
CSS書寫規範
開始就形成良好的書寫規範，是你專業化的開始。
空格規範
【強制】 選擇器 與 { 之間必須包含空格。
示例： .selector { }
【強制】 屬性名 與之後的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。
示例：
font-size: 12px;
選擇器規範
【強制】 當一個 rule 包含多個 selector 時，每個選擇器宣告必須獨佔一行。
示例：
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
【建議】 選擇器的巢狀層級應不大於 3 級，位置靠後的限定條件應儘可能精確。
示例：
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
屬性規範
【強制】 屬性定義必須另起一行。
示例：
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
【強制】 屬性定義後必須以分號結尾。
示例：
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
CSS 三大特性
層疊 繼承 優先順序 是我們學習CSS 必須掌握的三個特性。
CSS層疊性
所謂層疊性是指多種CSS樣式的疊加。
是瀏覽器處理衝突的一個能力,如果一個屬性通過兩個相同選擇器設定到同一個元素上，那麼這個時候一個屬性就會將另一個屬性層疊掉
比如先給某個標籤指定了內部文字顏色為紅色，接著又指定了顏色為藍色，此時出現一個標籤指定了相同樣式不同值的情況，這就是樣式衝突。
一般情況下，如果出現樣式衝突，則會按照CSS書寫的順序，以最後的樣式為準。
- 樣式衝突，遵循的原則是就近原則。 那個樣式離著結構近，就執行那個樣式。
- 樣式不衝突，不會層疊
CSS最後的執行口訣： 長江後浪推前浪，前浪死在沙灘上。
CSS繼承性
所謂繼承性是指書寫CSS樣式表時，子標籤會繼承父標籤的某些樣式，如文字顏色和字號。想要設定一個可繼承的屬性，只需將它應用於父元素即可。
簡單的理解就是： 子承父業。
CSS最後的執行口訣： 龍生龍，鳳生鳳，老鼠生的孩子會打洞。
注意：
恰當地使用繼承可以簡化程式碼，降低CSS樣式的複雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*p {
color: red;
}*/
.jianlin {
color: pink;
font-size: 50px;
height: 100px;
}
</style>
</head>
<body>
<div class="jianlin">
<p>王思聰</p>
</div>
</body>
</html>
CSS優先順序
定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先順序的問題。
在考慮權重時，初學者還需要注意一些特殊的情況，具體如下：
繼承樣式的權重為0。即在巢狀結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。
行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大於100。總之，他擁有比上面提高的選擇器都大的優先順序。
權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先順序，或者說排在最後的樣式優先順序最大。
CSS定義了一個!important命令，該命令被賦予最大的優先順序。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先順序。
CSS特殊性（Specificity）
關於CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity，我們稱為CSS 特性或稱非凡性，它是一個衡量CSS值優先順序的一個標準 具體規範入如下：
specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進位制，級別之間不可超越。
| 繼承或者* 的貢獻值 | 0,0,0,0 |
|---|---|
| 每個元素（標籤）貢獻值為 | 0,0,0,1 |
| 每個類，偽類貢獻值為 | 0,0,1,0 |
| 每個ID貢獻值為 | 0,1,0,0 |
| 每個行內樣式貢獻值 | 1,0,0,0 |
| 每個!important貢獻值 | ∞ 無窮大 |
權重是可以疊加的
比如的例子：
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
#nav p -----> 0,1,0,1
注意：
1.數位之間沒有進位制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類選擇器的情況。
- 繼承的 權重是 0
總結優先順序：
- 使用了 !important宣告的規則。
- 內嵌在 HTML 元素的 style屬性裡面的宣告。
- 使用了 ID 選擇器的規則。
- 使用了類選擇器、屬性選擇器、偽元素和偽類選擇器的規則。
- 使用了元素選擇器的規則。
- 只包含一個通用選擇器的規則。
- 同一類選擇器則遵循就近原則。
總結：權重是優先順序的演算法，層疊是優先順序的表現
CSS 背景(background)
CSS 可以新增背景顏色和背景圖片，以及來進行圖片設定。
| background-color | 背景顏色 |
|---|---|
| background-image | 背景圖片地址 |
| background-repeat | 是否平鋪 |
| background-position | 背景位置 |
| background-attachment | 背景固定還是滾動 |
| 背景的合寫（複合屬性） | |
| background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置 |
背景圖片(image)
語法：
background-image : none | url (url)
引數：
none : 無背景圖（預設的） url : 使用絕對或相對地址指定背景影象
background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重複地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。
小技巧： 我們提倡 背景圖片後面的地址，url不要加引號。
背景平鋪（repeat）
語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
引數：
repeat : 背景影象在縱向和橫向上平鋪（預設的）
no-repeat : 背景影象不平鋪
repeat-x : 背景影象在橫向上平鋪
repeat-y : 背景影象在縱向平鋪
設定背景圖片時，預設把圖片在水平和垂直方向平鋪以鋪滿整個元素。
repeat-x : 背景影象在橫向上平鋪
repeat-y : 背景影象在縱向平鋪
設定背景圖片時，預設把圖片在水平和垂直方向平鋪以鋪滿整個元素。
背景位置(position)
語法：
background-position : length || length
background-position : position || position
引數：
length : 百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱長度單位 position : top | center | bottom | left | center | right
說明：
設定或檢索物件的背景影象位置。必須先指定background-image屬性。預設值為：(0% 0%)。 如果只指定了一個值，該值將用於橫座標。縱座標將預設為50%。第二個值將用於縱座標。
注意：
- position 後面是x座標和y座標。 可以使用方位名詞或者 精確單位。
- 如果和精確單位和方位名字混合使用，則必須是x座標在前，y座標後面。比如 background-position: 15px top; 則 15px 一定是 x座標 top是 y座標。
實際工作用的最多的，就是背景圖片居中對齊了。
背景附著
語法：
background-attachment : scroll | fixed
引數：
scroll : 背景影象是隨物件內容滾動 fixed : 背景影象固定
說明：
設定或檢索背景影象是隨物件內容滾動還是固定的。
背景簡寫
background屬性的值的書寫順序官方並沒有強制標準的。為了可讀性，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支援背景半透明的寫法語法格式是:
background: rgba(0,0,0,0.3);
最後一個引數是alpha 透明度 取值範圍 0~1之間
注意： 背景半透明是指盒子背景半透明， 盒子裡面的內容不收影響。
導航欄案例
使用技巧：在一行內的盒子內，我們設定行高等於盒子的高度，就可以使文字垂直居中。
<head>
<meta charset="utf-8">
<style>
body {
background-color: #000;
}
a {
width: 200px;
height: 50px;
/* background-color: orange; */
display: inline-block; /* 把a 行內元素轉換為行內塊元素 */
text-align: center; /* 文字水平居中 */
line-height: 50px; /* 我們設定行高等於盒子的高度，就可以使文字垂直居中 */
color: #fff;
font-size: 22px;
text-decoration: none; /* 取消下劃線 文字裝飾 */
}
a:hover { /* 滑鼠經過 給我們的連結新增背景圖片*/
background: url(images/h.png) no-repeat;
}
</style>
</head>
<body>
<a href="#">專區說明</a>
<a href="#">申請資格</a>
<a href="#">兌換獎勵</a>
<a href="#">下載遊戲</a>
</body>