HTML5
1.HTML5 新元素
HTML5提供了新的元素來創建更好的頁面結構：
| 標簽 |
描述 |
| 定義頁面獨立的內容區域。 |
|
| 定義頁面的側邊欄內容。 |
|
| 允許您設置一段文本，使其脫離其父元素的文本方向設置。 |
|
| 定義命令按鈕，比如單選按鈕、復選框或按鈕 |
|
| 用於描述文檔或文檔某個部分的細節 |
|
| 定義對話框，比如提示框 |
|
| 標簽包含 details 元素的標題 |
|
| 規定獨立的流內容（圖像、圖表、照片、代碼等等）。 |
|
| 定義 <figure> 元素的標題 |
|
| 定義 section 或 document 的頁腳。 |
|
| 定義了文檔的頭部區域 |
|
| 定義帶有記號的文本。 |
|
| 定義度量衡。僅用於已知最大和最小值的度量。 |
|
| 定義導航鏈接的部分。 |
|
| 定義任何類型的任務的進度。 |
|
| 定義 ruby 注釋（中文注音或字符）。 |
|
| 定義字符（中文注音或字符）的解釋或發音。 |
|
| 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。 |
|
| 定義文檔中的節（section、區段）。 |
|
| 定義日期或時間。 |
|
| 規定在文本中的何處適合添加換行符。 |
2.HTML5 Canvas
HTML5 <canvas> 元素用於圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。
<canvas>簡單實例如下:<canvas id="myCanvas" width="200" height="100"></canvas>
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>
3.HTML5 拖放
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標准的一部分，任何元素都能夠拖放。
設置元素為可拖放
首先，為了使元素可拖動，把 draggable 屬性設置為 true ：
<img draggable="true">
拖動什么 - ondragstart 和 setData()
放到何處 - ondragover
進行放置 - ondrop
4.HTML5 地理定位
HTML5 Geolocation API 用於獲得用戶的地理位置。
鑒於該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。
<script>var x=document.getElementById("demo");function getLocation(){if (navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition);}else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}}function showPosition(position){x.innerHTML="Latitude: " + position.coords.latitude +"<br>Longitude: " + position.coords.longitude;}</script>
5.HTML5 Audio(音頻)、Video(視頻)
HTML5 規定了在網頁上嵌入音頻元素的標准，即使用 <audio> 元素。
<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">您的瀏覽器不支持 audio 元素。</audio>
HTML5 規定了一種通過 video 元素來包含視頻的標准方法。
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">您的瀏覽器不支持Video標簽。</video>
6.HTML5 Input 類型
HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。
- color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
<input type="range" name="points" min="1" max="10">Search Google: <input type="search" name="googlesearch">電話號碼: <input type="tel" name="usrtel">
7.HTML5 表單元素
HTML5 有以下新的表單元素:
| 標簽 | 描述 |
|---|---|
| <datalist> | <input>標簽定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。 |
| <keygen> | ><keygen> 標簽規定用於表單的密鑰對生成器字段。 |
| <output> | <output> 標簽定義不同類型的輸出，比如腳本的輸出。 |
<datalist> 元素規定輸入域的選項列表。
<datalist> 屬性規定 form 或 input 域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：
使用 <input> 元素的列表屬性與 <datalist> 元素綁定.
<input list="browsers"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist>
8.HTML5 表單屬性
HTML5 的 <form> 和 <input>標簽添加了幾個新屬性.
<form>新屬性：
- autocomplete、novalidate
<input>新屬性：
- autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step
9.HTML5 語義元素
HTML5提供了新的語義元素來明確一個Web頁面的不同部分:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
10.HTML5 Web 存儲
Web Storage DOM API 為Web應用提供了一個能夠替代cookie的Javascript解決方案
- sessionStorage—客戶端數據存儲，只能維持在當前會話范圍內。
- localStorage—客戶端數據存儲，能維持在多個會話范圍內。
對於大量復雜數據結構，一般使用IndexDB
11.HTML5 離線Web應用（應用程序緩存）
HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網連接時進行訪問。
應用程序緩存為應用帶來三個優勢：
- 離線瀏覽 - 用戶可在應用離線時使用它們
- 速度 - 已緩存資源加載得更快
- 減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
HTML5 Cache Manifest 實例
下面的例子展示了帶有 cache manifest 的 HTML 文檔（供離線瀏覽）：
<!DOCTYPE HTML><html manifest="demo.appcache"><body>The content of the document......</body></html>
Manifest 文件
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
manifest 文件可分為三個部分：
- CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
- NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
- FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面
CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.phpFALLBACK:/html/ /offline.html
12.HTML5 Web Workers
當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。
web worker 是運行在后台的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在后台運行。（相當於實現多線程並發）
13.HTML5 SSE
Server-Sent 事件指的是網頁自動獲取來自服務器的更新。
以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。
例子：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。
EventSource 對象用於接收服務器發送事件通知：
var source=new EventSource("demo_sse.php");source.onmessage=function(event){document.getElementById("result").innerHTML+=event.data + "<br>";};
<?phpheader('Content-Type: text/event-stream');header('Cache-Control: no-cache');$time = date('r');echo "data: The server time is: {$time}nn";flush();?>
14.HTML5 WebSocket
WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。在WebSocket API中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過 TCP 連接直接交換數據。當你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務器發送數據，並通過 onmessage 事件來接收服務器返回的數據。以下 API 用於創建 WebSocket 對象。
CSS3
CSS3選擇器
| 選擇器 | 示例 | 示例說明 | CSS |
|---|---|---|---|
| .class | .intro | 選擇所有class="intro"的元素 | 1 |
| #id | #firstname | 選擇所有id="firstname"的元素 | 1 |
| * | * | 選擇所有元素 | 2 |
| element | p | 選擇所有<p>元素 | 1 |
| element,element | div,p | 選擇所有<div>元素和<p>元素 | 1 |
| element element | div p | 選擇<div>元素內的所有<p>元素 | 1 |
| element>element | div>p | 選擇所有父級是 <div> 元素的 <p> 元素 | 2 |
| element+element | div+p | 選擇所有緊接着<div>元素之后的<p>元素 | 2 |
| [attribute] | [target] | 選擇所有帶有target屬性元素 | 2 |
| [attribute=value] | [target=-blank] | 選擇所有使用target="-blank"的元素 | 2 |
| [attribute~=value] | [title~=flower] | 選擇標題屬性包含單詞"flower"的所有元素 | 2 |
| [attribute|=language] | [lang|=en] | 選擇一個lang屬性的起始值="EN"的所有元素 | 2 |
| :link | a:link | 選擇所有未訪問鏈接 | 1 |
| :visited | a:visited | 選擇所有訪問過的鏈接 | 1 |
| :active | a:active | 選擇活動鏈接 | 1 |
| :hover | a:hover | 選擇鼠標在鏈接上面時 | 1 |
| :focus | input:focus | 選擇具有焦點的輸入元素 | 2 |
| :first-letter | p:first-letter | 選擇每一個<P>元素的第一個字母 | 1 |
| :first-line | p:first-line | 選擇每一個<P>元素的第一行 | 1 |
| :first-child | p:first-child | 指定只有當<p>元素是其父級的第一個子級的樣式。 | 2 |
| :before | p:before | 在每個<p>元素之前插入內容 | 2 |
| :after | p:after | 在每個<p>元素之后插入內容 | 2 |
| :lang(language) | p:lang(it) | 選擇一個lang屬性的起始值="it"的所有<p>元素 | 2 |
| element1~element2 | p~ul | 選擇p元素之后的每一個ul元素 | 3 |
| [attribute^=value] | a[src^="https"] | 選擇每一個src屬性的值以"https"開頭的元素 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 選擇每一個src屬性的值以".pdf"結尾的元素 | 3 |
| [attribute*=value] | a[src*="44lan"] | 選擇每一個src屬性的值包含子字符串"44lan"的元素 | 3 |
| :first-of-type | p:first-of-type | 選擇每個p元素是其父級的第一個p元素 | 3 |
| :last-of-type | p:last-of-type | 選擇每個p元素是其父級的最后一個p元素 | 3 |
| :only-of-type | p:only-of-type | 選擇每個p元素是其父級的唯一p元素 | 3 |
| :only-child | p:only-child | 選擇每個p元素是其父級的唯一子元素 | 3 |
| :nth-child(n) | p:nth-child(2) | 選擇每個p元素是其父級的第二個子元素 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 選擇每個p元素的是其父級的第二個子元素，從最后一個子項計數 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇每個p元素是其父級的第二個p元素 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 選擇每個p元素的是其父級的第二個p元素，從最后一個子項計數 | 3 |
| :last-child | p:last-child | 選擇每個p元素是其父級的最后一個子級。 | 3 |
| :root | :root | 選擇文檔的根元素 | 3 |
| :empty | p:empty | 選擇每個沒有任何子級的p元素（包括文本節點） | 3 |
| :target | #news:target | 選擇當前活動的#news元素（包含該錨名稱的點擊的URL） | 3 |
| :enabled | input:enabled | 選擇每一個已啟用的輸入元素 | 3 |
| :disabled | input:disabled | 選擇每一個禁用的輸入元素 | 3 |
| :checked | input:checked | 選擇每個選中的輸入元素 | 3 |
| :not(selector) | :not(p) | 選擇每個並非p元素的元素 | 3 |
| ::selection | ::selection | 匹配元素中被用戶選中或處於高亮狀態的部分 | 3 |
| :out-of-range | :out-of-range | 匹配值在指定區間之外的input元素 | 3 |
| :in-range | :in-range | 匹配值在指定區間之內的input元素 | 3 |
| :read-write | :read-write | 用於匹配可讀及可寫的元素 | 3 |
| :read-only | :read-only | 用於匹配設置 "readonly"（只讀） 屬性的元素 | 3 |
| :optional | :optional | 用於匹配可選的輸入元素 | 3 |
| :required | :required | 用於匹配設置了 "required" 屬性的元素 | 3 |
| :valid | :valid | 用於匹配輸入值為合法的元素 | 3 |
| :invalid | :invalid | 用於匹配輸入值為非法的元素 |
CSS3 邊框（Borders）
用CSS3，你可以創建圓角邊框，添加陰影框，並作為邊界的形象而不使用設計程序
| 屬性 | 說明 | CSS |
|---|---|---|
| border-image | 設置所有邊框圖像的速記屬性。 | 3 |
| border-radius | 一個用於設置所有四個邊框- *-半徑屬性的速記屬性 | 3 |
| box-shadow | 附加一個或多個下拉框的陰影 | 3 |
div{border:2px solid;border-radius:25px;box-shadow: 10px 10px 5px #888888;border-image:url(border.png) 30 30 round;}
CSS3 背景
CSS3中包含幾個新的背景屬性，提供更大背景元素控制。
| 順序 | 描述 | CSS |
|---|---|---|
| background-clip | 規定背景的繪制區域。 | 3 |
| background-origin | 規定背景圖片的定位區域。 | 3 |
| background-size | 規定背景圖片的尺寸。 | 3 |
div{background:url(img_flwr.gif);background-repeat:no-repeat;background-size:100% 100%;background-origin:content-box;}
多背景
body{background-image:url(img_flwr.gif),url(img_tree.gif);}
CSS3 漸變
CSS3 定義了兩種類型的漸變（gradients）：
- 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
-
background: linear-gradient(direction, color-stop1, color-stop2, ...);
- 徑向漸變（Radial Gradients）- 由它們的中心定義
-
background: radial-gradient(center, shape size, start-color, ..., last-color);
CSS3 文本效果
| 屬性 | 描述 | CSS |
|---|---|---|
| hanging-punctuation | 規定標點字符是否位於線框之外。 | 3 |
| punctuation-trim | 規定是否對標點字符進行修剪。 | 3 |
| text-align-last | 設置如何對齊最后一行或緊挨着強制換行符之前的行。 | 3 |
| text-emphasis | 向元素的文本應用重點標記以及重點標記的前景色。 | 3 |
| text-justify | 規定當 text-align 設置為 "justify" 時所使用的對齊方法。 | 3 |
| text-outline | 規定文本的輪廓。 | 3 |
| text-overflow | 規定當文本溢出包含元素時發生的事情。 | 3 |
| text-shadow | 向文本添加陰影。 | 3 |
| text-wrap | 規定文本的換行規則。 | 3 |
| word-break | 規定非中日韓文本的換行規則。 | 3 |
| word-wrap | 允許對長的不可分割的單詞進行分割並換行到下一行。 | 3 |
CSS3 字體
以前CSS3的版本，網頁設計師不得不使用用戶計算機上已經安裝的字體。使用CSS3，網頁設計師可以使用他/她喜歡的任何字體。當你發現您要使用的字體文件時，只需簡單的將字體文件包含在網站中，它會自動下載給需要的用戶。您所選擇的字體在新的CSS3版本有關於@font-face規則描述。您"自己的"的字體是在 CSS3 @font-face 規則中定義的。
<style>@font-face{font-family: myFirstFont;src: url(sansation_light.woff);}div{font-family:myFirstFont;}</style>
CSS3 轉換和變形
2D新轉換屬性
以下列出了所有的轉換屬性:
| Property | 描述 | CSS |
|---|---|---|
| transform | 適用於2D或3D轉換的元素 | 3 |
| transform-origin | 允許您更改轉化元素位置 |
2D 轉換方法
| 函數 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣。 |
| translate(x,y) | 定義 2D 轉換，沿着 X 和 Y 軸移動元素。 |
| translateX(n) | 定義 2D 轉換，沿着 X 軸移動元素。 |
| translateY(n) | 定義 2D 轉換，沿着 Y 軸移動元素。 |
| scale(x,y) | 定義 2D 縮放轉換，改變元素的寬度和高度。 |
| scaleX(n) | 定義 2D 縮放轉換，改變元素的寬度。 |
| scaleY(n) | 定義 2D 縮放轉換，改變元素的高度。 |
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 |
| skew(x-angle,y-angle) | 定義 2D 傾斜轉換，沿着 X 和 Y 軸。 |
| skewX(angle) | 定義 2D 傾斜轉換，沿着 X 軸。 |
| skewY(angle) | 定義 2D 傾斜轉換，沿着 Y 軸。 |
3D轉換屬性
下表列出了所有的轉換屬性：
| 屬性 | 描述 | CSS |
|---|---|---|
| transform | 向元素應用 2D 或 3D 轉換。 | 3 |
| transform-origin | 允許你改變被轉換元素的位置。 | 3 |
| transform-style | 規定被嵌套元素如何在 3D 空間中顯示。 | 3 |
| perspective | 規定 3D 元素的透視效果。 | 3 |
| perspective-origin | 規定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定義元素在不面對屏幕時是否可見。 | 3 |
3D 轉換方法
| 函數 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
定義 3D 轉換，使用 16 個值的 4x4 矩陣。 |
| translate3d(x,y,z) | 定義 3D 轉化。 |
| translateX(x) | 定義 3D 轉化，僅使用用於 X 軸的值。 |
| translateY(y) | 定義 3D 轉化，僅使用用於 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉化，僅使用用於 Z 軸的值。 |
| scale3d(x,y,z) | 定義 3D 縮放轉換。 |
| scaleX(x) | 定義 3D 縮放轉換，通過給定一個 X 軸的值。 |
| scaleY(y) | 定義 3D 縮放轉換，通過給定一個 Y 軸的值。 |
| scaleZ(z) | 定義 3D 縮放轉換，通過給定一個 Z 軸的值。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
| rotateX(angle) | 定義沿 X 軸的 3D 旋轉。 |
| rotateY(angle) | 定義沿 Y 軸的 3D 旋轉。 |
| rotateZ(angle) | 定義沿 Z 軸的 3D 旋轉。 |
| perspective(n) | 定義 3D 轉換元素的透視視圖。 |
CSS3 過渡
過渡屬性
下表列出了所有的過渡屬性:
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡寫屬性，用於在一個屬性中設置四個過渡屬性。 | 3 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 |
| transition-timing-function | 規定過渡效果的時間曲線。默認是 "ease"。 | 3 |
| transition-delay | 規定過渡效果何時開始。默認是 0。 | 3 |
div{transition-property: width;transition-duration: 1s;transition-timing-function: linear;transition-delay: 2s;/* Safari */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;}
CSS3 動畫
要創建CSS3動畫，你需要了解@keyframes規則。@keyframes規則是創建動畫。 @keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。
實例
當動畫為 25% 及 50% 時改變背景色，然后當動畫 100% 完成時再次改變：
@keyframes myfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}
下面的表格列出了 @keyframes 規則和所有動畫屬性：
| 屬性 | 描述 | CSS |
|---|---|---|
| @keyframes | 規定動畫。 | 3 |
| animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | 3 |
| animation-name | 規定 @keyframes 動畫的名稱。 | 3 |
| animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 | 3 |
| animation-timing-function | 規定動畫的速度曲線。默認是 "ease"。 | 3 |
| animation-delay | 規定動畫何時開始。默認是 0。 | 3 |
| animation-iteration-count | 規定動畫被播放的次數。默認是 1。 | 3 |
| animation-direction | 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 | 3 |
| animation-play-state | 規定動畫是否正在運行或暫停。默認是 "running"。 | 3 |
div{animation-name: myfirst;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-play-state: running;/* Safari and Chrome: */-webkit-animation-name: myfirst;-webkit-animation-duration: 5s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;}
CSS3 多列
下表列出了所有 CSS3 的多列屬性：
| 屬性 | 描述 |
|---|---|
| column-count | 指定元素應該被分割的列數。 |
| column-fill | 指定如何填充列 |
| column-gap | 指定列與列之間的間隙 |
| column-rule | 所有 column-rule-* 屬性的簡寫 |
| column-rule-color | 指定兩列間邊框的顏色 |
| column-rule-style | 指定兩列間邊框的樣式 |
| column-rule-width | 指定兩列間邊框的厚度 |
| column-span | 指定元素要跨越多少列 |
| column-width | 指定列的寬度 |
| columns | 設置 column-width 和 column-count 的簡寫 |
CSS3 盒模型
在 CSS3 中, 增加了一些新的用戶界面特性來調整元素尺寸，框尺寸和外邊框，主要包括以下用戶界面屬性：
- resize：none | both | horizontal | vertical | inherit
- box-sizing: content-box | border-box | inherit
- outline:outline-color outline-style outline-width outine-offset
resize屬性指定一個元素是否應該由用戶去調整大小。
box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。
outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪制輪廓。
CSS3伸縮布局盒模型(彈性盒)
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
下表列出了在彈性盒子中常用到的屬性:
| 屬性 | 描述 |
|---|---|
| display | 指定 HTML 元素盒子類型。 |
| flex-direction | 指定了彈性容器中子元素的排列方式 |
| justify-content | 設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。 |
| align-items | 設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。 |
| flex-wrap | 設置彈性盒子的子元素超出父容器時是否換行。 |
| align-content | 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設置子元素對齊，而是設置行對齊 |
| flex-flow | flex-direction 和 flex-wrap 的簡寫 |
| order | 設置彈性盒子的子元素排列順序。 |
| align-self | 在彈性子元素上使用。覆蓋容器的 align-items 屬性。 |
| flex | 設置彈性盒子的子元素如何分配空間。 |
CSS3 多媒體查詢
從 CSS 版本 2 開始，就可以通過媒體類型在 CSS 中獲得媒體支持。如果您曾經使用過打印樣式表，那么您可能已經使用過媒體類型。清單 1 展示了一個示例。
清單 1. 使用媒體類型
<link rel="stylesheet" type="text/css" href="site.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />
@media all and (min-width: 800px) { ... }
@media all是媒體類型，也就是說，將此 CSS 應用於所有媒體類型。
(min-width:800px)是包含媒體查詢的表達式，如果瀏覽器的最小寬度為 800 像素，則會告訴瀏覽器只運用下列 CSS。
清單 3. and 條件
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }
or 關鍵詞
@media (min-width:800px) or (orientation:portrait) { ... }
not
@media (not min-width:800px) { ... }