目錄
一、背景
對於css學習一直停留在大學期間，畢業之後一直從事後端開發(C語言+Java無界面)，一直沒有機會深入學習css技術。很多標籤在使用時也不規範嚴謹，甚至是瞎用。最近有點時間，打算花上一兩週時間系統學習一下，本篇博客只是記錄相關重點知識
二、css選擇器
css一大特點就是利用選擇器，設置對應容器(元素)樣式，選擇分爲：基本選擇器和複合選擇器
| 類別 | 種類 | 備註 |
| 基本選擇器 | 標籤選擇器 |
例如： div {color:red;} 、p {color:red;} |
| 類選擇器 | 例如：.myfont {font-size:16px;} | |
| id選擇器 | 例如： #myfont{font-size:16px;} | |
| 僞類選擇器 | 鏈接僞類選擇器:a:link、a:visited、a:hover、a:active（順序必須是這樣） | |
| 結構僞類選擇器：E:first-child、E:last-child、E:nth-child(n)、E:nth-last-child(n) | ||
| 目標僞類選擇器：E:target，結合錨點方式設置屬性 | ||
| 複合選擇器 | 交集選擇器 | E.class名字{//屬性設置}，例如：p.one {}，選擇類是one且是p標籤的，此選擇器不常用 |
| 並集選擇器 | 主要用於抽出相同樣式代碼，各個選擇器用逗號分割，這些選擇樣式是相同的，例如： .classA, #one,div {//屬性設置} | |
| 後代選擇器 | 用於選擇某元素的子元素，用空格分割， 父類元素在前，子類元素在後 | |
| 子元素選擇器 | 用於選擇直接子元素，即孫子級別不在選擇， 用>表示，例如： .classA > p | |
| 屬性選擇器 |
用方括號進行選擇，例如： 1）a[title] { color: red; }，表示選擇a中帶有屬性title |
|
|
僞元素選擇器 (css3特性) |
::after 在元素內部結束位置創建一個元素，該元素爲行內元素且必須要結合content屬性使用，本質是創建一個行內元素 | |
| ::before 在元素內部開始位置創建一個元素，該元素爲行內元素且必須要結合content屬性使用 | ||
| ::selection 用鼠標拖拉選中後，例如：p::first-letter {color:orange;} | ||
| ::first-line 第一行，例如：p::first-line {color:green;} | ||
| ::first-letter 第一個字，例如：p::first-letter {color:red;} |
三、css元素分類
在css中元素分爲：塊級元素、行內元素、行內塊元素
| 常見元素 | 特點 | |
| 塊級元素 | div、p、h1~h6、ul、ol、li |
1）總是從新的一行開始 5）p、h1～h6、dt這些標籤內不能在放其他塊級元素 |
| 行內元素 | a、span、strong、b、em、i、del、s、ins、u、img、input |
1）和相鄰行內元素在一行上 注意：img input比較特殊，可以設置寬高，通過margin 0 auto來設置img是無效的，必須將其轉成block塊元素 |
| 行內塊元素 | img、input、td可以設置寬度、高度、對齊屬性 |
1）和相鄰行內元素（行內塊）在一行上，但是之間會有空間縫隙
|
我們可以通過display屬性，來改變元素顯示模式：
- display:inline 將 塊級元素 轉成 行內元素
- display:block 將 行內元素 轉成 塊級元素
- display:inline-block 將塊、行內元素 轉成 行內塊元素
四、CSS三大特性
CSS三大特行包括：層疊性、繼承性、優先級
層疊性：一般情況下，如果樣式出現出衝突，則按照css書寫順序爲準。
繼承性：子標籤會繼承父標籤的某些樣式，如字體、字號、顏色可以繼承而邊框、外邊距、內邊距、定位、元素高度、浮動等屬性不可繼承。
優先級：和權重掛鉤，權重越大優先級越高
css特殊性：
權重表示：0,0,0,0 （從左往右權重越小）
| 選擇器 | 權重 |
| 標籤選擇器 | 0,0,0,1 |
| 類、僞類選擇器 | 0,0,1,0 |
| #id選擇器 | 0,1,0,0 |
| 內嵌樣式，即在標籤中增加style="..." | 1,0,0,0 |
| !import， 例如： div {color: orange!import;} 優先執行 | 最高 |
權重疊加：如下所示，最終顯示red顏色，
<style>
ul li {/* ul權重 0,0,0,1 li權重 0,0,0,1 => 最終疊加後的權重 0,0,0,2*/
color:red;
}
li {/* li權重 0,0,0,1 */
color:green;
}
</style>
繼承的權重爲0：
<style>
li {/* 權重 0,0,0,1 */
color:orange;
}
.daohang {/* 權重 0,0,1,0 */
color:red;
}
</style>
<nav class="daohang">
<ul>
<li>繼承的權重爲0--最後爲orange</li>
</ul>
</nav>
五、CSS三大模塊
CSS的三大模塊包含：盒子模型、浮動、定位，這部分是無論如何都必須要掌握的。
5.1、盒子模型
網頁佈局就是擺盒子過程，盒子三元素：邊框(border)、內邊距(padding)、外邊距(margin)。
內邊距：只盒子裏的內容與邊框的距離，可以通過padding-top、padding-right、padding-bottom、padding-left來設置
外邊距：盒子的邊框與其他盒子的邊框距離，可以通過margin-top、margin-right、margin-bottom、margin-left來設置。行內元素（例如span）只有左右外邊距，沒有上下外邊距。內邊距上下是有問題的。因此行內元素不建議設置上下內外邊距。
盒子空間尺寸：
高度 = content height + padding + border + margin 寬度 = content width + padding + border + margin
內盒子尺寸：
高度 = content height + padding + border 寬度 = content width + padding + border
注：一個盒子的沒有指定寬度\高度 或者 子盒子繼承父盒子的寬度\高度，則padding不會影響本盒子的大小
注：我們在使用ul標籤的時候，默認情況下ul有內外邊距，因此我們經常將內外邊距清0
5.2、浮動-float
最早浮動float，是用來實現文字環繞效果（例如：文字環繞圖片），我們只需要給img增加float:right（float:left）即可。但是後來float也用於將任何盒子（塊級元素，例如div）在一行排列顯示，因此float常用於網頁佈局。
元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
| float取值 | 說明 |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 元素不浮動 |
浮動脫離標準流，不佔位置，會影響標準流，浮動只有左右浮動。
浮動使用方式
我們在使用浮動的時候，往往需要定義一個標準流的盒子（即沒有float屬性）作爲父級元素，在父級元素內添加我們的浮動元素，這樣能保證後面元素不會被被覆蓋。
浮動特性
1、浮動的元素總是找離它最近的父元素進行對其並且不會超過內邊距。
2、一個父盒子裏面的子盒子，如果想要子盒子在一行顯示，必須將所有子盒子設置爲浮動
3、設置float屬性的元素，具有行內塊特性，例如div（塊級元素）添加了float，可以在一行顯示多個div，再或者span元素添加了float，可以對其進行寬度和高度的設置。
清除浮動
某些場景，父級元素在沒有設置高度場景下，子級元素浮動會引起一些問題。例如如下代碼：
<style>
.father {/* 父級元素 不設置高度 */
border: 1px solid red;
}
.damao {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.ermao {
width: 150px;
height: 100px;
background-color: purple;
float: left;
}
.xiaoming {
width: 300px;
height: 200px;
background-color: black;
}
</style>
<div class="father">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="xiaoming">小明</div>
div小明，就會出現被覆蓋現象，例如如下：
解決方法有兩種：
1）給父級元素指定高度，但是有些時候不方便給父級元素高度，例如新聞頁，無法提前獲知新聞內容大小。
2） 清除浮動clear屬性 -- 推薦方法
| clear取值 | 說明 |
| left | 清除左側浮動的影響 |
| right | 清除右側浮動的影響 |
| both | 同時清除左右兩側浮動的影響，推薦使用這個 |
清除浮動4種方式
1）額外標籤法：在最後一個浮動元素後面添加一個空的標籤，例如<div style="clear:both"></div>，不推薦這種方式
2）父級元素添加overflow屬性， .father { overflow:hidden; /* 觸發BFC，BFC可以清除浮動 */ }
3）使用after僞元素清除浮動，實際是額外標籤法的升級版本，具體代碼如下：
<style>
.clearfix:after {
content: "."; /* 內容隨意 儘量不空，避免兼容器問題 */
display: block; /* 轉換爲塊級元素 */
height: 0; /* 設置高度爲0 */
visibility: hidden; /* 隱藏盒子，相當於隱藏 content內容 */
clear: both; /* 清除浮動 */
}
.clearfix {/* 解決兼容器 ie6 ie7 處理方式 */
/**
* 1、*代表ie6/ie7能識別的特殊符號 帶有這個*的屬性 只有ie6/ie7才執行
* 2、zoom就是ie6/ie7 清除浮動的方法
*/
*zoom: 1;
}
</style>
<!-- 父級元素引用 clearfix類 -->
<div class="father clearfix">
...
</div>
4）使用before和after雙僞元素清除浮動 -- 推薦方法
.clearfix:before, .clearfix:after {
content: ""; /* 內容爲空 */
display: table; /* 此元素會作爲塊級表格來顯示（類似 <table>），表格前後帶有換行符。 */
}
.clearfix:after {
clear: both;
}
.clearfix {/* 解決兼容器 ie6 ie7 處理方式 */
/**
* 1、*代表ie6/ie7能識別的特殊符號 帶有這個*的屬性 只有ie6/ie7才執行
* 2、zoom就是ie6/ie7 清除浮動的方法
*/
*zoom: 1;
}
5.3、定位
元素的定位屬性主要包括邊偏移和定位模式兩部分，只有同時設置這兩個屬性才能起到定位的效果，即完整定位=邊偏移+定位模式。
5.3.1、邊偏移
| 邊偏移屬性 | 描述 | 備註 |
| top | 頂端偏移量，定義元素相對於其父元素上邊線的距離 | 在同一個元素中，兩者只能出現一個 |
| bottom | 底部偏移量，定義元素相對於其父元素下邊線的距離 | |
| left | 左側偏移量，定義元素相對於其父元素左邊線的距離 | 在同一個元素中，兩者只能出現一個 |
| right | 右側偏移量，定義元素相對於其父元素右邊線的距離 |
使用：top:100px; left:30px;
5.3.2、定位模式
所謂定位模式實際是定位類型，在CSS中使用position屬性對其進行定位設置，語法格式：選擇器 {position:屬性值}，position屬性值如下：
| 取值 | 描述 | 備註 |
| static | 靜態定位，默認方式。 | 邊偏移對該模式是無效的，所以一般用於清除定位的。 |
| relative | 相對定位，相對於其原文檔流的位置進行定位 | 每次移動都以自己的左上角爲起點，開始移動。注意：通過它改變位置，原來佔有的位置繼續佔有。即其他元素不能佔用空缺位置，相對定位不脫離標準流，如圖5-1所示。 |
| absolute | 絕對定位，相對於其上一個已經定位的父元素進行定位 | 絕對定位是脫離標準流的，不佔有原有位置，原有位置會被其他元素替補，如圖5-2所示 |
5.3.2.1、相對定位模式
<style>
.father {
background-color: black;
width: 300px;
height: 400px;
}
.father div {
width: 100px;
height: 100px;
background-color: yellow;
}
.child2 {
top:100px;
left:150px;
position: relative;/* 以自己爲左上角爲基準點 自我爲核心模式 佔坑不拉屎角色 */
}
</style>
<div class="father">
<div class="child1">child1</div>
<div class="child2">child2</div>
<div class="child3">child3</div>
</div>
5.3.2.2、絕對定位模式
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
margin: 130px;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
position: absolute;/* 給大兒子 設置定位*/
top: 30px;
left: 30px;
}
.son2 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="father">
<div class="son"></div>
<div class="son2"></div>
</div>
在absolute模式（絕對定位）下，有兩種場景：
1）父級元素沒有定位，子元素有定位，則子元素定位以瀏覽器左上角爲基準點
2）父級元素有定位（例如position=relative、position=absolute），子元素有定位，則子元素定位以父元素左上角爲基準點
絕對模式下如何讓盒子水平居中、垂直居中：
注意：加了絕對定位的盒子，在使用"margin X auto" 將無效，不能使其水平居中。
可以使用如下算法進行設置，可以達到水平、垂直居中：以水平居中爲例：
1、父元素設置相對定位：position:relative; 子元素設置絕對定位：position:absolute;
2、子元素left值等於元素的width的一半，例如父元素width:800px， 那麼left等於400px；也可以設置爲left:50%
3、子元素設置margin-left爲負值，且數值爲子元素width的一半，例如子元素width:100px， 那麼margin-left:-50px;
或者使用transform: translate(-50%); 這裏的50%是自己的width的一半，這樣能夠解決width不是偶數場景，免去計算過程
總結：
1） 浮動float的主要目的是將多個塊級元素在一行顯示，
定位主要是移動位置，讓盒子到我們想要位置上。
2）相對定位：佔有位置，不脫標準流
絕對定位：不佔有位置，脫離標準流
3）子絕父相：在網頁中我們通常這樣使用定位，子元素用絕對定位，父元素用相對定位，即爲子絕父相。
5.3.2.3、固定定位模式
固定定位是絕對定位的一種特殊形式，類似於 正方形是一個特殊的 矩形。它以瀏覽器窗口作爲參照物來定義網頁元素。當position屬性的取值爲fixed時，即可將元素的定位模式設置爲固定定位。
當對元素設置固定定位後，它將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。
固定定位有三點：
1. 固定定位的元素跟父親沒有任何關係，只認瀏覽器。
2. 固定定位完全脫離標準流，不佔有位置（其他盒子會替補到遺留出的位置），不隨着滾動條滾動。
3. 固定定位的盒子一定要指定寬和高，除非由內容自動撐開
5.4 定位總結
| 定位模式 | 是否脫標占有位置 | 是否可以使用邊偏移 | 移動位置基準 | 備註 |
| 靜態static | 不脫標，正常模式 | 不可以 | 正常模式 | |
| 相對定位relative | 不脫標，佔有位置 | 可以 | 相對自身位置移動（自戀型） | |
| 絕對定位absolute | 完全脫標，不佔有位置 | 可以 | 相對於定位父級移動位置（拼爹型） | 默認轉成行內塊元素 |
| 固定定位fixed | 完全脫標，不佔有位置 | 可以 | 相對於瀏覽器移動位置（認死理型） | 默認轉成行內塊元素 |
我們可以通過z-index指定疊放次序，數值越大，越在上層顯示。疊放次序有點像PS中圖層概念。z-index只有在相對定位、絕對定位和固定定位下有作用，其他場景均無效。