摘要：默認值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。可以改變任意多的樣式任意多的次數。請用百分比來規定變化發生的時間，或用關鍵詞和，等同于和。是動畫的開始，是動畫的完成。為了得到最佳的瀏覽器支持，應該始終定義和選擇器。

一.Flex布局

1.概念

下圖為flex的相關概念示意圖

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

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

2.容器屬性

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

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

3.flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
flex-flow:  ;

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

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

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

3.項目屬性

1.order 屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。
order: ;

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

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

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

5.flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
flex:   

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

二.響應式布局

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.在響應式布局中,css語法同正常樣式表語法.
2.響應式布局之間存在不同屏幕尺寸的限制,使用樣式互相不影響.
3.當響應式布局中樣式塊起作用,會與正常樣式塊設置協同布局,遵循選擇器的優先級.

三.過濾transition

1.屬性

transition-property 過濾屬性

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

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

默認值:all

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

transition-duration 過濾持續時間

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

值:time[,time]*

默認值:0s

注意:該屬性不能為負值,該值為單值時,即所有過渡屬性都對應同樣時間;該值為多值時,過濾屬性按照順序對應持續時間.

transition-delay 過濾延遲時間

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

值:time[,time]*

默認值:0s

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

transition-timing-function 過濾時間函數

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

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

默認值:ease

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

transition屬性

該屬性表示前四個屬性整體賦值

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

四.動畫

1.概念

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
可以改變任意多的樣式任意多的次數。
請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同于 0% 和 100%。
0% 是動畫的開始，100% 是動畫的完成。
為了得到最佳的瀏覽器支持，應該始終定義 0% 和 100% 選擇器。

2.屬性

animation-name 屬性

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

animation-name:name;

animation-duration 屬性

該屬性表示動畫持續時間
animation-duration: time;

animation-delay 屬性

該屬性表示動畫延遲時間
animation-delay: time;

animation-timing-function 屬性

該屬性表示動畫運動曲線
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()：貝賽爾曲線函數

animation-play-state 屬性

該屬性表示動畫狀態
animation-play-state: running | paused

running：運行
paused：暫停

animation-fill-mode 屬性

該屬性表示動畫結束后的停留位置
animation-fill-mode: forwards | backwards

forwards:終點 
backwards:起點

animation-iteration-count 屬性

該屬性表示動畫次數
animation-iteration-count: count | infinite

count：固定次數
infinite：無限次

animation-direction 屬性

該屬性表示運動方向
animation-direction: normal | alternate | alternate-reverse;

normal：原起點為第一次運動的起點，且永遠從起點向終點運動
alternate：原起點為第一次運動的起點，且來回運動
alternate-reverse：原終點變為第一次運動的起點，且來回運動