HTML五、CSS3徹底使用手冊（萬字詳解）

引言

目前HTML5和CSS3在各大瀏覽器上的普及率已經比較高，平常開發中也是常用，但對於這二者的知識點一直沒有作一個比較詳細的整理，這裏我總結了HTML5和CSS3新增的特性詳解和使用問題。css

本篇文章預計佔用三十分鐘閱讀，若是你已經熟練於HTML5和CSS3，閱讀本文將帶你回顧其中知識點遺漏補缺。若是你尚未對HTML5和CSS3有全面的瞭解，本文將擴充完善你的知識體系。且面試當中問到HTML5和CSS3你都將能輕鬆拿下。html

若有錯誤,歡迎指出,將在第一時間修改,歡迎提出修改意見和建議html5

HTML5

1.瞭解HTML5

HTML5屬於上一代HTML的新迭代語言，設計HTML5最初目的是爲了在移動設備上支持多媒體。css3

例如： video 標籤和 audio 及 canvas 標籤git

聲明必須位於HTML5文檔中的第一行：

<!DOCTYPE html>
複製代碼

新特性：web

新語義標籤的引入，取消了過期的顯示效果標記 <font></font> 和 <center></center>...
HTML多媒體元素引入（video、audio）
新表單控件引入（date、time...）
canvas標籤（圖形設計）
本地數據庫（本地存儲）
對本地離線存儲有更好的支持
一些API（文件讀取、地址位置、網絡信息...）

好處：面試

跨平臺
- 好比你開發了一款HTML5的遊戲，你能夠很輕易地移植到UC的開放平臺、Opera的遊戲中心、Facebook應用平臺，甚至能夠經過封裝的技術發放到App Store或Google Play上，因此它的跨平臺性很是強大，這也是大多數人對HTML5有興趣的主要緣由。
能夠很好的替代Flash
能夠給站點帶來更多的多媒體元素(視頻和音頻)
當涉及到網站的抓取和索引時，對於SEO很友好
可移植性好

缺點：正則表達式

pc端瀏覽器支持不是特別友好，形成用戶體驗不佳

2. 新語義標籤

語義標籤能夠清楚地向瀏覽器和開發者描述其意義。數據庫

<header></header>     // 頁眉
  <nav></nav>           // 導航
  <section></section>   // 文檔的節
  <article></article>   // 文章
  <aside></aside>       // 側邊欄
  <main></main>         // 主要內容
  <footer></footer>     // 頁腳
  ....
複製代碼

3. 多媒體標籤

3.1 vedio

HTML5 規定了一種經過 video 元素來包含視頻的標準方法。canvas

目前vedio支持三種視頻格式：Ogg、MPEG 四、WebM。

標籤屬性有：

src：視頻URL
width：寬
height：高
autoplay：是否自動播放
controls：是否展現控件
loop：是否循環播放
preload：是否在頁面加載後載入視頻
- auto：當頁面加載後載入整個視頻
- meta：當頁面加載後只載入元數據
- none：當頁面加載後不載入視頻

☞ 多媒體標籤在網頁中的兼容效果方式：

<video>
    <source src="trailer.mp4">
    <source src="trailer.ogg">
    <source src="trailer.WebM">
    Your browser does not support the video tag.
</video>
複製代碼

3.2 audio

audio提供了播放音頻的標準。

目前audio提供了三種音頻格式：Ogg、MP三、Wav。

標籤屬性有：

src：音頻URL
autoplay：是否自動播放
loop：是否循環播放
preload：是否在頁面加載後載入音頻。
- auto：當頁面加載後載入整個音頻
- meta：當頁面加載後只載入元數據
- none：當頁面加載後不載入音頻

音頻格式兼容處理：

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>
複製代碼

4.新表單元素及屬性

4.1 新的輸入類型

input標籤經過type能夠對輸入類型進行限制，增長了type類型：

email: 輸入合法的郵箱地址
url：輸入合法的網址
number：只能輸入數字
range：滑塊
color：拾色器
date：顯示日期
month：顯示月份
week ：顯示第幾周
time：顯示時間

4.2 新的表單屬性

新的form屬性：

autocomplete：on｜off 自動完成輸入
novalidate： true｜false 是否關閉校驗，目前支持程度很是低。

新的input屬性：

autofocus：自動獲取焦點
multiple：實現多選效果
required：必填項
placeholder：輸入框內的提示
pattern: 進行驗證，正則表達式。
form：規定所屬的表單，引用所屬表單的id。
list：屬性規定輸入域的 datalist。

<input type="text" list="abc"/>
<datalist id="abc">
  <option value="123">12312</option>
  <option value="123">12312</option>
  <option value="123">12312</option>
  <option value="123">12312</option>
</datalist>
複製代碼

min、max、step：最小值、最大值、合法間隔

5. 畫布（canvas）

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像，canvas自己是沒有繪圖能力的，全部的繪製工做必須在JS內部完成

注意點：

建立畫布大小使用屬性方式設置（不能經過CSS樣式設置，會產生失真問題！）
解決畫布重繪問題：
1. 設置一次描邊
2. 開啓新的圖層

5.1 繪圖基本方法

方法：

ctx.moveTo(x,y)：落筆
ctx.lineTo(x,y)：連線
ctx.stroke()：描邊
ctx.beginPath()：開啓新的圖層
ctx.closePath()：閉合路徑
ctx.fill()：填充

屬性：

strokeStyle：描邊顏色
lineWidth：線寬
lineJoin：線鏈接方式 round | bevel | miter (默認)
lineCap：線帽（線兩端結束的樣式）butt(默認值) | round | square
fillStyle：填充顏色

畫布上的X、Y軸用於對繪畫進行定位：

實現一個簡單的三角形：

<!--html-->
<canvas width="600" height="400"></canvas>

<!--js-->
//獲取畫布對象
var canvas = document.querySelector('canvas')
//獲取繪圖上下文
var ctx = canvas.getContext('2d')
<!--落筆-->
ctx.moveTo(100,100);
<!--連線-->
ctx.lineTo(100,200);
<!--連線-->
ctx.lineTo(200,200);
//閉合路徑
ctx.closePath();
<!--描邊-->
ctx.stroke();
複製代碼

5.2 漸變方案

線性漸變：

ctx.createLinearGradient(x0,y0,x1,y1)

x0-->漸變開始的x座標
y0-->漸變開始的y座標
x1-->漸變結束的x座標
y1-->漸變結束的y座標

實現一個簡單的線性漸變：

grd.addColorStop(0,"black");      設置漸變的開始顏色
grd.addColorStop(0.1,"yellow");   設置漸變的中間顏色
grd.addColorStop(1,"red");        設置漸變的結束顏色

ctx.strokeStyle=grd;
ctx.stroke();
複製代碼

addColorStop(offse,color)中漸變的開始位置和結束位置介於0-1之間，0表明開始，1表明結束。中間能夠設置任何小數

徑向漸變：

ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)

(x0,y0)：漸變的開始圓的 x,y 座標
r0：開始圓的半徑
(x1,y1)：漸變的結束圓的 x,y 座標
r1：結束圓的半徑

5.3 繪製虛線

ctx.setLineDash(array)

原理：設置虛線其實就是設置實線與空白部分直接的距離,利用數組描述其中的關係。

例如：

[10,10] 實線部分10px 空白部分10px
[10,5] 實線部分10px 空白部分5px
[10,5,20] 實線部分10px 空白5px 實線20px 空白部分10px 實線5px 空白20px....
[] 空數組就是實現

繪製一個虛線：

ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.setLineDash([2,4]);
ctx.stroke();
複製代碼

5.4 繪製矩形

☞ ctx.strokeRect(x,y,width,height) ：繪製一個描邊矩形

☞ ctx.fillRect(x,y,width,height)：繪製一個填充矩形

☞ ctx.clearRect(x,y,width,height)：清除矩形區域

5.5 繪製文本

ctx.fillText(文本的內容,x,y)：繪製填充文本
ctx.strokeText(文本內容,x,y)：繪製鏤空文本
ctx.font="20px 微軟雅黑"：設置文字大小
ctx.textAlign="left | right | center"：文字水平對齊方式
ctx.textBaseline="top | middle | bottom | alphabetic(默認)"：文字垂直對齊方式
文字陰影效果：
- ctx.shadowColor="red"; 設置文字陰影的顏色
- ctx.shadowOffsetX=值; 設置文字陰影的水平偏移量
- ctx.shadowOffsetY=值; 設置文字陰影的垂直偏移量
- ctx.shadowBlur=值; 設置文字陰影的模糊度

5.6 繪製圖片

ctx.drawImage(圖片對象,x,y)：將圖片繪製到畫布的指定位置，寬高由圖片寬高決定
ctx.drawImage(圖片對象,x,y,width,height)： x,y指的是矩形區域的位置，width和height指的是矩形區域的大小
ctx.drawImage(圖片對象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight)：
- sx,sy 指的是要從圖片哪塊區域開始繪製，swidth，sheight 是值截取圖片區域的大小
- dx,dy 是指畫布中矩形區域的位置，dwidth,dheight是值矩形區域的大小

5.7 繪製圓弧

ctx.arc(x,y,radius,startradian,endradian[,direct])

x,y：圓心座標
radius：半徑
startRadian：開始繪製的弧度。度數要和Math.PI作轉化
endRadian：結束繪製的弧度
direct：方向，默認順時針（false），true表明逆時針

5.8 平移、旋轉、伸縮

ctx.translate(x,y)：能夠將原點的位置進行平移
ctx.rotate()：座標進行旋轉，轉入值爲弧度
ctx.scale(x,y)：沿着x、y進行縮放，x、y爲倍數，例如：0.五、1

6. 獲取頁面元素和自定義屬性

6.1 獲取頁面元素

☞ document.querySelector("選擇器")：經過css選擇器選中第一個符合要求的元素

☞ document.querySelectorAll("選擇器")：返回全部符合選擇器的元素數組

☞ Dom.classList.add("類名")：給當前dom元素添加類樣式

☞ Dom.classList.remove("類名")：給當前dom元素移除類樣式

☞ Dom.classList.contains("類名")：檢測是否包含類樣式

☞ Dom.classList.toggle("active")：切換類樣式（有就刪除，沒有就添加）

6.2 自定義屬性

☞ 自定義屬性：data-自定義屬性名

獲取自定義屬性：Dom.dataset返回的是一個對象，Dom.dataset.屬性名或者Dom.dataset[屬性名]
設置自定義屬性：Dom.dataset.自定義屬性名=值 或者 Dom.dataset[自定義屬性名]=值

一個例子：

<!--html-->
<div id="myData" data-source="qwer"></div>

<!--js-->
document.querySelector('# myData').dataset.source === 'qwer'  // true
複製代碼

7 Web存儲

HTML提供了兩種在客戶端存儲數據的新方法：

localStorage --沒有時間限制的數據存儲
sessionStorage --有時間限制的數據存儲

以前都是由cookie完成的，但cookie不適合大量數據的存儲通常只有4KB的空間大小，每次http請求都會攜帶cookie。

7.1 localStorage

localStorage不一樣點：

存儲空間通常爲20M
僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊；不會自動把數據發送給服務器，僅在本地保存
永久有效
多窗口共享

方法：

localStorage.setItem(key, value)：存儲值
localStorage.getItem(key)：獲取值
localStorage.removeItem("key")：刪除指定鍵
localStorage.clear()：清空數據

通常用來保存長久數據。

7.2 sessionStorage

sessionStorage不一樣點：

存儲空間通常爲5M
僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊；不會自動把數據發送給服務器，僅在本地保存
生命週期爲關閉當前瀏覽器窗口
能夠在同一個窗口下訪問

方法：

sessionStorage.setItem("key", "value")：存儲
sessionStorage.getItem("key")：讀取
sessionStorage.removeItem("key")：刪除指定鍵
sessionStorage.clear()：清空數據

通常用於一次性登陸敏感數據的存儲。

7.3 共同點

cookie、sessionStorage、localStorage共同點：

都遵循同源協議
均可以被用來在瀏覽器存儲數據，並且都是字符串類型的鍵值對

7. 應用緩存

使用 HTML5，經過建立 cache manifest 文件，能夠輕鬆地建立 web 應用的離線版本。

如需啓用應用程序緩存，請在文檔的標籤中包含 manifest 屬性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
複製代碼

manifest 文件可分爲三個部分：

CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

一個完整的Manifest文件：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html
複製代碼

注：一旦文件被緩存，則瀏覽器會繼續展現已緩存的版本，即便您修改了服務器上的文件。爲了確保瀏覽器更新緩存，您須要更新 manifest 文件。

8. Web Worker

JavaScript是單線程語言，全部任務只能在一個線程上完成。隨着電腦能力的加強，尤爲是CPU多核，單線程沒法充分發揮計算機的能力。

Web Worker 的做用，就是爲 JavaScript 創造多線程環境，容許主線程建立 Worker 線程，將一些任務分配給後者運行。

8.1 Web Worker基本知識點

在JavaScript主線程運行的同時，Worker 線程在後臺運行，二者互不干擾。等到 Worker 線程完成計算任務，再把結果返回給主線程。這樣的好處是，一些計算密集型或高延遲的任務，被 Worker 線程負擔了，主線程（一般負責 UI 交互）就會很流暢，不會被阻塞或拖慢。

WebWorker有幾個注意點：

同源限制。必須與主線程的腳本文件同源。
DOM限制。Worker線程所在的全局對象，與主線程不同，沒法讀取主線程所在網頁的 DOM 對象，也沒法使用document、window、parent這些對象。可是，Worker 線程能夠navigator對象和location對象。
通訊聯繫。Worker線程和主線程不在同一個上下文環境，它們不能直接通訊，必須經過消息完成。
腳本限制。Worker線程不能執行alert()方法和confirm()方法，但可使用 XMLHttpRequest 對象發出 AJAX 請求。
文件限制。Worker 線程沒法讀取本地文件，它所加載的腳本，必須來自網絡。

8.2 主線程

☞ Worker()：用來生成Worker線程。

第一個參數是腳本的網址（必需）var myWorker = new Worker(jsUrl, options);
第二個參數是可選配置對象。其中一個做用是指定Worker的名稱：
- 主線程：var myWorker = new Worker('worker.js', { name : 'myWorker' });
- Worker線程：self.name // myWorker

Worker構造函數返回一個Worker線程對象，屬性和方法以下：

Worker.onerror：指定 error 事件的監聽函數。
Worker.onmessage：指定message事件的監聽函數，發送過來的數據在Event.data屬性中。
Worker.onmessageerror：指定messageerror事件的監聽函數。發送的數據沒法序列化成字符串時，會觸發這個事件。
Worker.postMessage()：向 Worker 線程發送消息。
Worker.terminate()：當即終止 Worker 線程。

8.3 Worker線程

Web Worker 有本身的全局對象，不是主線程的window，而是一個專門爲 Worker 定製的全局對象。所以定義在window上面的對象和方法不是所有均可以使用。

Worker 線程有一些本身的全局屬性和方法：

self.name： Worker 的名字。該屬性只讀，由構造函數指定。
self.onmessage：指定message事件的監聽函數。
self.onmessageerror：指定 messageerror 事件的監聽函數。發送的數據沒法序列化成字符串時，會觸發這個事件。
self.close()：關閉 Worker 線程。
self.postMessage()：向產生這個 Worker 線程發送消息。
self.importScripts()：加載 JS 腳本，能夠同時加載多個腳本。

9. 新增API

HTML5還新增了多種API擴充Web功能

9.1 獲取網絡狀態

☞ window.navigator.onLine：返回瀏覽器的聯網狀態，正常聯網（在線）返回 true，不正常聯網（離線）返回 false。

對應兩個事件：

window.ononline：當瀏覽器在聯機和脫機模式之間切換時，會在每一個頁面的觸發online事件。這些事件從document.body，到document結束於window。
- 使用window，document或document.body的addEventListener方法來進行監聽
window.onoffline：在navigator.onLine 屬性更改並變爲 false時，在 body或冒泡到body上的offline事件被觸發。

9.2 文件讀取

☞ 使用 FileReader() 構造器去建立一個新的 FileReader。

接口有三個用於讀取文件的方法，返回結果在result中：

readAsText：將文件讀取爲文本
readAsBinaryString：將文件讀取爲二進制編碼
readAsDataURL：將文件讀取爲DataURL

☞ FileReader 提供的事件模型：

onabort：中斷時觸發
onerror：出錯時觸發
onload：文件讀取成功完成時觸發
onloadend：讀取完成觸發，不管成功或失敗
onloadstart：讀取開始時觸發
onprogress：讀取中

一個簡易的讀取上傳圖片並渲染操做：

<!--html-->
<input type="file" name="image" >

<!--js-->
const file_input = document.querySelector('input');
file_input.onChange = function() {
    <!--獲取上傳圖片-->
    const file = this.files[0];
    
    <!--建立新的FileReader-->
    const reader = new FileReader();
    <!--將文件讀取爲DataUrl格式-->
    reader.readAsDataURL(file);
    <!--讀取成功回調函數-->
    reader.onload = function() {
        const img = document.createElement('img');
        <!--將讀取結果存入img標籤的src屬性-->
        img.src = reader.result;
        document.body.appendChild(img);
    }
}
複製代碼

9.3 獲取地理位置

window.navigator.geolocation.getCurrentPosition(success, error)：獲取當前用戶位置

第一參數爲獲取成功時的回調函數，返回對象，包含用戶地理信息：

coords.latitude：緯度
coords.longitude：經度
...

拿到用戶經緯度便可用於一些地圖操做。

第二參數爲獲取用戶地理位置失敗或被拒絕的處理函數。

window.navigator.geolocation.watchPosition(success,error)：實時獲取用戶的位置信息

clearWatch()方法中止watchPosition方法。

CSS3

CSS3是CSS（層疊樣式表）技術的升級版本，於1999年開始制訂，2001年5月23日W3C完成了CSS3的工做草案，主要包括盒子模型、列表模塊、超連接方式、語言模塊、背景和邊框、文字特效、多欄佈局等模塊。

1. 背景

1.1. background-origin

background-origin用來規定背景圖片的定位區域。

☞ padding-box：背景圖像相對內邊距定位（默認值）

☞ border-box：背景圖像相對邊框定位【以邊框左上角爲參照進行位置設置】

☞ content-box：背景圖像相對內容區域定位【之內容區域左上角爲參照進行位置設置

1.2 background-clip

background-clip規定背景的繪製區域。

☞ border-box：背景被裁切到邊框盒子位置【將背景圖片在整個容器中顯示】

☞ padding-box：背景被裁切到內邊距區域【將背景圖片在內邊距區域（包含內容區域）顯示】

☞ content-box：背景被裁切到內容區域【將背景圖片在內容區域顯示】（默認值）

1.3 background-size

background-size規定背景圖片的尺寸。

☞ cover：背景圖片按照原來的縮放比，鋪滿整個容器

☞ contain：背景圖片按照原來的縮放比，完整地顯示到容器中(不肯定是否鋪滿屏幕)

2. 邊框

2.1 box-shadow

box-shadow: x y blur spread color inset
複製代碼

向方框添加一個或多個陰影。

x：必需。水平陰影的位置。容許負值。測試
y：必需。垂直陰影的位置。容許負值。測試
blur：可選。模糊距離。測試
spread：可選。陰影的尺寸。測試
color：可選。陰影的顏色。請參閱 CSS 顏色值。測試
inset：可選。將外部陰影 (outset) 改成內部陰影。

2.2 border-radius

border-radius：設置全部四個border-*-radius屬性的簡寫屬性,想邊框添加圓角。

2.3 border-image

border-image向邊框添加圖片。

border-image 屬性是一個簡寫屬性，用於設置如下屬性：

border-image-source：圖片路徑
border-image-slice：圖片邊框向內偏移。
border-image-width：圖片邊框寬度
border-image-outset：邊框圖像區域超出邊框的量。
border-image-repeat：repeated|rounded|stretched 圖像邊框是否應平鋪｜鋪滿｜拉伸

3. 文本

☞ text-shadow：x,y,blur,color 設置文本陰影

☞ word-wrap：容許長單詞或 URL 地址換行到下一行。。normal|break-word

normal：只在容許的斷字點換行（瀏覽器保持默認處理）。
break-word：在長單詞或 URL 地址內部進行換行。

☞ text-overflow：規定當文本溢出包含元素時發生的事情。clip|ellipsis|string

clip：修剪文本
ellipsis：顯示省略符號來表明被修剪的文本
string：使用給定的字符串來表明被修剪的文本

實現一個單行文本省略：

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
複製代碼

多行文本省略：

.text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical；
    overflow: hidden;
    text-overflow: ellipsis;
}
複製代碼

4. 選擇器

☞ 屬性選擇器：

[屬性名] {}：帶有這個屬性名的全部元素
[屬性名=值] {}：[target=_blank]，選擇 target="_blank" 的全部元素。
[屬性名^=值] {}：以值開頭
[屬性名$=值] {}：以值結束
[屬性名*=值] {}：包含

例如：爲 target="_blank" 的 <a> 元素設置樣式：

a[target=_blank]
{ 
background-color:yellow;
}
複製代碼

☞ 結構僞類選擇器：

:first-child {}：選中的元素爲父元素第一個子元素
:last-child {}：選中的元素爲父元素中最後一個子元素
:nth-child(n) {}：選中的元素爲父元素中正數第n個子元素
:nth-last-child(n) {}：選中的元素爲父元素中倒數第n個子元素
- n取值爲天然數
- odd：選中奇數樹位的元素
- even：選中偶數位的元素
- n能夠是一個表達式：an+b的格式
:target：選擇器可用於選取當前活動的目標元素。突出顯示活動的 HTML 錨

☞ 結構僞元素選擇器：

::first-line：選中第一行
::first-letter：選中第一個字符
::before：在元素的內容前面插入新內容
::after：在元素的內容後面插入新內容
::selection：當被鼠標選中的時候的樣式
::placeholder：匹配佔位符的文本，只有元素設置placeholder屬性是，該僞元素才能生效

僞類和僞元素：

css引入僞類和僞元素概念是爲了格式化文檔樹之外的信息。

僞類用於當已有元素處於的某個狀態時，爲其添加對應的樣式，這個狀態是根據用戶行爲而動態變化的。

僞元素用於建立一些不在文檔樹中的元素，併爲其添加樣式，好比說，咱們能夠經過::before來在一個元素前增長一些文本。

二者的使用區別：

css3中的標準規定僞類使用單冒號: ，僞元素使用雙冒號::
僞類能夠疊加使用，而僞元素在一個選擇器中只能出現一次，而且只能出如今末尾。

.box:first-child:hover { color: #000;}   //使用僞類
.box::first-letter { color: #000;}   //使用僞元素
.box::first-letter:hover { color: #000;}   //錯誤寫法
複製代碼

僞類與類優先級相同，僞元素與標籤優先級相同。

5. 顏色漸變

☞ 線性漸變：

background-image: linear-gradient(
	to right,   // 漸變方向 to + right | top | bottom | left
	red,    // 開始漸變的顏色
	blue    // 結束漸變的顏色
);
複製代碼

☞ 徑向漸變：

background-image: radial-gradient(
    shape,  // 肯定圓的類型,ellipse（默認：橢圓）｜circle（圓的經向漸變）
    start-color,
    ...,
    last-color,
);
複製代碼

6. 2D轉換

新的轉換屬性transform：向元素應用 2D 或 3D 轉換

☞ 位移：

translate(x, y)：沿着 X 和 Y 軸移動元素。
translateX(n)：沿着 X 軸移動元素。
translateY(n)：沿着 Y 軸移動元素。

div {
    transform: translate(50px,100px);
}
複製代碼

☞ 旋轉：rotate(angle)

div {
    transform: rotate(60deg); // 備註：取值爲角度  
}
複製代碼

☞ 縮放：

scale(x,y)：寬、高縮放
scaleX(n)
scaleY(n)

備註：取值爲倍數關係，縮小大於0小於1，放大設置大於1

☞ 傾斜：

skew(x-angle,y-angle): 沿X、Y軸傾斜方向
skewX(angle)
skewY(angle)

7. 3D轉換

☞ transform-style: preserve-3d;：將平面圖形轉換爲立體圖形

☞ 位移：

tranform: translate3d(x,y,z);
transform: translateX() translateY() translateZ();

☞ 旋轉：transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);

☞ 縮放：

tranform: scale3d(x,y,z);
transform: scaleX(0.5) scaleY(1) scaleZ(1);

8. 過渡

☞ 設置哪些屬性要參與到過渡動畫效果中：transition-property: all;

☞ 設置過渡執行時間：transition-duration: 1s;

☞ 設置過渡的速度類型：transition-timing-function:

linear：以相同速度開始至結束的過渡效果
ease：慢速開始，而後變快，而後慢速結束
ease-in：以慢速開始
ease-out：以慢速結束
ease-in-out：以慢速開始和結束

☞ 設置過渡延時執行時間：transition-delay: 1s;

☞ 簡寫模式：transition: property duration timing-function delay;

9. 動畫

☞ 定義動畫集:

@keyframes  rotate {
	/* 定義開始狀態 0%*/
	from {
		transform: rotateZ(0deg);
	}
	/* 結束狀態 100%*/
	to {
		transform: rotateZ(360deg);
	}
}
複製代碼

注意：若是設置動畫集使用的是百分比，那麼記住百分比是相對整個動畫執行時間的。

☞ 調用動畫集：

animation-name: 調用動畫集名稱
animation-duration：完成一個週期所花費的時間
animation-timing-function：動畫執行的速度類型，linear|ease|ease-in|ease-out|ease-in-out
animation-delay：動畫延時
animation-iteration-count：動畫被播放的次數，infinite無限執行
animation-direction：是否應該輪流反向播放動畫
- normal（默認值，動畫正常播放）
- alternative（動畫應該輪流反向播放）;
animation-fill-mode：設置動畫填充模式，規定動畫在播放以前或以後，其動畫效果是否可見
- none：不改變默認行爲
- forwards：當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）
- backwards：在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）
- both：向前和向後填充模式都被應用。
animation-play-state：動畫暫停paused | running;

animation簡寫模式：animation: name duration timing-function delay iteration-count direction;

10. 彈性佈局（flex）

傳統的佈局方式對於特殊的佈局很是不方便，好比垂直居中。Flex是2009年W3C提出的新方案--Flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局。

10.1 容器屬性

☞ 設置父元素爲伸縮盒子【直接父元素】

display: flex;
複製代碼

注：設爲 Flex 佈局之後，子元素的float、clear和vertical-align屬性將失效。

用於容器上的屬性：

flex-direction
flex-wrap
justify-content
align-items
align-content
flex-flow

10.1.1 flex-direction

☞ 設置伸縮盒子主軸方向

flex-direction: row;    // 默認值，主軸爲水平方向，起點在左側
flex-direction: row-reverse; // 主軸爲水平方向，起點在右側
flex-direction: column;      // 主軸爲垂直方向，起點在上沿
flex-direction: column-reverse; // 主軸爲垂直方向，起點在下沿
複製代碼

10.1.2 flex-wrap

☞ 設置元素是否換行顯示

在伸縮盒子中全部的元素默認都會在一條線上顯示

若是但願換行：

flex-wrap: wrap | nowrap | wrap-reverse;
複製代碼

nowrap：默認，不換行
wrap：換行，第一行在上方
wrap-reverse：換行，第一行在下方

10.1.3 justify-content

☞ 設置元素在主軸的對齊方式

justify-content: flex-start;    // 左對齊
justify-content: flex-end;      // 右對齊
justify-content: center;        // 居中
justify-content: space-between; // 兩端對齊，項目之間的間隔相等
justify-content: space-around;  // 每一個項目兩側之間的間隔相等
複製代碼

10.1.4 align-items

☞ 設置元素在側軸的對齊方式

align-items: flex-start;    // 交叉軸的起點對齊。
align-items: flex-end;      // 交叉軸的終點對齊。
align-items: center;        // 交叉軸的中點對齊。
align-items: stretch;       //（默認值）若是項目未設置高度或設爲auto，將佔滿整個容器的高度。
align-items: baseline;      // 項目的第一行文字的基線對齊。
複製代碼

10.1.5 align-content

☞ 設置元素換行後的對齊方式,定義了多根軸線的對齊方式。

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
/* 換行後的默認值 */
align-content: stretch;
複製代碼

10.1.6 flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
複製代碼

10.2 項目屬性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

10.2.1 order

定義項目的排列順序。數值越小，排列越靠前，默認爲0。

.item {
  order: <integer>;
}
複製代碼

10.2.2 flex-grow

定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。
若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍

10.2.3 flex-shrink

定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小
若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小

10.2.4 flex-basis

flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。

它的默認值爲auto，即項目的原本大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}
複製代碼

10.2.5 flex

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

.item {
  flex: none | flex-grow flex-shrink flex-basis
}
複製代碼

10.2.6 align-self

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。

默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
複製代碼