摘要：默認(rèn)值為，表示繼承父元素的屬性，如果沒有父元素，則等同于?？梢愿淖?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。請(qǐng)用百分比來規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞和，等同于和。是動(dòng)畫的開始，是動(dòng)畫的完成。為了得到最佳的瀏覽器支持，應(yīng)該始終定義和選擇器。

一.Flex布局

1.概念

下圖為flex的相關(guān)概念示意圖

? 使用flex布局的容器(flex container),他內(nèi)部的元素自動(dòng)成為flex項(xiàng)目(flex item).容器擁有兩根隱性的軸,水平的主軸(main axis),豎直的交叉軸(cross axis).主軸開始的位置,即主軸與有邊框的交點(diǎn),稱為main start;主軸結(jié)束的位置稱為main end;交點(diǎn)軸開始的位置稱為cross start;交叉軸結(jié)束的位置稱為cross end.item按主軸或交叉軸排列,item在主軸方向上占據(jù)的寬度稱為main size,在交叉軸方向上的寬度稱為cross size.

? 注意:設(shè)為flex布局以后,子元素的float,clear和vertical-align屬性將失效.

2.容器屬性

1.flex-direction屬性 決定主軸的方向（即項(xiàng)目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
-- row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
-- row-reverse：主軸為水平方向，起點(diǎn)在右端。
-- column：主軸為垂直方向，起點(diǎn)在上沿。
-- column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

2.flex-wrap 屬性定義，如果一條軸線排不下，如何換行。
flex-wrap: nowrap | wrap | wrap-reverse;
-- nowrap（默認(rèn)）：不換行。
-- wrap：換行，第一行在上方。
-- wrap-reverse：換行，第一行在下方。

3.flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。
flex-flow:  ;

4.justify-content 屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;

5.align-items 屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
align-items: flex-start | flex-end | center | baseline | stretch;

6.align-content 屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

3.項(xiàng)目屬性

1.order 屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
order: ;

2.flex-grow 屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
flex-grow: ; /* default 0 */

3.flex-shrink 屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
flex-shrink: ; /* default 1 */

4.flex-basis 屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。
flex-basis:  | auto; /* default auto */

5.flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
flex:   

6.align-self 屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;

二.響應(yīng)式布局

1.基本語法

• 小于寬度

@media only screen and (max-width: ) {
    selector {
        
    }
}

• 大于寬度小于寬度

@media only screen and (min-width: ) and (max-width: ) {
    selector {
        
    }
}

• 大于寬度

@media only screen and (min-width: ) {
    selector {
        
    }
}

2.注意

1.在響應(yīng)式布局中,css語法同正常樣式表語法.
2.響應(yīng)式布局之間存在不同屏幕尺寸的限制,使用樣式互相不影響.
3.當(dāng)響應(yīng)式布局中樣式塊起作用,會(huì)與正常樣式塊設(shè)置協(xié)同布局,遵循選擇器的優(yōu)先級(jí).

三.過濾transition

1.屬性

transition-property 過濾屬性

該屬性表示可過濾的樣式屬性

值:none | all | [css1 [...]]

默認(rèn)值:all

none:沒有指定任何樣式
all:默認(rèn)值,表示指定元素所有支持transition-property屬性的樣式
[css1 ,[...]]:可過濾的樣式,可用逗號(hào)分開寫多個(gè)樣式

transition-duration 過濾持續(xù)時(shí)間

該屬性的單位為秒(s)或毫秒(ms)

值:time[,time]*

默認(rèn)值:0s

注意:該屬性不能為負(fù)值,該值為單值時(shí),即所有過渡屬性都對(duì)應(yīng)同樣時(shí)間;該值為多值時(shí),過濾屬性按照順序?qū)?yīng)持續(xù)時(shí)間.

transition-delay 過濾延遲時(shí)間

該屬性定義元素屬性延遲多少時(shí)間后開始過濾效果,該屬性的單位為秒(s)或毫秒(ms)

值:time[,time]*

默認(rèn)值:0s

注意:該屬性若為負(fù)值,無延遲效果,但過濾元素的起始值將從0變成設(shè)定值(設(shè)定值=延遲時(shí)間+持續(xù)時(shí)間)若該設(shè)定值小于等于0，則無過渡效果；若該設(shè)定值大于0，則過渡元素從該設(shè)定值開始完成剩余的過渡效果

transition-timing-function 過濾時(shí)間函數(shù)

該屬性用于定義元素過濾屬性隨時(shí)間變化的過濾速度變化效果

值:linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier()

默認(rèn)值:ease

linear：勻速
ease：慢快慢
ease-in-out：慢快慢,和ease類似,但是比ease幅度大
easa-in：慢快
ease-out：快慢
cubic-bezier()：貝賽爾曲線函數(shù)

transition屬性

該屬性表示前四個(gè)屬性整體賦值

transition: (transition-property transition-duration transition-dela> transition-timing-function);

四.動(dòng)畫

1.概念

動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。
請(qǐng)用百分比來規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。
0% 是動(dòng)畫的開始，100% 是動(dòng)畫的完成。
為了得到最佳的瀏覽器支持，應(yīng)該始終定義 0% 和 100% 選擇器。

2.屬性

animation-name 屬性

該屬性表示規(guī)定需要綁定到選擇器的keyframe名稱.

animation-name:name;

animation-duration 屬性

該屬性表示動(dòng)畫持續(xù)時(shí)間
animation-duration: time;

animation-delay 屬性

該屬性表示動(dòng)畫延遲時(shí)間
animation-delay: time;

animation-timing-function 屬性

該屬性表示動(dòng)畫運(yùn)動(dòng)曲線
animation-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();

linear：勻速
ease：慢快慢
ease-in-out：慢快慢,和ease類似,但是比ease幅度大
easa-in：慢快
ease-out：快慢
cubic-bezier()：貝賽爾曲線函數(shù)

animation-play-state 屬性

該屬性表示動(dòng)畫狀態(tài)
animation-play-state: running | paused

running：運(yùn)行
paused：暫停

animation-fill-mode 屬性

該屬性表示動(dòng)畫結(jié)束后的停留位置
animation-fill-mode: forwards | backwards

forwards:終點(diǎn) 
backwards:起點(diǎn)

animation-iteration-count 屬性

該屬性表示動(dòng)畫次數(shù)
animation-iteration-count: count | infinite

count：固定次數(shù)
infinite：無限次

animation-direction 屬性

該屬性表示運(yùn)動(dòng)方向
animation-direction: normal | alternate | alternate-reverse;

normal：原起點(diǎn)為第一次運(yùn)動(dòng)的起點(diǎn)，且永遠(yuǎn)從起點(diǎn)向終點(diǎn)運(yùn)動(dòng)
alternate：原起點(diǎn)為第一次運(yùn)動(dòng)的起點(diǎn)，且來回運(yùn)動(dòng)
alternate-reverse：原終點(diǎn)變?yōu)榈谝淮芜\(yùn)動(dòng)的起點(diǎn)，且來回運(yùn)動(dòng)