前端開發學習之CSS
來張思維導圖...
一、什麼是CSS
CSS，英文全稱Cascading Style Sheets，中文名層疊樣式表，從這個名稱中我們就可以看出，它是一個樣式，層疊的樣式，用來描繪html的。俗話說，人靠衣裝馬靠鞍（等等，這句話好像不是這樣用的，畢竟下一句是...），如果說html是一個人的話，css就是對其化妝，層層抹粉，讓其更帥更美。
二、CSS的基本思想（個人理解）
css的基本思想其實很簡單，就是簡單的兩步，找到要化妝（修改樣式）的物件，以及怎麼化妝（修改成什麼樣的）兩步。
三、CSS的引入方式
引入方式也就是寫的地方，不同於html，css可以寫在三種地方，分別是：
1.行內式
寫在html的標籤的style屬性裡，語法是 style="屬性1=值1 屬性2=值2 ..."，不同的鍵值對之間用空格隔開。如：
<div class="car-img" style="background-color: #dcd8d9; background-image: url(./assets/1.jpg);"> </div>
這裡的屬性值後面會介紹，先了解下語法規則。
行內式設定的樣式只適用於當前這個標籤，因此這種寫法每個想要修改樣式的元素都要寫一個，很不方便，不推薦使用。
2.內連式
寫在html的head標籤裡，用style標籤包裹起來，這裡面的樣式會適用於當前頁面，提高了程式碼的複用性。如：
<style> div { font: 700 normal 50px 楷體; } </style>
3.外聯式
將css樣式，寫在一個單獨的css檔案裡（檔案字尾為.css），想要用樣式的話，通過在標頭檔案裡寫link標籤來引用這個css檔案，語法如下：
<link rel="stylesheet" type="text/css" href="css/bg.css">
href這個屬性是連結的文件所在的位置，推薦相對路徑
rel這個屬性表示連結的文件與當前文件的關係，stylesheet是指文件的外部樣式表
type 屬性規定被連結文件的 MIME 型別。
引入方式小結
css的三個引用方式中，行內式優先順序最高的，其餘兩個優先順序相同，畢竟行內式是跟特定元素住在一塊了，而內連式和外聯式是分家的，是針對一類元素，或具有某一特徵的元素處於特定情況下的元素，至於為什麼是針對一類元素，請看後面的選擇器。
四、CSS選擇器
具體怎麼找到修改樣式的物件，就需要用到CSS的選擇器。css選擇器通常都是在內連式和外聯式中使用的，選擇器常分為以下幾種
1.元素選擇器
顧名思義，是選擇元素的，只要是同類元素都會被選中，如：
h1{ color: aliceblue; }
這裡的凡是h1標籤的字型顏色都發生了改變。
語法規則如下：
元素名{
屬性1:值；
屬性2:值;
}
2.類選擇器
選擇的是一類的元素，也就是具有相同class屬性值的元素，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 類選擇器</title> <style> .red{ color:red; } .blue{ color:blue; } </style> </head> <body> <div class="red">Lorem ipsum dolor sit amet.</div> <div class="blue">Sunt harum tenetur adipisci id.</div> <div class="red">In, adipisci! Reprehenderit, voluptatibus eius?</div> <div class="blue">Officiis maxime minima dolores sequi.</div> </body> </html>View Code
結果如下：
類選擇器語法規則：
.類名{
樣式； /*屬性：值這種鍵值對形式的我就簡寫為樣式了，見諒*/
}
3.id選擇器
id值在html中是唯一的，因此id選擇器能夠選擇唯一的特定一個元素。如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>id選擇器</title> <style> #name{ color:red } </style> </head> <body> <div id="name">sssss</div> <div class="mydiv">sssssss</div> <div class="red">ssssss</div> <p class="red">sssss</p> <div id="red">ssssss</div> </body> </html>View Code
結果圖如下：
語法規則：
#id名{
樣式；
}
以上都是css的一些基本選擇器，接下來是一些複合選擇器，複合選擇器是由兩個或兩個以上的選擇器組成的
4.並集選擇器
適用場景：實際過程中我們可能有多個選擇器有著相同的樣式，如字型都是某種特定顏色，這種時候，為減少程式碼量，誕生了並集選擇器，共有選擇器之間的相同樣式。
語法規則：
選擇器1, 選擇器2...{
選擇器1，2共有的樣式；
}
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>並集選擇器</title> <style> h1, p{ color: red; } </style> </head> <body> <!-- h1>lorem^p>lorem ^表示回到上一級節點應為lorem已經是h1的子節點了--> <h1>Lorem ipsum dolor sit amet.</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto iusto amet soluta ipsa odio enim dignissimos. Quae nostrum quam ex?</p> </body> </html>View Code
5.交集選擇器
適用場景：當想要選擇的元素同時具有兩個特徵的時候，比如說，要選中的是一個具有class屬性，值為p1（這裡只是舉例，正常情況下，class的值應該要見名知義）的p元素，此時就可以用交集選擇器來選擇。
語法規則：
選擇器1選擇器2（常為class選擇器）{
樣式；
}
示例：
<div class="p1">div</div> <p>段落</p> <p class="p1">小可愛</p>
如果只要讓小可愛變成紫色的話，css應該這樣寫：
p.p1{ color: purple; }
結果圖如下：
6.後代選擇器
適用場景：想要選擇一個元素的後代元素（與該元素具有巢狀關係，包括兒子，孫子等），可以使用這個選擇器。
語法規則：
父選擇器 後代選擇器{
該後代具有的樣式；
}
示例：
<p><span> This is a <em>important</em> paragraph.</span></p>想要將p標籤下的，em標籤下的字型變為紅色，css應該這樣寫：
p em{ /* 將p後代中的em標籤設定成紅色 */ color: red; }
結果如下：
7.子選擇器
使用場景：當想要只選擇一個元素的子元素，不選擇這個元素的孫輩以後的元素。
語法規則：
父選擇器>子選擇器{
子選擇器的樣式；
}
示例：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
當只想要上面那個h1的strong標籤裡的元素變為紅色時，如果使用後代選擇器，會讓上下兩個h1裡的very都變成紅色，因此要使用子選擇器，css程式碼如下：
h1>strong{ color: red; }
結果圖如下：
8.相鄰兄弟選擇器
適用場景：當只想要選擇緊跟一個元素後的元素，且這兩個元素具有同一個父元素，我們把這兩個元素稱為相鄰兄弟，要選後一個元素時，可以用相鄰兄弟選擇器。
語法規則：
兄元素+弟元素{
弟元素的樣式；
}
示例：
<body> <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> </body>當只想要讓h1後的p元素標籤內的文字變為紅色的時候，使用兄弟選擇器，css程式碼如下：
h1 + p{ color: red; }
9.屬性選擇器
適用場景：當想選擇具有某一特定屬性值的元素的時候，使用此選擇器。
語法規則：
[屬性1=值]{ /*值可以不用加引號*/
樣式；
}
示例：
使用者:<input type="text"><br>
想要讓文字框裡的字和游標變紅色，css程式碼如下
[type=text]{ color:red /* 裡面的游標會變成紅色 */ }
結果圖：
10.偽類選擇器
什麼是偽類，偽類是 W3C （World Wide Web Consortium 全球資訊網聯盟，一個進行web標準規範的組織）制定的一套選擇器的特殊狀態，通過偽類您可以設定元素的動態狀態，例如懸停（hover）、點選（active）以及文件中不能通過其它選擇器選擇的元素（這些元素沒有 ID 或 class 屬性），例如第一個子元素（first-child）或者最後一個子元素（last-child）。（參考網站C語言中文網，mdn）
語法規則：
選擇器:偽類名{
樣式；
}
由於偽類數量較多，本文就只選擇其中較為常用的來介紹。
示例：
<a href="http://www.baidu.com">百度</a>
實現超連結未訪問時，已訪問後，滑鼠移動到超連結，點選，的樣式分別為紅色，綠色，粉色，藍色
a:link {color: #FF0000} /* 未訪問的連結 */ a:visited {color: #00FF00} /* 已訪問的連結 */ a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */ a:active {color: #0000FF} /* 選定的連結 */
結果圖：由於除錯時已經訪問過了，就會一直時顯示這個為已訪問後的連結樣式，
五、CSS常用屬性
1.尺寸屬性
對於一個塊元素（或行內塊）來說，我們通常會在css中定義它的寬高，屬性如下：
width 寬
height 高
示例：修改一個div的寬高，為了方便顯示，設定了背景色，不設定的話就看不到。
div { width: 100px; height: 100px; background: pink; }
結果圖：
2.字型相關屬性
修改文字樣式的屬性，有：
font-siize：字型大小
font-weight：字型粗細
font-style：字型風格，如斜體（italic oblique）等
italic 和 oblique 都是向右傾斜的文字, 但區別在於 italic 是指斜體字，而 oblique 是傾斜的文字，對於沒有斜體的字型應該使用 oblique 屬性值來實現傾斜的文字效果。
font-family：字型族，如宋體，楷體，微軟雅黑等
上面四個屬性可以簡寫在font屬性裡，語法如下，要注意書寫順序哦
font： style weight size family
示例：
<div> Lorem ipsum dolor sit amet. </div>
css樣式：
div { font: italic 700 30px 宋體; }
結果圖：
3.文字相關屬性
修改的時文字相關樣式，如顏色對齊等，常用屬性有：
color：顏色
顏色的取值有四種方式，
1）關鍵字形式的，如red，blue等。
2）rgb形式，如rgb(255,0,0),rgb(0,0,255)等，括號內的三個數字分別是紅色分量，綠色分量，藍色分量，值的範圍是0-255。
3）rgba形式，rgb(255,0,0,0.5)，最後一個分量是alpha 透明度，範圍0（完全透明）-1（完全不透明）。
4）16進位制形式，如 #fff，#efefef等，#號後的數字兩兩為一組，分別為紅綠藍，由於是16進位制，換算下來也是0-255，如果每一組的兩個數都相同的話，可以簡寫為1個數。
text-align：對齊方式，預設為left，值有center居中，right右對齊等。
text-decoreation：文字修飾線，有如下劃線 underline ，上劃線 overline ，穿過文字的一條線line-through等，預設為none。
text-indent：文字首行縮排。
line-height：行高，當設定行高等於容器高的時候，能實現文字垂直居中。
示例：
div { color: #f00; text-align: center; text-decoration: overline; text-indent: 2em; line-height: 100px; height: 100px; background-color: rgb(169, 168, 168); }
結果圖：
4.背景相關屬性
修飾容器背景的相關樣式，屬性有：
background-color：背景顏色
background-image：url(圖片路徑) 背景圖片
background-repeat：背景平鋪方式，預設為水平，通常值有repeat-x 水平平鋪，repeat-y 垂直平鋪，no-repeat 無平鋪
background-position： 背景圖片位置，值通常有三種，
1）10px 20px 這類單位為畫素的值，容器左上角為0，0 ，背景圖片水平向右（向右為為正）移動10px，垂直向下（向下為正）移動20px。
2）關鍵字形式的如 center center，實現背景圖片水平 垂直居中。
3）百分比值形式，如50% 50% ，實現的也是背景圖片水平居中，這種時候當圖片與容器左上角重合時，值為0% 0%，當圖片右下腳與容器右下角重合時，值為100%。
背景屬性簡寫，使用background屬性，
background：color image repeat position
示例：
div{ width: 40px; height: 40px; background-image: url(./img/icon.png); background-position: -131px -38px; }
結果圖：
此處有兩個知識點，
1）關於img標籤與背景圖片的區別
1.img屬於html的範疇，是頁面骨架的一個部分，background-image是屬於css的範疇，主要是起到一個裝飾作用。
2.img如果沒有設定圖片，其寬高為0*0，本質是一個行內塊。
3.使用div+background-image，顯示圖片，即使設定了背景圖片，在不設定div高度的時候，其div的高為0，圖片顯示不出來
2）關於精靈圖的應用
利用背景位置這一屬性可以實現“精靈圖”，什麼是精靈圖，下面貼一張圖給大家看一下，
可以看到像這樣由許多圖示組成的大圖就是一張精靈圖，上面的示例就是利用背景位置和容器大小實現的獲取精靈圖中的一個圖示。
六、CSS三大特性
1.繼承性
即子元素會繼承父元素的樣式，能被繼承的樣式有 font- ，text- ， line-， color 這幾類屬性。
示例：html部分程式碼：
html部分程式碼：
<div class="father"> father <div class="son"> son </div> </div>
css程式碼：
.father { /* 字型相關 */ font: 30px 宋體; /* 文字相關 */ text-decoration: underline; /* 行高 */ line-height: 100px; /* 文字顏色 */ color: red; }
請問son的樣式是，
2.層疊性
既然都叫層疊樣式表了，層疊性必然少不了。CSS的層疊性體現在，同類樣式會覆蓋，不同的樣式會疊加。
示例：
html程式碼：
<div> <div>猜猜我是什麼顏色</div> </div>
css程式碼：
div div{ color: red; } div{ color:green;/* 相同的樣式會被覆蓋 */ font-size: 50px;/* 不同的樣式就會疊加 */ }
是什麼顏色呢，答案揭曉
此時我們F12開啟瀏覽器開發者模式，檢視程式碼中的div元素，發現單獨定義的div樣式被劃掉了，那麼，這個覆蓋的規則又是什麼樣的呢，請看下面css的優先順序。
3.優先順序
css定義樣式具有優先順序，相同樣式優先順序高的會覆蓋優先順序低的樣式，相同優先順序，後寫的樣式覆蓋前面寫過的同類樣式。下面給出一個優先順序計算權重表
| 計算權重公式 | |
|---|---|
| 繼承或者 * | 0,0,0,0 |
| 每個元素（標籤選擇器） | 0,0,0,1 |
| 每個類，偽類 | 0,0,1,0 |
| 每個ID | 0,1,0,0 |
| 每個行內樣式 style="" | 1,0,0,0 |
| 每個!important |
上面這張表能夠幫助大家理解選擇器的優先順序，注意，權重的計算沒有進位一說，也就是說，一個類選擇器定義的樣式，比一萬個元素選擇器套娃組成的後代選擇器定義的樣式優先順序高。此外，這張表也沒必要記，因為當我們在vscode中編寫css程式碼的時候，將滑鼠放到選擇器上，能檢視到優先順序。如下：
這也解釋了為什麼2中的示例的顏色為紅色了。
總結一下，css選擇器的優先順序為 繼承或*<元素選擇器<類偽類選擇器<id選擇器<行內樣式<!important。
七、CSS盒子模型
1.萬物皆盒子
萬物皆盒子，在web上，你所看到的東西都是由一個個盒子組成的，像是標題h1-6，段落p，div，span，等，都是一個個盒子，我們設定樣式，基本上就是設定盒子的樣式。
2.盒子的分類
css將盒子分為了三大類，分別是塊盒，行盒，和行內塊三種。
1）塊盒，css中預設屬性display為block，是獨佔一行的，且在其不設定寬高的情況下，寬度預設為父元素的寬度，高度由內容撐開，沒有內容高度為0。
2）行盒，css中預設屬性display為inline，是共佔一行的，當瀏覽器顯示不下的時候，會換行，並且，其寬高由內容撐開，不受設定影響。
3）行內塊，css中預設屬性display為inline-block，具有塊盒行盒兩種特性，即可以設定寬高，也能共佔一行，常見的行內塊是img標籤。
從上面的分類可以看出，盒子的分類並不是絕對的，與display這個屬性有關，也就是說，我們可以通過設定display來實現塊盒，行盒，行內塊的轉換。
3.盒子模型的組成
盒子模型由四部分組成，由內到外是，content內容區域，padding內邊距，border邊框，margin外邊距。
1）content內容區域
此處內容區域是由css中的尺寸屬性，width和height設定的，我們常設定的寬高也就是內容的寬高，而非是盒子的寬高。
2）padding內邊距
內邊距指的就是盒子內容到邊框之間的距離，css語法設定規則如下：
padding: 10px 10px 10px 10px;
padding: 10px 5px 10px; /*上10 右5 下10 左同右*/
padding: 10px 5px;/*上10，右10，下同上，左同右*/
padding: 10px;/*全部均為10*/
在為padding賦值時，順序依次分別為上邊距，右邊距，下邊距，左邊距（從上開始順時針），如果有一個方向沒有賦值，那麼預設與對面相同。在實際過程中，通常只會對一個方向上賦值，可以這樣寫：
padding-top：10px
padding-right：10px
padding-bottom：10px
padding-left：10px
內邊距的應用，可以用來設定一些行內塊元素之間具有相同的間隙，示例：
3）border 邊框
盒子的邊框，是盒子的最外圍。css樣式語法如下
分開寫：
border-width 邊框寬度
border-type 邊框樣式 有solid 實線，dashed虛線，dotted 點線等
border-color 邊框顏色
簡寫寫法：
border: width type color;
對某一邊寫法：
border-top ：width type color; 等
邊框應用：畫等腰三角形，通過設定不同邊框不同顏色來完成
如給一個div寬高都設定為0，每個邊框都設定不同顏色的時候，
div { width: 0px; border-top: 30px solid blue; border-right: 30px solid green; border-bottom: 30px solid pink; border-left: 30px solid red; }
就會發現出現了這麼個東西
此時這個東西有4個三角形，想要其中一個怎麼辦，簡單，把其他的顏色調成透明不就好了嗎。
div { width: 0px; border-top: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid pink; border-left: 30px solid transparent; }
噹噹完成：
如果想要其它形狀的怎麼辦，可以調節各邊邊框的寬度來完成，具體看如下圖。
邊框還有一個常用特殊樣式，邊框圓角border-radius 語法：
border-radius:10px 10px 10px 10px；/*依次順序為左上角，右上角，左下角，右下角，如果有某一方向沒有賦值，則預設是和對面相同（右下對左上，左下對右上，只有一個值則全部都一樣）*/
圓角應用：畫圓設定圓角為盒子邊長（既然都談到邊長了，也就是說這個肯定是個正方形盒子）的一半
示例：
css程式碼：
div { width: 100px; height: 100px; border: 1px solid black; border-radius: 50px; }
結果圖：
4）盒子模型大小的計算公式
以寬度為例，盒子的寬度=左邊框的寬度 + 左內邊距的寬度 + 內容的寬度 + 右內邊距的寬度 + 右邊框的寬度。 盒子的高度同理。
可見設定盒子的邊框內邊距其實會撐大盒子，此時解決方法有兩種：
- 手動內減法 ：依據公式，計算盒子內容的實際寬高。
- 自動內減法：在盒子的樣式中加上一個屬性 box-sizing: border-box； 這樣，在你設定width，height屬性的時候，該寬高就會變為盒子的寬高，內容區域會自動內減。
5）margin外邊距
外邊距的作用是用來設定盒子與盒子之間的距離。
語法：
margin:5px 10px 15px 20px; /*規律與padding一致*/
為某一方向上取值，規律同樣與padding一致
margin-top/right/bottm/left
在頁面佈局的過程中，盒子的外邊距會存在三種情況。
第一種，水平佈局的情況下，（多為行內塊，或者浮動的盒子，浮動的概念後面會講），兩個盒子間的間距就是盒子之間的左或右外邊距之和。
示例：
html程式碼：
<div class="c1"></div> <div class="c2"></div>
css程式碼：
div{ display: inline-block; width: 200px; height: 200px; } .c1{ background: pink; margin-right: 100px;/* 右外邊距 */ } .c2{ background: skyblue; margin-left: 100px;/* 左外邊距 */ }
結果圖：
第二種，在（塊盒）垂直佈局的情況下，會發生外邊距（上下）合併的現象，實際間距會取較大的值
示例：
html程式碼：
<div class="c1"></div> <div class="c2"></div>
css程式碼：
div{ width: 200px; height: 200px; } .c1{ background: pink; margin-bottom: 150px;/* 下外邊距 */ } .c2{ background: skyblue; margin-top: 100px; /* 上外邊距 */ }
結果圖：
第三種，在巢狀盒子的情況下，會發生外邊距塌陷的情況。
示例：
html程式碼：
<div class="father"> <div class="son"></div> </div>
css程式碼：
.father{ width: 300px; height: 300px; background: pink; } .son{ width: 100px; height: 100px; background: skyblue; margin-top: 100px; }
這裡我們想讓這子盒子上邊離父盒子距離100px，但是發現父盒子跟著子盒子一起下來了。
解決外邊距塌陷的方法：
- 給父盒子設定上邊框，或者上內邊距，但這種時候會撐大盒子，不推薦。
- 給父元素設定overflow: hidden ;
- 父元素有內容的時候，如文字等，也會將子元素與父元素分隔。
- 將父元素轉成行內塊元素。
- 設定雙偽元素（::after ，::before），也能解決。
八、偽元素
1.使用場景
一般在頁面中非主體內容，可以使用偽元素。
2.與元素的區別
元素，也叫html裡的標籤，其是html的結構組成的一部分。
偽元素，是css模擬出來的標籤效果，其並不佔用html的結構。
兩者的本質區別，在於是否建立了新的元素。
3.常用偽元素
css3規範中偽元素一般用“::”來和偽類進行區分，實際使用中偽元素用單冒號並不會出錯，且能夠保證瀏覽器的相容性。本文中，偽元素就都用雙冒號，偽類用單冒號。
1）::before
語法：
選擇器::before{
content:'偽元素的內容';
display: 預設為行級元素 ；
樣式;
}
在選擇器所選中的元素的子元素（沒有的話就給其新增一個子偽元素）包括選中元素的內容最前面加一個偽元素。
有前就有後，自然也有後面的偽元素
2）::after
語法：
選擇器::after{
內容同before;
}
在選擇器所選中的元素的子元素（沒有的話就給其新增一個子偽元素）包括選中元素的內容最後面加一個偽元素。
示例：
html程式碼：
<div class="father"> 我是父元素 <div class="son"> 我是子元素 </div> </div>
css程式碼：
.father { width: 400px; height: 400px; background: pink; } .son { width: 100px; height: 100px; background-color: blue; } .father::before { content: '我是前面的偽元素'; display: block; width: 100px; height: 100px; background: skyblue; } .father::after { content: '我是後面的偽元素'; display: block; width: 100px; height: 100px; background: skyblue; }
結果圖：
更多其他偽元素，可以檢視相關文件。
九、偽類結構選擇器
這個選擇器在前面的選擇器的分類中有提到過，其作用是可以根據元素在html的結構關係來查詢元素，如查詢第偶數個或奇數個等需要符合一定條件的元素。
偽類選擇器與其他選擇器的區別是，它在html的結構中不存在的，是通過元素間的邏輯關係來選擇元素的。像是a標籤的各種狀態就是偽類選擇器。
常用偽類選擇器介紹
選擇一個元素，有 :first-child，:last-child，:nth-child(n)等偽類，
示例：
html程式碼
<ul> <li>我是第1個li</li> <li>我是第2個li</li> <li>我是第3個li</li> <li>我是第4個li</li> <li>我是第5個li</li> <li>我是第6個li</li> <li>我是第7個li</li> <li>我是第8個li</li> <li>我是第9個li</li> <li>我是第10個li</li> </ul>
css程式碼
li:first-child{ color: red; } /* 2、找到最後一個子元素，並且為li標籤 */ li:last-child{ color: red; } /* 3、找到第3個子元素，並且為li標籤 */ li:nth-child(3){ color: pink; } /* 4、找到倒數第3個子元素，並且為li標籤 */ li:nth-child(8){ color: pink; } li:nth-last-child(3){ color: blue; }
這裡不要被英文誤導了，像是博主在一開始學的時候，看到英文就下意識認為li:first-child為找li標籤的第一個子元素，其實並不是，這裡是一個交集選擇器的思想，其實是要找的元素是一個li標籤的同時，又要滿足是第一個子元素。
結果圖如下：
選擇多個元素，使用 :nth-child(an + b) 或者 :nth-last-child(an + b) ，這兩個的區別是前者從前往後找，後者從後往前找。括號內的n值域是非負整數，且 an + b不能顛倒順序，否則啥也選不到。
示例：
css程式碼
/* 1、找到偶數個li------------------------ */ li:nth-child(even){ color:red } li:nth-child(2n){ color:blue } /* 2、找到奇數個li------------------------ */ li:nth-child(odd){ color:pink } li:nth-child(2n+1){ color:gray } /* 3、找到前5個------------------------ */ li:nth-child(-n+5){ color:purple } /* 4、找到從第5個往後-------------------- */ li:nth-child(n+5){ color:yellow }
結果圖：
十、浮動float
1.標準流
在介紹浮動之前，先介紹一下標準流的概念。
標準流，又稱文件流，是瀏覽器在渲染顯示網頁內容的預設時採用的一套排版規則，規定了應該以何種方式排版元素。
標準流常見規則：塊元素獨佔一行，從上到下垂直佈局，行元素包括行內塊共佔一行，從左到右水平佈局。
2.浮動的概念
浮動這一概念的出現早期是為了解決圖文混排問題而出現的。像在word文件中我們也常常見到浮動功能實現圖文混排。而網頁中的浮動多用於頁面佈局（塊元素水平排布）
3.語法
float : left; 向左浮動
float : right; 向右浮動
float : none; 預設無浮動
4.特點
- 浮動的元素會脫離標準流，不在標準流中佔用空間，相當於從飄起來一樣。
- 浮動的元素，層級比標準流中的級別高，會覆蓋到標準流中的塊元素，但不會覆蓋塊內的文字，內容，以及其他行級內容，相當於圖文混排。
- 浮動的元素後面的元素會頂替浮動元素原來的位置。
- 浮動元素會受到上邊塊元素的邊界的影響，如果上邊有塊元素，浮動的元素不會跑到上邊，而是在塊元素的下邊浮動。
- 浮動的元素有特殊的顯示效果，塊級元素浮動後，可以一行顯示多個，行級元素浮動後，可以設定寬高，沒有設定display屬性就可以設定寬高。
示例：
html程式碼
<div class="c1">c1</div> <div class="c2">c2</div> <div class="c3">c3</div>
css程式碼
.c1, .c3 { /* 浮動元素會受到上面元素的邊界的影響，所以下面的元素飄不到同一行 */ /* 設定display 為inline-block，下面的元素就能飄到上面，inline-block並不是獨佔一行的*/ /* 但是不會覆蓋這個 */ width: 100px; height: 100px; background-color: red; float: left; display: inline; } .c2 { width: 110px; height: 110px; background-color: blue; float: left; }
當三個div都設定浮動的時候，發現設定了display為inline的c1和c2設定的寬高生效了。
開啟瀏覽器開發者模式，註釋掉c1，c2的float屬性，發現c2浮到了最前面
註釋掉c1，c2的display屬性，使其恢復到塊元素，發現c3移到了c2下面，c2受c1邊界影響，並沒有在原來的位置浮起來，但是c3中的文字內容則被擠了出去。
再註釋掉c2的float屬性，恢復到了原來的塊元素標準流排布模式。
5.清除浮動
先來看下這樣一個案例。
html程式碼
<div class="father clearfix"> <div class="son"></div> </div>
css程式碼
.father { background: pink; /* 清除浮動方式1 */ /* height: 100px; */ } .son { width: 100px; height: 100px; background-color: skyblue; /* float: left; */ }
結果圖：
當我們要讓子元素浮動時，也就是取消註釋float屬性時，發現父元素的高度沒有了。
這樣的情況就是子元素浮動的時候脫標，無法撐開父元素的高度，導致父元素高度為0，這會嚴重影響頁面的佈局，因此需要使用清除浮動的操作。
清除浮動常用方法:
- 設定父元素的高度。既然子元素脫標導致父元素高度塌陷，那麼最簡單粗暴的方法就是直接給父元素設定高度。像是在上面的案例就可以直接給父元素設定高度為100px，但這種方法的缺點也很明顯，就是高度固定了，如果後面更新網頁的時候，父元素內部的子元素髮生變化時，父元素的高度也需要改變，不利於網站的維護。
- 額外標籤法。利用css中有專門的清除浮動的屬性，clear 來清除浮動。 在父元素的最後一個子元素後面新增一個元素，並設定這個元素的css樣式為clear:both。這種方法的缺點是複雜化了html的文件結構。
- 單偽元素法。既然額外標籤會複雜話html文件結構，那麼新增一個偽元素就不會複雜化html文件結構了。但是如果網站中要清楚浮動的元素有多個的話，每個都要新增一個偽元素，複雜化了css程式碼，怎麼提高css程式碼的複用性呢，就用到了下面一種方法。
- 雙偽元素法。
我們在css裡寫上下面這樣的程式碼
.clearfix::after, .clearfix::before { content: ''; display: table; } .clearfix::after { clear: both; }
再將clearfix類給要清除浮動的元素，就可以實現在父元素中前後添加了兩個偽元素，前用於消除外邊距塌陷的影響，後用於清除浮動，大大提高了css程式碼的複用性。
回到上面的案例，給子元素設定一個上外邊距，設定浮動，並給父元素新增clearfix類，得到下面的結果圖。外邊距塌陷與高度塌陷的問題都解決了。
十一、定位
1.簡介
定位是一種佈局方式，可以實現元素自由擺放在頁面任意位置。定位有三種，分別是相對定位，絕對定位，固定定位。一般使用是通過定位模式加邊偏移來完成。
邊偏移，要定位元素相對於某一參考元素的位置，共4種偏移，上top，右right，下bottom，左left。
2.相對定位
語法:
position:relative;
特點：
- 相對定位的元素參考的座標原點是其本身原來的位置。
- 相對定位的元素在標準流中佔據了空間。
案例：
html程式碼:
<div></div> <div class="two"></div> <div></div>
css程式碼:
div { width: 100px; height: 100px; background-color: pink; } /* 對第二個div進行定位 */ .two { position: relative; top: 10px; left: 20px; background-color: skyblue; }
結果圖:
3.絕對定位
語法:
position:absolute;
特點:
- 這種定位在標準流中不佔用空間，是脫標的。
- 參考的是最近的一個有定位的祖先元素(先找父元素，沒有定位就參考父元素的父元素...)，如果都沒有，就參考body。
案例:
html程式碼:
<div class="father"> <div class="son1">son1</div> <div class="son2">son2</div> </div>
css程式碼:
.father { position: relative; width: 300px; height: 300px; background: pink; margin: 100px; /*為了看到更好的效果*/ } .son1, .son2 { width: 100px; height: 100px; } .son1 { position: absolute; top: 50px; left: 50px; background: skyblue; } .son2 { background: purple; }
結果圖:
4.固定定位
語法:
position:fixed;
特點:
- 在頁面中不佔位置，是脫標的
- 相對與瀏覽器的顯示介面定位的。
案例:
html程式碼：
<img src="../assets/img/floor1.jpg" alt=""> lorem1000
css程式碼:
img { position: fixed; top: 50%; right: 0; width: 50px; height: auto; transform: translate(0, -50%); }
結果圖:
5.不同佈局間的層級關係
總的來說，網頁中的層級關係預設是 標準流佈局<浮動佈局<定位佈局。
層級越大的元素，會覆蓋層級小的元素。
例如：
對於不同定位模式來說，層級都是一樣的，但後寫的定位會覆蓋先寫的定位。
例如:
html程式碼
<div class="red"></div> <div class="blue"></div> <div class="green"></div>
css 程式碼
div { width: 200px; height: 200px; } .red { position: relative; top: 0px; left: 0px; background: red; /* z-index: 3;值越大,層級就越高 */ } .green { position: absolute; top: 50px; left: 50px; background: green; /* z-index: 2; */ } .blue { position: fixed; top: 0px; left: 150px; background: blue; /* z-index: 1; */ }
結果圖:
如果想要修改定位的元素的層級關係的話，可以用css提供的 z-index屬性來修改某一元素的層級，值越大，元素就排在越上面，值也可以有負值。
十二、CSS一些常用其他屬性
1.vertical-align
2.overflow
十三、CSS新特性
1.過渡
2.位移
3.旋轉
4.漸變
5.動畫
十四、flex佈局