CSS3選擇器有哪些？
屬性選擇器、偽類選擇器、偽元素選擇器。
CSS3新特性有哪些？
- 顏色：新增RGBA，HSLA模式
- 文本效果
text-align-last 設(shè)置如何對齊最后一行或緊挨著強(qiáng)制換行符之前的行。
text-emphasis 向元素的文本應(yīng)用重點標(biāo)記以及重點標(biāo)記的前景色。
text-justify 規(guī)定當(dāng) text-align 設(shè)置為 “justify” 時所使用的對齊方法。
text-outline 規(guī)定文本的輪廓。
text-overflow 規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情。
text-shadow 向文本添加陰影。
text-wrap 規(guī)定文本的換行規(guī)則。
word-wrap 允許對長的不可分割的單詞進(jìn)行分割并換行到下一行。
- 邊框：
圓角：border-radius
邊框陰影： box-shadow
將圖片規(guī)定為包圍 div 元素的邊框：border-image
- 盒子模型：box-sizing
- 背景：
background-size 設(shè)置背景圖片的尺寸
background-origin 設(shè)置背景圖片的原點
background-clip 設(shè)置背景圖片的裁切區(qū)域，以”，”分隔可以設(shè)置多背景，用于自適應(yīng)布局
- 漸變：linear-gradient、radial-gradient
- 過渡：transition，可實現(xiàn)動畫
- 在CSS3中唯一引入的偽元素是 ：selection.
- 媒體查詢，多欄布局
- border-image
- 2D轉(zhuǎn)換
matrix(n,n,n,n,n,n) 定義 2D 轉(zhuǎn)換，使用六個值的矩陣。
translate(x,y) 定義 2D 轉(zhuǎn)換，沿著 X 和 Y 軸移動元素。
translateX(n) 定義 2D 轉(zhuǎn)換，沿著 X 軸移動元素。
translateY(n) 定義 2D 轉(zhuǎn)換，沿著 Y 軸移動元素。
scale(x,y) 定義 2D 縮放轉(zhuǎn)換，改變元素的寬度和高度。
scaleX(n) 定義 2D 縮放轉(zhuǎn)換，改變元素的寬度。
scaleY(n) 定義 2D 縮放轉(zhuǎn)換，改變元素的高度。
rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
skew(x-angle,y-angle) 定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸。
skewX(angle) 定義 2D 傾斜轉(zhuǎn)換，沿著 X 軸。
skewY(angle) 定義 2D 傾斜轉(zhuǎn)換，沿著 Y 軸。
- 3D轉(zhuǎn)換
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉(zhuǎn)換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z) 定義 3D 轉(zhuǎn)化。
translateX(x) 定義 3D 轉(zhuǎn)化，僅使用用于 X 軸的值。
translateY(y) 定義 3D 轉(zhuǎn)化，僅使用用于 Y 軸的值。
translateZ(z) 定義 3D 轉(zhuǎn)化，僅使用用于 Z 軸的值。
scale3d(x,y,z) 定義 3D 縮放轉(zhuǎn)換。
scaleX(x) 定義 3D 縮放轉(zhuǎn)換，通過給定一個 X 軸的值。
scaleY(y) 定義 3D 縮放轉(zhuǎn)換，通過給定一個 Y 軸的值。
scaleZ(z) 定義 3D 縮放轉(zhuǎn)換，通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)。
rotateX(angle) 定義沿 X 軸的 3D 旋轉(zhuǎn)。
rotateY(angle) 定義沿 Y 軸的 3D 旋轉(zhuǎn)。
rotateZ(angle) 定義沿 Z 軸的 3D 旋轉(zhuǎn)。
perspective(n) 定義 3D 轉(zhuǎn)換元素的透視視圖。
- 自定義動畫
CSS3新增偽類有那些？
- p:first-of-type 指定父元素的第一個p元素
- p:last-of-type 指定父元素的最后一個p元素
- p:only-of-type 指定屬于父元素的特定類型的唯一子元素的每個 p 元素
- p:only-child 規(guī)定屬于其父元素的唯一子元素的每個 p 元素
- p:nth-child(2) 規(guī)定屬于其父元素的第二個子元素的每個 p
- :enabled :disabled 控制表單控件的禁用狀態(tài)
- :checked 控制單選框或復(fù)選框被選中狀態(tài)
HTML5新特性
- 拖拽釋放(Drag and drop) API
- 語義化更好的內(nèi)容標(biāo)簽
- 結(jié)構(gòu)標(biāo)簽： header、nav、footer、aside、article、section
- 新增標(biāo)簽： datalist（定義選項列表）、details（定義文檔細(xì)節(jié)，通常與summary使用）、menu（定義列表/菜單）、address、progress（進(jìn)度條，有兩個值：value、max）、mark（標(biāo)記）、time（時間）
- 新增表單元素type： email、url、tel、number（min、max、step）、range（進(jìn)度條）、color（顏色面板）、search、calendar、date、time、email
- 屬性： form、autocomplete、autofocus、method、action、multiple、pattern、placeholder、required、contenteditable、hidden、tableindex
- 音頻、視頻API(audio,video)
- 畫布(Canvas) API
- 地理(Geolocation) API
- 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
- sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
- 新的技術(shù)webworker, websocket, Geolocation支持HTML5新標(biāo)簽：
處理html5新標(biāo)簽與瀏覽器兼容性問題：
（1）、使用document創(chuàng)建標(biāo)簽
（2）、a）使用html5shim：在<head>中調(diào)用以下代碼：
1.<!--[if lt IE 9]>
2.<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
3.<![endif]-->
b）使用kill IE6: 在</body>之前調(diào)用以下代碼：
1.<!--[if lte IE 6]>
2.<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
3.<![endif]-->
