一、元素顯示模式總結
| 元素模式 | 元素排列 | 設置樣式 | 默認寬度 | 包含 | 常見標籤 |
| 塊級元素 | 一行只能放一個 | 可以直接設置寬高 | 父容器的100% | 容器級可以包含任何標籤 | <h1>~<h6>、<p>、<div>、<ul>、<ol> |
| 行內元素 | 一行可以放多個 | 不可以直接設置寬高 | 本身內容的寬度 | 容納文本或其他行內元素 | <a>、<span> |
| 行內塊元素 | 一行可以放多個 | 可以直接設置寬高 | 本身內容的寬度 | <img />、<input />、<td> |
二、CSS 三大特性
1、層疊性：相同選擇器設置相同的樣式，此時一個樣式就會覆蓋(層疊)另一個衝突的樣式。
2、繼承性：子標籤會繼承父標籤裏的某些樣式，如文本顏色和字號。
3、優先級：當同一個元素指定多個選擇器，就會有優先級的產生；選擇器相同則執行層疊性，否則根據選擇器權重執行。
優先級注意點：權重是由四組數字組成，但是不會有進位。(可以理解爲類選擇器永遠大於元素選擇器，ID選擇器永遠大於類選擇器)
| 選擇器 | 選擇器權重 |
| 繼承或* | 0,0,0,0 |
| 元素選擇器 | 0,0,0,1 |
| 類選擇器，僞類選擇器 | 0,0,1,0 |
| ID 選擇器 | 0,1,0,0 |
| 行內樣式 style="" | 1,0,0,0 |
| !important 重要的 | 無窮大 |
三、圓角邊框
border-radius 屬性用於設置元素的外邊框圓角，語法 border-radius: length;(以length爲半徑畫圓相切於邊框兩邊所形成的圓角)
四個屬性：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。
四、陰影
1、盒子陰影：box-shadow 屬性用於爲盒子添加陰影。語法 box-shadow: h-shadow v-shadow blur spread color inset;
2、文字陰影：text-shadow 屬性用於給文本添加陰影。語法 text-shadow: h-shadow v-shadow blur color;
h-shadow 水平陰影，v-shadow 垂直陰影，blur 模糊距離，spread 陰影尺寸，color 陰影顏色，inset 將外部陰影改爲內部陰影。
五、浮動
設置了浮動 float 的元素最重要特性：
1、脫離標準流的控制浮動到指定位置，俗稱脫標。
2、浮動的盒子不再保留原先的位置
3、浮動元素具有行內塊元素特性
六、清除浮動
由於父盒子很多情況下，不方便給高度，但是子盒子浮動又不佔有位置，最後父盒子高度爲0，就好影響下面的標準流盒子。
清除浮動的方法：額外標籤法、父級 overflow: hidden、父級 after 僞元素、父級雙僞元素。
七、定位
| 定位模式 | 是否脫標 | 移動位置 | 是否常用 |
| static 靜態定位 | 否 | 不能使用邊偏移 | 幾乎不用 |
| relative 相對定位 | 否(佔有位置) | 相對於自身位置移動 | 常用 |
| absolute 絕對定位 | 是(不佔有位置) | 帶有定位的父級 | 常用 |
| fix 固定定位 | 是(不佔有位置) | 相對於瀏覽器可視窗口 | 常用 |
| sticky 粘性定位 | 否(佔用位置) | 相對於瀏覽器可視窗口 | 常用 |
(在使用定位佈局時，可能會出現盒子重疊的情況，可使用 z-index 來控制盒子的前後順序)
八、vertical-align 屬性應用
CSS 的 vertical-align 屬性經常用於設置圖片或者表單(行內塊元素)和文字垂直對齊，只對行內或行內塊元素有效。
語法：vertical-align: baseline | top | middle | bottom，默認以基線對齊。
九、結構僞類選擇器
| 選擇符 | 簡介 |
| E:first-child | 匹配父元素中的第一個子元素 E |
| E:last-child | 匹配父元素中最後一個 E 元素 |
| E:nth-child(n) | 匹配父元素中第 n 個子元素 E |
| E:first-of-type | 指定類型 E 的第一個 |
| E:last-of-type | 指定類型 E 的最後一個 |
| E:nth-of-type(n) | 指定類型 E 的第 n 個 |
十、盒子模型
CSS3 中可以通過 box-sizing 來指定盒模型，有兩個值：content-box、border-box。
1、box-sizing: content-box 盒子大小爲 width + padding + border。(默認情況)
2、box-sizing: border-box 盒子大小爲 width。
十一、過渡屬性
transition: 要過渡的屬性 花費的時間 運動曲線 何時開始
十二、2D 轉換
1、2D 移動是 2D 轉換裏面的一種功能，可以改變元素在頁面的位置，類似定位。
語法：transform: translate(x,y);
translate 不會影響其他元素的位置，translate 中的百分比單位是相對於自身元素的，對行內標籤沒得效果。
2、2D 旋轉指的是讓元素在二維平面內順時針旋轉或者逆時針旋轉。
語法：transform: rotate(度數);
單位是 deg，角度爲正時，順時針旋轉，否則逆時針旋轉，默認旋轉的中心點時元素中心點。
3、2D 轉換中心點
語法：transform-origin: x y;
4、2D 轉換之縮放
語法：transform: scale(x,y)
x,y 分別是寬高放大的倍數，也可以簡寫爲 transform: scale(n);
可以設置轉換中心點縮放，默認以中心點縮放，而且不影響其他盒子。
十三、動畫
1、用 keyframes 定義動畫
<!--類似於這種，可以是其他百分比例，0% 和 100% 相當於from 和 to --> @keyframes 動畫名稱{ 0%{ } 50%{ width: 100px; } 100%{ width: 200px; } }
2、使用動畫
div {
width: 50px;
height: 50px;
background-color: pink;
margin: 100px auto;
animation-name: 動畫名稱;
animation-duration: 持續時間；
}
3、動畫其他屬性
animation-timing-function(速度曲線)、animation-delay(延時)、animation-iteration-count(播放次數) ......
十四、3D 轉換
1、3D 移動在 2D 移動的基礎上多加了一共可以移動的方向，就是 z 軸方向。
語法：transform: translate3d(x,y,z);
2、透視 perspective
3、3D 旋轉：transform: rotate3d(x,y,z,deg)
4、3D 呈現 transform-style
transform-style: preserve-3d;(默認flat，不開啓 3D 立體空間)。
代碼寫給父級，但是影響的是子盒子。
十五、彈性盒 flex
flex 是 flexible Box 的縮寫，採用 flex 佈局的元素，稱爲 flex 容器，他的所有子元素自動成爲容器成員，稱爲 flex 項目。
flex 佈局就是通過給父盒子添加 flex 屬性，來控制子盒子的位置和排列方式。
當我們爲父盒子設爲 flex 佈局後，子元素的 float、clear 和 vertical-align 屬性將失效。
1、常見父項屬性：flex-direction(設置主軸的方向)、justify-content(設置主軸上的子元素排列方式)、flex-wrap(設置子元素是否換行)
align-content(設置側軸上的子元素的排列方式，僅對多行有效)，align-items(設置側軸上的子元素排列方式，僅用於單行)
flex-flow(複合屬性，相當於同時設置了 flex-direction 和 flex-wrap)
2、常見子項屬性：flex(子項目佔的比例)、align-self(控制子項目自己在側軸的排列方式)、order(子項的排列順序)
十六、常見問題彙總
1、子元素設置 margin-top 後，父元素跟隨下移的問題
2、外邊距合併塌陷問題
浮動元素、絕對定位(固定定位)元素都不會觸發外邊距合併的問題