div>p: 子代
div+p： div后面相鄰的第一個p
div~p: div后面所有的兄弟p
1、屬性選擇器：
id選擇器 # 通過id 來選擇
類名選擇器 . 通過類名來選擇
屬性選擇器 [] 通過標簽屬性來選擇器
語法：
標志性符號：[]
^: 開頭 $:結(jié)尾 *：包含
E[title] : 選中頁面的E元素，并且E需要帶有title屬性
E[title="abc"] :選中頁面的E元素，并且E需要帶有title屬性,屬性值為abc
E[title^="abc"] :選中頁面的E元素，并且E需要帶有title屬性,屬性值以abc開頭
E[title$="abc"] :選中頁面的E元素，并且E需要帶有title屬性,屬性值以abc結(jié)尾
E[title*="abc"] :選中頁面的E元素，并且E需要帶有title屬性,屬性值包含abc
結(jié)構(gòu)偽類選擇器：
E：first-child 選中父元素中的第一個子元素
E：last-child 選中父元素中的最后一個子元素
E：nth-child(1) 選中父元素中的第5個子元素
n: 0,1,2,3,4。。。
偶數(shù)： 2n even
奇數(shù)：2n-1 odd
前5個： -n+5
E：nth-last-child(3): 從后向前選擇， 選中倒數(shù)第3個
div:nth-child(9)
注意：所選到的元素的類型 必須是指定的類型E,否則選擇無效；
E：empty 表示元素為空的狀態(tài)
E:target: 表示元素被激活的狀態(tài) 要配合錨點使用
偽元素：
通過css模擬出html效果
E::before
E::after 必須有content 屬性
偽元素選擇器：
E::first-letter 選中第一個字母
E::first-line選中第一行
E::selection: 表示選擇的區(qū)域 通過設(shè)置 color background
CSS3中新增了兩種顏色模式：
RGBA: red green blue (0-255) alpha: 透明度 （0-1）
HSLA:
H:色調(diào) 0-360
S:飽和度 0%-100%
L:亮度 0%-100%
A：alpha 透明度 0-1
盒子模型：
三個盒子： content-box padding-box border-box
box-sizing: border-box(內(nèi)減模式)border-box(內(nèi)減模式) /content-box（外加模式）(默認值)
box-sizing: border-box 盒模型
私有化前綴：
瀏覽器私有化前綴：
-webkit-: 谷歌 蘋果
-moz-:火狐
-ms-：ie
-o-：歐朋
CSS3簡介
如同人類的的進化一樣，CSS3是CSS2的“進化”版本，在CSS2基礎(chǔ)上，增強或新增了許多特性， 彌補了CSS2的眾多不足之處，使得Web開發(fā)變得更為高效和便捷。
CSS3的現(xiàn)狀
1、瀏覽器支持程度差，需要添加私有前綴
2、移動端支持優(yōu)于PC端
3、不斷改進中
4、應(yīng)用相對廣泛
-webkit-border-radius radius 半徑
如何對待
1、堅持漸進增強原則
2、考慮用戶群體
3、遵照產(chǎn)品的方案
4、聽Boss的
準備工作
統(tǒng)一環(huán)境
由于CSS3兼容性問題的普遍存在，為了避免因兼容性帶來的干擾，我們約定統(tǒng)一的環(huán)境，以保證學習的效率，在最后會單獨說明兼容性的問題。
1、Chrome瀏覽器 version 46+
2、Firefox瀏覽器 firefox 42+
如何使用手冊
學會使用工具，可以讓我們事半功倍。
[] 表示全部可選項 padding
|| 表示或者
| 表示多選一
？ 表示0個或者1個
表示0個或者多個
{} 表示范圍
學會查看手冊，培養(yǎng)自主學習能力。
基礎(chǔ)知識
選擇器
CSS3新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精準度。CSS3選擇器與jQuery中所提供的絕大部分選擇器兼容。
屬性選擇器
其特點是通過屬性來選擇元素，具體有以下5種形式：
E[attr] 表示存在attr屬性即可；
div[class]
2、E[attr=val] 表示屬性值完全等于val；
div[class=mydemo]
3、E[attr=val] 表示的屬性值里包含val字符并且在“任意”位置；
div[class=mydemo]
4、E[attr^=val] 表示的屬性值里包含val字符并且在“開始”位置；
div[class^=mydemo]
5、E[attr$=val] 表示的屬性值里包含val字符并且在“結(jié)束”位置；
div[class$=demos]
案例 配合jQuery 的過濾選擇器
偽類選擇器
除了以前學過的:link、:active、:visited、:hover，CSS3又新增了其它的偽類選擇器。
1、以某元素相對于其父元素或兄弟元素的位置來獲取無素的結(jié)構(gòu)偽類。
重點理解通過E來確定元素的父元素。
E:first-child第一個子元素
E:last-child最后一個子元素
E:nth-child(n) 第n個子元素，計算方法是E元素的全部兄弟元素；
div>ul>li:nth-child(3){ color: deeppink;
}
第三個元素
E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒著計算；
div>ul>li:last-child(2){ color: deeppink;
}
n遵循線性變化，其取值0、1、2、3、4、... 但是當n<=0時，選取無效。
選中所有的奇數(shù)的li li:nth-child(2n-1){ color: red; } 選中所有的7 的倍數(shù)的li
li:nth-child(7n){ color: red; } 選中前面五個 li:nth-child(-1n+5){ color: red; } 選中后面五個 li:nth-last-child(-1n+5){
color: red; } 所有的偶數(shù) li:nth-child(even){ color:red } 所有的奇數(shù) li:nth-child(odd){ color:blue; }
n可是多種形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等；
E:empty 選中沒有任何子節(jié)點的E元素；（使用不是非常廣泛）
沒有任何的子元素，包括空格.
案例：日歷圖.
2、目標偽類
E:target 結(jié)合錨點進行使用，處于當前錨點的元素會被選中；
<li><a href="#title1">CSS (層疊樣式表)</a></li>
<h2 id="title1">CSS (層疊樣式表)</h2>
h2:target{
color:red;
}
圖片切換
偽元素選擇器
重點：E::before、E::after
是一個行內(nèi)元素，需要轉(zhuǎn)換成塊元素
E:after、E:before 在舊版本里是偽類，在新版本里是偽元素，新版本下E:after、E:before會被自動識別為E::after、E::before，按偽元素來對待，這樣做的目的是用來做兼容處理。
E:after、E:before后面的練習中會反復用到，目前只需要有個大致了解
E::first-letter文本的第一個字母或字（如中文、日文、韓文等）；
案例：首字下沉
E::first-line 文本第一行； 文本第一行高亮..
E::selection 可改變選中文本的樣式；
":" 與 "::" 區(qū)別在于區(qū)分偽類和偽元素
關(guān)于before和after CSS2中 E:before或者E:after，是屬于偽類的，并且沒有偽元素的概念 CSS3中 提出偽元素的概念 E::before和E::after，并且歸屬到了偽元素當中，偽類里就不再存在E:before或者 E:after偽類;
顏色
一種新的顏色的表示方式
rgba(255,0,0,0.1)
RGBA是代表Red（紅色） Green（綠色） Blue（藍色）和 Alpha的色彩空間。雖然它有的時候被描述為一個顏色空間
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以設(shè)置顏色值的透明度，相較opacity，它們不具有繼承性，即不會影響子元素的透明度。
Red、Green、Blue、Alpha即RGBA
Hue、Saturation、Lightness、Alpha即HSLA
R、G、B 取值范圍0~255
H 色調(diào) 取值范圍0~360，0/360表示紅色、120表示綠色、240表示藍色
S 飽和度 取值范圍0%~100%
L 亮度 取值范圍0%~100%
A 透明度 取值范圍0~1
關(guān)于透明度：
1、opacity只能針對整個盒子設(shè)置透明度，子盒子及內(nèi)容會繼承父盒子的透明度；
2 、transparent 不可調(diào)節(jié)透明度，始終完全透明
RGBA、HSLA可應(yīng)用于所有使用顏色的地方。
案例： 1: opacity 設(shè)置透明度，只能針對整個盒子設(shè)置透明度. 2: 子盒子會繼承父盒子的透明度. .out{ width: 200px; height: 200px; background: green; border: 1px solid darkgreen; margin: 40px auto; opacity: 0.3; } 子盒子也出現(xiàn)透明 .out .inner{ width: 100px; height: 100px; background-color: yellow; }
2:background-color: transparent; 完全透明，不可調(diào)節(jié)透明度.
3:使用rgba 來控制顏色，相對opacity ，不具有繼承性.
文本 (shadow陰影)
text-shadow，可分別設(shè)置偏移量、模糊度、顏色（可設(shè)透明度）。
1、水平偏移量 正值向右 負值向左；
2、垂直偏移量 正值向下 負值向上；
3、模糊度是不能為負值；
代碼演示：
/* 3px 水平偏移量. 正值向右 負值向左/ / 5px 水垂直偏移量. 正值向下 負值向上/ / 5px 模糊度 模糊度不能為負值 值越大越模糊/ / #ccc 設(shè)置對象陰影的顏色. 可以有多個影子. ul>li{ margin: 20px; font-size: 24px; } ul>li:nth-child(1){ text-shadow: 5px 5px 2px #ccc; } ul>li:nth-child(2){ text-shadow: -5px -5px 2px #ccc; } ul>li:nth-child(3){ text-shadow: 5px 5px 2px #ccc, -5px -5px 2px #ccc; }
案例1：浮雕文字.
/設(shè)置背景色./ body { background-color: gray; font: bold 6em "microsoft yahei"; } div { margin: 30px; color: #808080; text-align: center; } /*設(shè)置水平向左1px 向上1 px 向右1px 向下1px */ .to{ text-shadow: -1px -1px 1px #000,1px 1px 1px #fff; } .ao{ text-shadow: -1px -1px 1px #000,1px 1px 1px #fff; }
盒模型
CSS3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發(fā)生了改變。
box-sizing 有兩個值:content-box border-box
可以分成兩種情況：
content-box:對象的實際寬度等于設(shè)置的width值和border、padding之和
border-box： 對象的實際寬度就等于設(shè)置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width )
我們把這種方式叫做盒模型
兼容性比較好
1、邊框
邊框圓角：
border-radius:30px;
border-radius:30px 40px 50px 60px;
賦值規(guī)律： 從左上開始，順時針賦值，如果這個角沒有值 ，去對角；
border-radius: 40px/60px;
邊框陰影：
box-shadow: 水平位移 垂直位移 模糊程度 陰影大小 陰影顏色 外/內(nèi)陰影(inset)
邊框圖片：
border-image-source: 圖片路徑
border-image-slice: 裁剪
border-image-width: 邊框?qū)挾? border-image-repeat: 邊框圖片的平鋪
repeat: 圖片顯示不完整
round: 圖片平鋪 優(yōu)化了，圖片會完整顯示
stretch: 拉伸
2、背景：
背景可以改變大小，可以有多個背景
background-size: 30px 30px;
background-size: 30% 30%;
background-size: cover; 覆蓋
background-size: contain; 包含
可以有多個背景:
多個背景按照正常的語法格式書寫，每個背景使用逗號隔開
背景原點：
background-origin:
content-box
padding-box
border-box
背景裁剪
background-clip:
content-box
padding-box
border-box
3、漸變
線性漸變：
background-image: linear-gradient(方向，起始顏色，終止顏色);
方向：to left right bottom top 35deg
徑向漸變：
CSS3
目錄
目錄 2
邊框 2
邊框圓角 2
邊框陰影 4
邊框圖片 4
1.1.4案例 用css 實現(xiàn) 7
漸變 8
線性漸變 （gradient 變化） 8
徑向漸變 (radial 徑向) 10
背景 11
過渡(transition) 13
2D轉(zhuǎn)換 17
邊框
其中邊框圓角、邊框陰影屬性，應(yīng)用十分廣泛，兼容性也相對較好，具有符合漸進增強原則的特征，我們需要重點掌握。
邊框圓角
border-radius 每個角可以設(shè)置兩個值 ，x 值，y值
1: 邊框圓角處理
2: 正方形
3：橢圓
圓角處理時，腦中要形成圓、圓心、橫軸、縱軸的概念，正圓是橢圓的一種特殊情況。如下圖
可分別設(shè)置長、短半徑，以“/”進行分隔，遵循“1，2，3，4”規(guī)則，“/”前面的1~4個用來設(shè)置橫軸半徑（分別對應(yīng)橫軸1、2、3、4位置 ），“/”后面1~4個參數(shù)用來設(shè)置縱軸半徑（分別對應(yīng)縱軸1、2、3、4位置 ）
邊框陰影
box-shadow 與 text/shadow 用法差不多
1、水平偏移量 正值向右 負值向左；
2、垂直偏移量 正值向下 負值向上；
box-shadow: 5px 5px 27px red, -5px -5px 27px green;
3、模糊度是不能為負值；
4、inset可以設(shè)置內(nèi)陰影；
設(shè)置邊框陰影不會改變盒子的大小，即不會影響其兄弟元素的布局。
可以設(shè)置多重邊框陰影，實現(xiàn)更好的效果，增強立體感。
邊框圖片
border-image: url("images/border.png") 27/20px round
border-image 設(shè)置邊框的背景圖片.
border-image-source:url(“”) 設(shè)置邊框圖片的地址.
//裁剪圖片，如何去裁切圖片，瀏覽器會自動去裁剪圖片.
border-image-slice:27,27,27,27
//指定邊框的寬度.
border-image-width:20px;
//邊框平鋪的樣式 stretch 拉升
round 會自動調(diào)整縮放比例
repeat(重復)
border-image-repeat: stretch;
設(shè)置的圖片將會被“切割”成九宮格形式，然后進行設(shè)置。如下圖
“切割”完成后生成虛擬的9塊圖形，然后按對應(yīng)位置設(shè)置背景，
其中四個角位置、形狀保持不變，中心位置水平垂直兩個方向平鋪。如下圖
1、round和repeat之間的區(qū)別
round 會自動調(diào)整尺寸，完整顯示邊框圖片。
repeat 單純平鋪多余部分，會被“裁切”而不能完整顯示。
2、更改裁切尺寸
background-slice: 34 36 27 27 分別設(shè)置裁切如下圖
關(guān)于邊框圖片重點理解9宮格的裁切及平鋪方式，實際開發(fā)中應(yīng)用不廣泛，但是如能靈活動用會給我們帶來不少便利。
1.1.4案例 用css 實現(xiàn)
代碼實現(xiàn):
漸變
漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現(xiàn)許多炫麗的效果，有效的減少圖片的使用數(shù)量，并且具有很強的適應(yīng)性和可擴展性。
可分為線性漸變、徑向漸變
線性漸變 （gradient 變化）
linear-gradient線性漸變指沿著某條直線朝一個方向產(chǎn)生漸變效果。
上圖是從黃色漸變到綠色
Background:linear-gradient(
To right 表示方向 (left,top,right,left ,也可以使用度數(shù))
Yellow, 漸變起始顏色
Green 漸變終止顏色
)
background:linear-gradient( to right, red 0%, red 25% , blue 25%,blue 50%, green 50%,green 75%, pink 75% ,pink 100% ); //起止顏色，終止顏色.
background: linear-gradient( 135deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75% );
background-size: 100px 100px;
animation: move 1s linear infinite;
@keyframes move { from {} to { background-position: 100px 0; } }
1、必要的元素：
a、方向
b、起始顏色
c、終止色；
2、關(guān)于方向如下圖
徑向漸變 (radial 徑向)
radial-gradient徑向漸變指從一個中心點開始沿著四周產(chǎn)生漸變效果
background: radial-gradient( 150px at center, yellow, green );
圍繞中心點做漸變，半徑是150px，從黃顏色到綠顏色做漸變.
1、必要的元素：
a、輻射范圍即圓半徑 (半徑越大，漸變效果越大)
b、中心點 即圓的中心 (中心點的位置是以盒子自身)
background: radial-gradient( 150px at left center, yellow, green );
以左上角為圓的中心點
background: radial-gradient( 150px at 0px 0px, yellow, green );
c、漸變起始色
d、漸變終止色
2、關(guān)于中心點：中心位置參照的是盒子的左上角
3、關(guān)于輻射范圍：其半徑可以不等，即可以是橢圓
div{ width: 300px; height: 300px; margin:100px auto; background: radial-gradient( 250px at 0px 0px, yellow, green ); border-radius: 150px; }
背景
背景在CSS3中也得到很大程度的增強，比如背景圖片尺寸、背景裁切區(qū)域、背景定位參照點、多重背景等。
background-size:width,height 可以設(shè)置背景圖片的寬度以及高度
background-size設(shè)置背景圖片的尺寸
background-size:600px,auto;
自動是適應(yīng)盒子的寬度 background-size: 100% auto; 當寬度發(fā)送改變時，高度會有內(nèi)容溢出。
常規(guī)用法，通過百分百，和像素來調(diào)整背景的尺寸.
background-size: auto 100%;
cover會自動調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域，如有溢出部分則會被隱藏。
整個背景圖片完整顯示在背景區(qū)域.
contain會自動調(diào)整縮放比例，保證圖片始終完整顯示在背景區(qū)域。
也可以使用長度單位或百分比
案例:全屏背景自動適應(yīng).
background-origin(原點，起點)設(shè)置背景定位的原點
所謂的背景原點就是調(diào)整背景位置的一個參照點.
調(diào)整背景圖片定位的參照原點.
border-box以邊框做為參考原點；
padding-box以內(nèi)邊距做為參考原點；
content-box以內(nèi)容區(qū)做為參考點；
3、background-clip設(shè)置背景區(qū)域clip(裁切)
border-box裁切邊框以內(nèi)為背景區(qū)域；
padding-box裁切內(nèi)邊距以內(nèi)為背景區(qū)域；
content-box裁切內(nèi)容區(qū)做為背景區(qū)域；
4、以逗號分隔可以設(shè)置多背景，可用于自適應(yīng)局
背景圖片尺寸在實際開發(fā)中應(yīng)用十分廣泛。
過渡(transition)
Transition:param1 param2
param1 要過渡的屬性
param2 過渡的時間.
過渡是CSS3中具有顛覆性的特征之一，可以實現(xiàn)元素不同狀態(tài)間的平滑過渡（補間動畫），經(jīng)常用來制作動畫效果。
補間動畫：自動完成從起始狀態(tài)到終止狀態(tài)的的過渡。不用管中間的狀態(tài)
幀動畫：撲克牌切換.通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片
關(guān)于補間動畫更多學習可查看http://mux.alimama.com/posts/1009
特點：當前元素只要有“屬性”發(fā)生變化時，可以平滑的進行過渡。
transition-property設(shè)置過渡屬性
transition-duration設(shè)置過渡時間 用來控制速度linear(勻速)
ease-in (加速)
transition-timing-function設(shè)置過渡速度
transition-delay設(shè)置過渡延時 超過時間后執(zhí)行動畫.
以上四屬性重在理解
案例：氣泡
案例2：手風琴效果
2D轉(zhuǎn)換
轉(zhuǎn)換是CSS3中具有顛覆性的特征之一，可以實現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放，甚至支持矩陣方式，配合即將學習的過渡和動畫知識，可以取代大量之前只能靠Flash才可以實現(xiàn)的效果。在css3 當中，通過transform(變形) 來實現(xiàn)2d 或者3d 轉(zhuǎn)換,其中2d 有，縮放，移動，旋轉(zhuǎn)。
縮放 scale(x, y) 可以對元素進行水平和垂直方向的縮放，x、y的取值可為小數(shù)，不可為負值；
移動 translate(x, y) 可以改變元素的位置，x、y可為負值；
x 在水平方向移動。
y 在垂直方向移動。
旋轉(zhuǎn) rotate(deg) 可以對元素進行旋轉(zhuǎn)，正值為順時針，負值為逆時針；
案例1，火箭移動
案例2 盾牌，將位置還原
案例3 旋轉(zhuǎn) 原點
transform-origin:left top;
1、 3d變換
rotateX(30deg) 繞著x旋轉(zhuǎn)30deg
rotateY(30deg) 繞著y旋轉(zhuǎn)30deg
rotateZ(30deg) 繞著z旋轉(zhuǎn)30deg
translateX(30px) 沿著x軸移動30px
translatey(30px) 沿著y軸移動30px
translatez(30px) 沿著Z軸移動30px( 必須給父盒子加透視)
2、透視：
加給變換元素的父盒子， 設(shè)置的是用戶眼睛和屏幕的距離；
只是視覺上的呈現(xiàn)，不是正真的3d
perspective:1000px;
3、transform-style:preserve-3d;
加給變換元素的父盒子，讓子盒子存在三維空間中，保持3d效果
flat:默認值 （讓子盒子被扁平化）
4、 backface-visibility:hidden; 背面不可見
skew(30deg,30deg); 2d變換 -傾斜
css3中獲取自定義屬性的值：content:attr(data-text);
5、動畫：
定義：
@keyframes 動畫名{
0%{
}
100%{
}
或者
from{}
to{}
}
動畫調(diào)用：
animation: 動畫名稱 動畫時間 執(zhí)行次數(shù) 運動曲線 延遲執(zhí)行 結(jié)束后狀態(tài) 是否反向；
inifnite: 無限次
alternate: 反向執(zhí)行
forwards: 保持結(jié)束后的狀態(tài)
backwards: 保持動起開始前的狀態(tài)
steps(5): 讓動畫分步執(zhí)行；
動畫詳細屬性：
animation-name:動畫名稱
animation-duration:持續(xù)時間
animation-iteration-count:執(zhí)行次數(shù)
animation-timing-function:運動曲線
animation-fill-mode:結(jié)束狀態(tài)
animation-direction: 動畫方向
animation-delay: 延遲時間
多列：（了解）
-webkit-column-count:列數(shù)
-webkit-column-rule:分割線樣式
-webkit-column-width:列寬
-webkit-column-gap:列間距
-webkit-column-span:跨列 all 跨所有列
CSS3簡介
如同人類的的進化一樣，CSS3是CSS2的“進化”版本，在CSS2基礎(chǔ)上，增強或新增了許多特性， 彌補了CSS2的眾多不足之處，使得Web開發(fā)變得更為高效和便捷。
CSS3的現(xiàn)狀
1、瀏覽器支持程度差，需要添加私有前綴
2、移動端支持優(yōu)于PC端
3、不斷改進中
4、應(yīng)用相對廣泛
如何對待
1、堅持漸進增強原則
2、考慮用戶群體
3、遵照產(chǎn)品的方案
4、聽Boss的
準備工作
統(tǒng)一環(huán)境
由于CSS3兼容性問題的普遍存在，為了避免因兼容性帶來的干擾，我們約定統(tǒng)一的環(huán)境，以保證學習的效率，在最后會單獨說明兼容性的問題。
1、Chrome瀏覽器 version 46+
2、Firefox瀏覽器 firefox 42+
3、PhotoShop CS6（建議）
如何使用手冊
學會使用工具，可以讓我們事半功倍。
學會查看手冊，培養(yǎng)自主學習能力。
基礎(chǔ)知識
選擇器
CSS3新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精準度。CSS3選擇器與jQuery中所提供的絕大部分選擇器兼容。
屬性
其特點是通過屬性來選擇元素，具體有以下5種形式：
見代碼示例01 選擇器-屬性.html
偽類
除了以前學過的:link、:active、:visited、:hover，CSS3又新增了其它的偽類選擇器。
1、結(jié)構(gòu)(位置)偽類
以某元素（E）相對于其父元素或兄弟元素的位置來獲取無素；
n遵循線性變化，其取值0、1、2、3、4、...
n可是多種形式：nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等；
注：指E元素的父元素，并對應(yīng)位置的子元素必須是E
見代碼示例02 選擇器-偽類.html
2、空偽類
E:empty 選中沒有任何子節(jié)點的E元素；（使用不是非常廣泛）
見代碼示例03 選擇器-偽類empty.html
3、目標偽類
E:target 結(jié)合錨點進行使用，處于當前錨點的元素會被選中；
見代碼示例04 選擇器-偽類target.html
4、排除偽類
E:not(selector) 除selector（任意選擇器）外的元素會被選中；
見代碼示例05 選擇器-偽類not.html
偽元素
1、E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
見代碼示例07 選擇器-偽元素first-letter.html
2、E::first-line 文本第一行；
見代碼示例07 選擇器-偽元素first-line.html
3、E::selection 可改變選中文本的樣式；
見代碼示例08 選擇器-偽元素selection.html
4、E::before和E::after
在E元素內(nèi)部的開始位置和結(jié)束位創(chuàng)建一個元素，該元素為行內(nèi)元素，且必須要結(jié)合content屬性使用。
見代碼示例09 選擇器-偽元素before&after.html
E:after、E:before 在舊版本里是偽元素，CSS3的規(guī)范里“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做兼容處理。
E:after、E:before后面的練習中會反復用到，目前只需要有個大致了解
":" 與 "::" 區(qū)別在于區(qū)分偽類和偽元素
顏色
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以設(shè)置顏色值的透明度，相較opacity，它們不具有繼承性，即不會影響子元素的透明度。
如下圖所示為顏色表示方法：
Red、Green、Blue、Alpha即RGBA
Hue、Saturation、Lightness、Alpha即HSLA
不同的顏色表示方法其取值也不相同，具體如下：
R、G、B 取值范圍0~255
見代碼示例01 顏色-透明rgba.html
H 色調(diào) 取值范圍0~360，0/360表示紅色、120表示綠色、240表示藍色
S 飽和度 取值范圍0%~100%
L 亮度 取值范圍0%~100%
A 透明度 取值范圍0~1
見代碼示例02 顏色-透明hsla.html
RGBA、HSLA可應(yīng)用于所有使用顏色的地方。
見代碼示
關(guān)于CSS透明度：
1、opacity只能針對整個盒子設(shè)置透明度，子盒子及內(nèi)容會繼承父盒子的透明度；
2 、transparent 不可調(diào)節(jié)透明度，始終完全透明
文本
text-shadow，可分別設(shè)置偏移量、模糊度、顏色（可設(shè)透明度）。
如：text-shadow: 2px 2px 2px #CCC;
1、水平偏移量 正值向右 負值向左；
2、垂直偏移量 正值向下 負值向上；
3、模糊度是不能為負值；
見代碼示例01 文本-陰影text-shadow.html
盒模型
CSS3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發(fā)生了改變。
可以分成兩種情況：
1、box-sizing: border-box 盒子大小為 width
2、box-sizing: content-box 盒子大小為 width + padding + border
注：上面的標注的width指的是CSS屬性里設(shè)置的width: length，content的值是會自動調(diào)整的。
見代碼示例01 盒模型.html
邊框
其中邊框圓角、邊框陰影屬性，應(yīng)用十分廣泛，兼容性也相對較好，具有符合漸進增強原則的特征，我們需要重點掌握。
邊框圓角
border-radius
圓角處理時，腦中要形成圓、圓心、橫軸、縱軸的概念，正圓是橢圓的一種特殊情況。如下圖
為了方便表述，我們將四個角標記成1、2、3、4，如2代表右上角，CSS里提供了border-radius來設(shè)置這些角橫縱軸半徑值。
見代碼示例01 邊框-圓角border-radius.html
分別設(shè)置橫縱軸半徑，以“/”進行分隔，遵循“1，2，3，4”規(guī)則，“/”前面的1~4個用來設(shè)置橫軸半徑（分別對應(yīng)橫軸1、2、3、4位置 ），“/”后面1~4個參數(shù)用來設(shè)置縱軸半徑（分別對應(yīng)縱軸1、2、3、4位置 ）。
支持簡寫模式，具體如下：
1、border-radius: 10px; 表示四個角的橫縱軸半徑都為10px；
2、border-radius: 10px 5px; 表示1和3角橫縱軸半徑都為10px，2和4角橫縱軸半徑為5px；
3、border-radius: 10px 5px 8px; 表示1角?？v軸半徑都為10px，2和4角橫縱軸半徑都為8px，3角的橫縱軸半徑都為8px；
4、border-radius: 10px 8px 6px 4px; 表示1角橫縱軸半徑都為10px，表示2角橫縱軸半徑都為8px，表示3角橫縱軸半徑都為6px，表示4角橫縱軸半徑都為6px；
見代碼示例02 邊框-圓角-詳解border-radius.html
邊框陰影
box-shadow
與文字陰影類似，可分別設(shè)置盒子陰影偏移量、模糊度、顏色（可設(shè)透明度）。
如box-shadow: 5px 5px 5px #CCC
1、水平偏移量 正值向右 負值向左；
2、垂直偏移量 正值向下 負值向上；
3、模糊度是不能為負值；
4、inset可以設(shè)置內(nèi)陰影；
注：設(shè)置邊框陰影不會改變盒子的大小，即不會影響其兄弟元素的布局?？梢栽O(shè)置多重邊框陰影，實現(xiàn)更好的效果，增強立體感，符合漸進增強，實際開發(fā)中可以大膽使用。
見代碼示例04 邊框-陰影box-shadow.html
邊框圖片
border-image
設(shè)置的圖片將會被“切割”成九宮格形式，然后進行設(shè)置。如下圖
最少“4刀”便可以將一個圖片切成9部分，“切割”完成后生成虛擬的9塊圖形，如下圖
這時我們將一個盒子想象是由9部分組成的，分別是左上角、上邊框、右上角、右邊框、右下角、下邊框、左下角、左邊框、中間，那么瀏覽器會將切割好的9張?zhí)摂M圖片分別對應(yīng)到盒子的各個部分上。
其中四個角位置、形狀保持不變，中心位置水平垂直兩個方向平鋪或拉伸，如下圖
參數(shù)詳解
1、border-image-source
指定圖片路徑
2、border-image-repeat
指定裁切好的虛擬圖片的平鋪方式
a) round會自動調(diào)整尺寸，完整顯示邊框圖片
b) repeat 單純平鋪,多余部分，會被“裁切”而不能完整顯示。
3、border-image-slice
4、border-image-width
設(shè)置邊框背景區(qū)域的大小，這個值的大小不會影響到盒子的大小。
見代碼示例06 邊框-圖片border-image.html
關(guān)于邊框圖片重點理解9宮格的裁切及平鋪方式，實際開發(fā)中應(yīng)用不廣泛，但是如能靈活動用會給我們帶來不少便利。
背景
背景在CSS3中也得到很大程度的增強，比如背景圖片尺寸、背景裁切區(qū)域、背景定位參照點、多重背景等。
background-size
通過background-size設(shè)置背景圖片的尺寸，就像我們設(shè)置img的尺寸一樣，在移動Web開發(fā)中做屏幕適配應(yīng)用非常廣泛。
其參數(shù)設(shè)置如下：
a) 可以設(shè)置長度單位(px)或百分比（設(shè)置百分比時，參照盒子的寬高）
b) 設(shè)置為cover時，會自動調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域，如有溢出部分則會被隱藏。
c) 設(shè)置為contain會自動調(diào)整縮放比例，保證圖片始終完整顯示在背景區(qū)域。
見代碼示例01 背景-尺寸background-size.html
2、background-origin
通過background-origin可以設(shè)置背景圖片定位(background-position)的參照原點。
其參數(shù)設(shè)置如下：
border-box以邊框做為參考原點；
padding-box以內(nèi)邊距做為參考原點；
content-box以內(nèi)容區(qū)做為參考點；
見代碼示例02 背景-原點background-origin.html
3、background-clip
通過background-clip，可以設(shè)置對背景區(qū)域進行裁切，即改變背景區(qū)域的大小。
其參數(shù)設(shè)置如下：
border-box裁切邊框以內(nèi)為背景區(qū)域；
padding-box裁切內(nèi)邊距以內(nèi)為背景區(qū)域；
content-box裁切內(nèi)容區(qū)做為背景區(qū)域；
見代碼示例03 背景-裁切background-clip.html
4、多背景
以逗號分隔可以設(shè)置多背景，可用于自適應(yīng)布局
見代碼示例04 背景-多背景.html
漸變
漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現(xiàn)許多炫麗的效果，有效的減少圖片的使用數(shù)量，并且具有很強的適應(yīng)性和可擴展性。
線性漸變
linear-gradient線性漸變指沿著某條直線朝一個方向產(chǎn)生漸變效果，如下圖是從黃色漸變到綠色。
1、必要的元素：
借助Photoshop總結(jié)得出線性漸變的必要元素
a、方向
b、起始色
c、終止色
d、漸變距離
2、關(guān)于方向
設(shè)置漸變方向，可以用關(guān)鍵字如to top、to right，也可以用角度（正負值均可）如45deg、-90deg等，當以角度做為參數(shù)時，可參照下圖來使用，0deg從下往上，90deg從左向右，進而可以推算出180deg從上向下。
見代碼示例01 漸變-線性漸變linear-gradient.html
注：我們可以設(shè)置漸變的起始點，這個起始點的值可以是百分比形式，這個百分比在沒有設(shè)置background-size時，是相對于盒子大小的，當設(shè)置了background-size時則是相對于background-size的。
徑向漸變
radial-gradient徑向漸變指從一個中心點開始沿著四周產(chǎn)生漸變效果
1、必要的元素：
a) 輻射范圍即圓半徑
b) 中心點 即圓的中心
c) 漸變起始色
d) 漸變終止色
e) 漸變范圍
2、關(guān)于中心點
中心位置參照的是盒子的左上角，例如background-image: radial-gradient(120px at 0 0 yellow green)其圓心點為左上角，background-image: radial-gradient(120px at 0 100% yellow green)其圓心為左下角。
3、關(guān)于輻射范圍
其半徑可以不等，即可以是橢圓，如background-image: radial-gradient(120px 100px at 0 0 yellow green)會是一個橢圓形（橫軸120px、縱軸100px）的漸變。
見代碼示例02 漸變-徑向漸變radial-gradient.html
寫在最后
關(guān)于漸變不同瀏覽器有不同的版本，即語法格式不一樣，我們以最新語法為準，可自行查找資料了解即可。
http://www.w3cplus.com/css3/new-css3-linear-gradient.html
過渡
過渡是CSS3中具有顛覆性的特征之一，可以實現(xiàn)元素不同狀態(tài)間的平滑過渡（補間動畫），經(jīng)常用來制作動畫效果。
幀動畫：通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片
見代碼示例baidu.html
補間動畫：自動完成從起始狀態(tài)到終止狀態(tài)的的過渡。
見代碼示例01 體驗過渡.html
關(guān)于補間動畫更多學習可查看http://mux.alimama.com/posts/1009
在CSS3里使用transition可以實現(xiàn)補間動畫（過渡效果），并且當前元素只要有“屬性”發(fā)生變化時即存在兩種狀態(tài)(我們用A和B代指），就可以實現(xiàn)平滑的過渡，為了方便演示采用hover切換兩種狀態(tài)，但是并不僅僅局限于hover狀態(tài)來實現(xiàn)過渡。
可以通過all設(shè)置所有屬性的過渡效果，也可以分別設(shè)置某一屬性的過渡效果，見代碼示例03 過渡-寬高.html
可以將過渡屬性transition設(shè)置在A或B狀態(tài)，但是會有一些細節(jié)的差異，見代碼示例03 過渡-顏色.html
transition屬性拆解如下表：
見代碼示例05 過渡-屬性詳解.html
2D轉(zhuǎn)換
轉(zhuǎn)換是CSS3中具有顛覆性的特征之一，可以實現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放，甚至支持矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠Flash才可以實現(xiàn)的效果。
1、移動 translate(x, y) 可以改變元素的位置，x、y可為負值；
a) 移動位置相當于自身原來位置
b) y軸正方向朝下
c) 除了可以像素值，也可以是百分比，相對于自身的寬度或高度
見代碼示例01 2D轉(zhuǎn)換-移動translate.html
2、縮放 scale(x, y) 可以對元素進行水平和垂直方向的縮放，x、y的取值可為小數(shù)；
見代碼示例02 2D轉(zhuǎn)換-縮放scale.html
3、旋轉(zhuǎn) rotate(deg) 可以對元素進行旋轉(zhuǎn)，正值為順時針，負值為逆時針；
見代碼示例03 2D轉(zhuǎn)換-旋轉(zhuǎn)rotate.html
a) 當元素旋轉(zhuǎn)以后，坐標軸也跟著發(fā)生的轉(zhuǎn)變
b) 調(diào)整順序可以解決，把旋轉(zhuǎn)放到最后
見代碼示例05 綜合使用例子.html
4、傾斜 skew(deg, deg) 可以使元素按一定的角度進行傾斜，可為負值，第二個參數(shù)不寫默認為0。
見代碼示例04 2D轉(zhuǎn)換-傾斜skew.html
5、矩陣matrix() 把所有的2D轉(zhuǎn)換組合到一起，需要6個參數(shù)（了解）。
關(guān)于矩陣的學習資料
6、transform-origin可以調(diào)整元素轉(zhuǎn)換的原點
見代碼示例08 轉(zhuǎn)換-原點transform-origin.html
我們可以同時使用多個轉(zhuǎn)換，其格式為：transform: translate() rotate() scale() ...等，其順序會影響轉(zhuǎn)換的效果。
見代碼示例05 綜合使用例子.html
3D轉(zhuǎn)換
1、左手坐標系
伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手坐標系，拇指、食指和中指分別代表X、Y、Z軸的正方向。如下圖
2、CSS中的3D坐標系
CSS3中的3D坐標系與上述的3D坐標系是有一定區(qū)別的，相當于其繞著X軸旋轉(zhuǎn)了180度，如下圖
借助示例理解3D轉(zhuǎn)換
a) 繞X軸旋轉(zhuǎn)，見代碼示例01 3D轉(zhuǎn)換-旋轉(zhuǎn)rotateX.html
b) 繞Y軸旋轉(zhuǎn)，見代碼示例02 3D轉(zhuǎn)換-旋轉(zhuǎn)rotateY.html
c) 繞Z軸旋轉(zhuǎn)，見代碼示例03 3D轉(zhuǎn)換-旋轉(zhuǎn)rotateZ.html
d) 在X軸移動，見代碼示例04 3D轉(zhuǎn)換-移動translateX.html
d) 在Y軸移動，見代碼示例05 3D轉(zhuǎn)換-移動translateY.html
d) 在Z2軸移動，見代碼示例06 3D轉(zhuǎn)換-移動translateZ.html
3、左手法則
左手握住旋轉(zhuǎn)軸，豎起拇指指向旋轉(zhuǎn)軸正方向，正向就是其余手指卷曲的方向。
4、透視（perspective）
電腦顯示屏是一個2D平面，圖像之所以具有立體感（3D效果），其實只是一種視覺呈現(xiàn)，通過透視可以實現(xiàn)此目的。
透視可以將一個2D平面，在轉(zhuǎn)換的過程當中，呈現(xiàn)3D效果。
注：并非任何情況下需要透視效果，根據(jù)開發(fā)需要進行設(shè)置。
perspective有兩種寫法
a) 作為一個屬性，設(shè)置給父元素，作用于所有3D轉(zhuǎn)換的子元素
b) 作為transform屬性的一個值，做用于元素自身
見代碼示例07 3D轉(zhuǎn)換-透視perspective.html
5、理解透視距離
透視會產(chǎn)生“近大遠小”的效果
6、3D呈現(xiàn)（transform-style）
設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)，這些子元素必須為轉(zhuǎn)換原素。
flat：所有子元素在 2D 平面呈現(xiàn)
preserve-3d：保留3D空間
見代碼示例08 3D轉(zhuǎn)換-透視transform-style.html
3D元素構(gòu)建是指某個圖形是由多個元素構(gòu)成的，可以給這些元素的父元素設(shè)置transform-style: preserve-3d來使其變成一個真正的3D圖形。
見代碼示例09 3D轉(zhuǎn)換-練習-立方體.html
7、backface-visibility
設(shè)置元素背面是否可見
見代碼示例01 3D轉(zhuǎn)換-應(yīng)用-音樂盒.html
參考文檔
CSS3動畫庫
animate.css
動畫
動畫是CSS3中具有顛覆性的特征之一，可通過設(shè)置多個節(jié)點來精確控制一個或一組動畫，常用來實現(xiàn)復雜的動畫效果。
1、必要元素：
a、通過@keyframes指定動畫序列；
b、通過百分比將動畫序列分割成多個節(jié)點；
c、在各節(jié)點中分別定義各屬性
d、通過animation將動畫應(yīng)用于相應(yīng)元素；
2、關(guān)鍵屬性
a、animation-name設(shè)置動畫序列名稱
b、animation-duration動畫持續(xù)時間
c、animation-delay動畫延時時間
d、animation-timing-function動畫執(zhí)行速度，linear、ease等
e、animation-play-state動畫播放狀態(tài)，running、paused等
f、animation-direction動畫逆播，alternate等
g、animation-fill-mode動畫執(zhí)行完畢后狀態(tài)，forwards、backwards等
h、animation-iteration-count動畫執(zhí)行次數(shù)，inifinate等
i、steps(60) 表示動畫分成60步完成
參數(shù)值的順序：
關(guān)于幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意
伸縮布局
CSS3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，適應(yīng)性非常強，其強大的伸縮性，在響應(yīng)式開中可以發(fā)揮極大的作用。
如下圖，學習新的概念：
主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向
側(cè)軸：與主軸垂直的軸稱作側(cè)軸，默認是垂直方向的
方向：默認主軸從左向右，側(cè)軸默認從上到下
主軸和側(cè)軸并不是固定不變的，通過flex-direction可以互換。
1、必要元素：
a、指定一個盒子為伸縮盒子 display: flex
b、設(shè)置屬性來調(diào)整此盒的子元素的布局方式 例如 flex-direction
c、明確主側(cè)軸及方向
d、可互換主側(cè)軸，也可改變方向
2、各屬性詳解
a、flex-direction調(diào)整主軸方向（默認為水平方向）
b、justify-content調(diào)整主軸對齊
c、align-items調(diào)整側(cè)軸對齊
d、flex-wrap控制是否換行
e、align-content堆棧（由flex-wrap產(chǎn)生的獨立行）對齊
f、flex-flow是flex-direction、flex-wrap的簡寫形式
g、flex子項目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配
h、order控制子項目的排列順序，正序方式排序，從小到大
此知識點重在理解，要明確找出主軸、側(cè)軸、方向，各屬性對應(yīng)的屬性值可參考示例源碼。
多列布局
類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。
/* 分幾列/-webkit-column-count:3;/ 分割線/-webkit-column-rule:1px dashed red;/設(shè)置列間距/-webkit-column-gap:60px;/ 列寬度//-webkit-column-width: 400px;*/
了解即可，實際意義不大。
Web字體
開發(fā)人員可以為自已的網(wǎng)頁指定特殊的字體，無需考慮用戶電腦上是否安裝了此特殊字體，從此把特殊字體處理成圖片的時代便成為了過去。
支持程度比較好，甚至IE低版本瀏覽器也能支持。
字體格式
不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關(guān)字體格式的知識。
1、TureType(.ttf)格式
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2、OpenType(.otf)格式
.otf字體被認為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
3、Web Open Font Format(.woff)格式
woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數(shù)據(jù)包的分離，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
4、Embedded Open Type(.eot)格式
.eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體，支持這種字體的瀏覽器有IE4+；
5、SVG(.svg)格式
.svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知識后，我們就需要為不同的瀏覽器準備不同格式的字體，通常我們會通過字體生成工具幫我們生成各種格式的字體，因此無需過于在意字體格式間的區(qū)別差異。
推薦http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字體
字體圖標
其實我們可以把文字理解成是一種特殊形狀的圖片，反之我們是不是也可以把圖片制作成字體呢？
答案是肯定的。
常見的是把網(wǎng)頁常用的一些小的圖標，借助工具幫我們生成一個字體包，然后就可以像使用文字一樣使用圖標了。
優(yōu)點：
1、將所有圖標打包成字體庫，減少請求；
2、具有矢量性，可保證清晰度；
3、使用靈活，便于維護；
Font Awesome 使用介紹
http://fontawesome.dashgame.com/
定制自已的字體圖標庫
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/
兼容性
通過http://caniuse.com/ 可查詢CSS3各特性的支持程度，一般兼容性處理的常見方法是為屬性添加私有前綴，如不能解決，應(yīng)避免使用，無需刻意去處理CSS3的兼容性問題。
高級應(yīng)用
360導航官網(wǎng)
攜程旅行
3D切割輪播圖
1、
伸縮布局：
display:flex;
主軸 ，側(cè)軸（垂直于主軸的方向）
主軸方向：flex-direction:
row row-reverse
column column-reverse
主軸方向上的對齊方式：justify-content
flex-start: 主軸開始
flex-end: 主軸結(jié)束
center: 居中
space-around:平分
sapce-between：兩端對齊 中間平均
側(cè)軸對齊方式：
flex-start: 側(cè)軸開始
flex-end: 側(cè)軸結(jié)束
center: 居中
baseline:基線對齊
streth:拉伸
子盒子伸縮比例：
flex: 1;
如果某盒子不參與劃分比里， 不寫flex屬性即可
2、圖標字體
優(yōu)點：
1、將所有圖標打包成字體庫，減少請求；
2、具有矢量性，可保證清晰度；
3、使用靈活，便于維護；
使用步驟：
1、引入字體包
2、申明字體：告訴瀏覽器去哪找字體
3、定義類名
4、在結(jié)構(gòu)中寫 圖標的編碼，給標簽添加類名
偽元素中：
 ----> content:"\e628";
3-360全屏滾動案例
鼠標滾輪事件：
onmousewheel=function(){}
伸縮布局
CSS3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，適應(yīng)性非常強，其強大的伸縮性，在響應(yīng)式開中可以發(fā)揮極大的作用。
如下圖，學習新的概念：
主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向
側(cè)軸：與主軸垂直的軸稱作側(cè)軸，默認是垂直方向的
方向：默認主軸從左向右，側(cè)軸默認從上到下
主軸和側(cè)軸并不是固定不變的，通過flex-direction可以互換。
1、必要元素：
a、指定一個盒子為伸縮盒子 display: flex
b、設(shè)置屬性來調(diào)整此盒的子元素的布局方式 例如 flex-direction
c、明確主側(cè)軸及方向
d、可互換主側(cè)軸，也可改變方向
2、各屬性詳解
a、flex-direction調(diào)整主軸方向（默認為水平方向）
該屬性通過定義flex容器的主軸方向來決定felx子項在flex容器中的位置
row 水平方向
reverse-row 反轉(zhuǎn)
column 垂直方向
reverse-column 反轉(zhuǎn)列
b、justify-content設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
flex-start、 起點對齊
flex-end、 終點對齊
center 中間對齊
space-around、 環(huán)繞
space-between 兩端對齊
c、flex控制子項目的縮放比例
不指定flex 屬性，則不參與分配
d、align-items設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
flex-start、 起點對齊
flex-end、 終點對齊
center 中間對齊
Strethc: 拉伸;
此知識點重在理解，要明確找出主軸、方向，各屬性對應(yīng)的屬性值可參考示例源碼
應(yīng)用場景1：
應(yīng)用場景2:
應(yīng)用場景3-攜程旅行
Web字體
開發(fā)人員可以為自已的網(wǎng)頁指定特殊的字體，無需考慮用戶電腦上是否安裝了此特殊字體，從此把特殊字體處理成圖片的時代便成為了過去。
支持程度比較好，甚至IE低版本瀏覽器也能支持。
字體格式
不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關(guān)字體格式的知識。
1、TureTpe(.ttf)格式
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2、OpenType(.otf)格式
.otf字體被認為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
3、Web Open Font Format(.woff)格式
woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數(shù)據(jù)包的分離，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
4、Embedded Open Type(.eot)格式
.eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體，支持這種字體的瀏覽器有IE4+；
5、SVG(.svg)格式
.svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知識后，我們就需要為不同的瀏覽器準備不同格式的字體，通常我們會通過字體生成工具幫我們生成各種格式的字體，因此無需過于在意字體格式間的區(qū)別差異。
下載字體的網(wǎng)站.
推薦http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字體
字體圖標
其實我們可以把文字理解成是一種特殊形狀的圖片，反之我們是不是也可以把圖片制作成字體呢？
答案是肯定的。
常見的是把網(wǎng)頁常用的一些小的圖標，借助工具幫我們生成一個字體包，然后就可以像使用文字一樣使用圖標了。
優(yōu)點：
1、將所有圖標打包成字體庫，減少請求；
2、具有矢量性，可保證清晰度；
3、使用靈活，便于維護；
Font Awesome 使用介紹
http://fontawesome.dashgame.com/
定制自已的字體圖標庫
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/
兼容性
通過http://caniuse.com/ 可查詢CSS3各特性的支持程度，一般兼容性處理的常見方法是為屬性添加私有前綴，如不能解決，應(yīng)避免使用，無需刻意去處理CSS3的兼容性問題。
我們需要知道每個屬性，能被那個版本的瀏覽器支持.
高級應(yīng)用
360 案例:
監(jiān)聽滾輪
var i=0; document.onmousewheel=function(){ console.log(i++); }
//需要處理兼容 （我們是靠監(jiān)聽滾輪的時間來處理）
//我們需要使用到插件. (滾屏插件) 基于jQuery 的一個插件.
jQuery fullPage 全屏滾動插件
中文網(wǎng)址:http://www.dowebok.com
相關(guān)說明:http://www.dowebok.com/77.html
對應(yīng)的顏色
sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
loopTop:true , 滾到頂部 回到最后一屏；
js代碼
$(function(){ $('#dowebok').fullpage({ sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'], loopTop:true, afterLoad:function( anchorLink ,index){ console.log(index); $('.section').removeClass('current'); setTimeout(function(){ $('.section').eq(index-1).addClass('current'); },100); } });});
