6.布局
布局：將元素以正確的大小擺放在正確的位置上。
display屬性：設(shè)置元素的顯示方式阔挠。block | inline | inline-block | none
display:block;塊級元素缤谎，默認寬度為父元素寬度匙监，可設(shè)置寬高琐馆，（相對于前序元素及后續(xù)元素）換行顯示瀑粥。默認為 display:block 的元素有 div p h1-h6 ul form ...
display:inline;行級元素，默認寬度為內(nèi)容寬度萍诱，不可設(shè)置寬高，同行顯示（元素內(nèi)部可換行）污呼。默認為 display:inline 的元素有 span a label cite em ...
display:inline-block;默認寬度為內(nèi)容寬度裕坊，可設(shè)置寬高，同行顯示燕酷，（若為后續(xù)元素籍凝，寬度超過一行的邊界）整塊換行。默認為 display:inline-block 的元素有 input textarea select buttom ...
display:none;設(shè)置元素不顯示（后續(xù)元素占據(jù)他的位置） ?visibility:hidden; 把元素隱藏苗缩，位置還在饵蒂。
margin:0 auto; 塊級元素水平居中。
在IE下實現(xiàn) inline-block 顯示（IE6,IE7）:在IE下酱讶，display:inline-block; 只是觸發(fā)了元素的 layout 退盯。比如將 display:inline-block; 設(shè)置到 div 上，只能保證這個 div 擁有塊元素的特征（可以設(shè)置寬度，高度）渊迁，但還是會產(chǎn)生換行慰照。接下來要設(shè)置 display:inline; 使其不產(chǎn)生換行。將 display:inline-block;*display:inline-block; 寫在同一個樣式上琉朽， inline-block 是不會觸發(fā)元素的 layout(布局)的毒租，因此我們還要額外加上 *zoom:1; 來觸發(fā)布局。
position定位：設(shè)置定位方式（設(shè)置參照物）
top / right / bottom / left (可為負值)：top(元素上邊緣與參照物上邊緣的距離)箱叁，right(元素右邊緣與參照物右邊緣的距離)墅垮，bottom(元素下邊緣與參照物下邊緣的距離)，left(元素左邊緣與參照物左邊緣的距離)耕漱。配合定位使用噩斟。
z-index 和 z-index棧：z-index配合定位使用，設(shè)置 z 軸上的排序孤个，默認為 0 剃允。z-index棧表示父元素 的 z-index 較大時，所有子元素都在上層齐鲤。
position：static | relative | absolute | fixed ? ? static 為默認值
position:relative;相對定位 ,仍在文檔流中斥废，參照物為元素本身。最常用的場景：改變元素 z 軸上層級给郊，使用場景：絕對定位元素（position:absolute;）的參照物牡肉。
position:absolute;絕對定位，默認寬度為內(nèi)容寬度淆九，脫離文檔流统锤，參照物為第一個祖先元素（根元素）。對絕對定位的祖先元素（根元素）設(shè)為相對定位炭庙，對其他元素無影響饲窿，可以把它只當作參照物使用。絕對定位應(yīng)用場景：輪播頭圖焕蹄。
position:fixed;默認寬度為內(nèi)容寬度逾雄，脫離文檔流，參照物為視窗（IE6 及以下不支持）腻脏。
float:left | right | none | inherit
默認寬度為內(nèi)容寬度鸦泳，脫離文檔流（不再占有原來位置），向指定方向移動（會被邊界擋子榔贰）做鹰。
float 元素在同一文檔流：第二個 float 元素在第一個 float 元素后面，按文檔流順序排列鼎姐。
float 元素半脫離文檔流：對其他元素脫離文檔流钾麸，對內(nèi)容在文檔流（文字環(huán)繞）更振。
clear:both | left | right | none | inherit 應(yīng)用于浮動元素的后續(xù)元素，塊級元素。清除浮動對后續(xù)元素的影響。
使用 clear 的兩種方式：增加空白元素（用的較少）张惹，clearfix（浮動元素的父元素加上類名 clearfix）
flex 彈性布局
flex container：HTML元素為彈性布局，稱元素為flex container乎芳。彈性容器的子元素成為 flex item。把 flex item 的排列方向稱為 main axis （主軸）帖池，跟主軸垂直方向的稱為 cross axis（輔軸）奈惑。
創(chuàng)建 flex container ?display:flex; 彈性容器的直接子元素為彈性布局。在文檔流中的子元素為 flex item睡汹。
（1）方向 （設(shè)置在 flex-container 的屬性）
flex-direction:row | row-reverse | column | column-reverse 設(shè)置彈性元素排列的方向肴甸，默認為 row 從左到右。
flex-wrap:nowrap | wrap | wrap-reverse 設(shè)置元素換行囚巴，默認為nowrap原在，未換行時元素收縮。
flex-flow:<'flex-direction'>||<'flex-wrap'> ?可同時設(shè)置排列方向及換行方式
order:<integer> 初始值為0彤叉，按文檔流順序排列（flex-direction）,值越大排后面
（2）彈性相關(guān)屬性（設(shè)置在 flex-item 的屬性）
flex-basis:main-size | <width> ?設(shè)置flex item 的初始寬/高庶柿，默認值為 main-size，主方向?qū)挾然嘟健Ｈ绻鞣较蛩皆O(shè)置寬度浮庐，垂直設(shè)置高度。作為彈性基數(shù)要結(jié)合彈性來看柬焕。
flex-grow:<number> 初始值為0审残，設(shè)置元素分配到空余空間的比例。在未設(shè)置 flex-grow 時先按照寬度（高度）進行排列斑举，如果發(fā)現(xiàn)有空余空間搅轿，就看有沒有元素設(shè)置 flex-grow，根據(jù) flex-grow 算比例懂昂，把多余空間進行分配介时。
彈性布局元素的寬度：flex-basis + flow-grow/sum(flex-grow)*remain（剩余空間）
flex-shrink:<number> 初始值為1。剩余空間為負凌彬，在各個元素間怎么分配。默認為 1 把剩余負空間平分循衰。
flex-shrink 元素的寬度：flex-basis + flow-shrink/sum(flex-shrink)*remain（剩余負空間）
flex:<'flex-grow'>||<'flex-shrink'>||<'flex-basis'>
（3）對齊
justify-content:flex-start | flex-end | center | space-between | space-around ?設(shè)置 main-axis 方向上的對齊方式铲敛。與 text-align 類似，如何把剩余空間分配成間隔的分配方式会钝。默認為 flex-start伐蒋，由主軸方向決定工三。space-between 把空白空間平分到間隔，space-around 把空白空間分到間隔與首尾先鱼。
justify-content:flex-start | flex-end | center | baseline | stretch ?設(shè)置 cross-axis 方向上的對齊方式俭正。在輔軸上有剩余空間如何做對齊,與 vertical-align 類似。默認值為 stretch 焙畔，延展充滿輔軸空間掸读。
align-self:auto | flex-start | flex-end | center | stretch ?設(shè)置單個 flex-item 在 cross-axis 方向上對齊方式。auto 為默認值宏多，設(shè)在容器上的對齊方式儿惫。
align-content:flex-start | flex-end | center | space-between | space-around | stretch 設(shè)置 cross-align 方向上的行對齊方式。當出現(xiàn)多行并且在容器中有剩余空間伸但，行應(yīng)該怎么做對齊肾请，剩余空間怎么分配。默認為 stretch 更胖，行對齊填滿剩余空間铛铁。
7.變形
transform:none | <transform-function>+
2d 變形
rotate(<angle>) 旋轉(zhuǎn) ：當角度為正值時順時針旋轉(zhuǎn)，負值時逆時針旋轉(zhuǎn)却妨。旋轉(zhuǎn)會改變坐標方向饵逐。
translate(<translation-value>[,<translation-value>]?) 移動：第一個值表示 x 軸偏移（正值向右），第二個值表示 y 軸偏移（正值向下）管呵。只有一個值表示僅 x 軸偏移梳毙。若值為百分比，參照物為當前盒子大芯柘隆（寬 / 高）账锹。
translateX(<translation-value>)? ? ? ? translateY(<translation-value>)
scale(<number> [,<number>]?) 縮放：第二個值省略時表示與第一個值相同。
scaleX(<number>) ? ? ? ? ? ? ? ? ? ? ? ?scaleY(<number>)
skew(<angle>) 傾斜：第一個值表示 y 軸往 x 軸方向傾斜坷襟，第二個值表示 x 軸往 y 軸傾斜奸柬。只有一個值僅 y 軸傾斜。skewX(<angle>) ? ? ? ? ? ? ? ? ? ? ? ? skewY(<angle>)
transform:<transform-function>+：多個 transform-function 連在一起時婴程，他們的順序會影響表現(xiàn)廓奕。
transform-origin 設(shè)置旋轉(zhuǎn)時原點位置。三個值表示 x y z 方向
transform-origin:[ left | center | right | top | bottom | <percentage> | <length> ] ?|
[ left | center | right | <percentage> | <length>?] [ top | center | bottom | <percentage> | <length> ] <length>? ?|
[ center | [ left | right ]] && [ center [ top | bottom ]] <length>?
transform-origin:50% 50%; 默認值档叔，以中心點為原點進行旋轉(zhuǎn)
transform-origin:0 0;容器左上角
transform-origin:20%; y 軸默認為50%
3d 變形
perspective:none | <length> 透視效果 <length>表示人眼到物體的距離桌粉，人眼離物體越近，透視效果更明顯衙四。
perspective-origin 透視角度铃肯，改變?nèi)搜劭赐敢暤奈恢?/p>
perspecttive-origin:[ left | center | right | top | bottom | <percentage>?| <length>?]? |
[ left | center | right | <percentage>?| <length>] [ top | center | bottom | <percentage>| <length>] ? |
[ center | [ left | right ]] && [ center [ top | bottom ]]
perspective-origin:50% 50%; 默認值，在物體的正中間透視传蹈。
perspective-origin:50% -800px; 從頂上往下看
perspective-origin:right; y 軸默認為 50%押逼。
translate3d(<translation-value>,<translation-value>,<length>) ?3d 移動
translateX(<translation-value>) ? ?translateY(<translation-value>) ? ?translateZ(<translation-value>)
scale3d(<number>,<number>,<number>) 3d 縮放
scaleX(<number>) ? ?scaleY(<number>) ? ? scaleZ(<number>)
scaleZ(5) 不影響寬高? transform:scaleZ(5) translateZ(100px); 表示移動了500px,視覺上變大步藕。
rotate3d(<number>,<number>,<number>,<angle>) 3d 旋轉(zhuǎn)
rotateX(<angle>) ? ? rotateY(<angle>) ? ? ?rotateZ(<angle>)
transform:rotate3d(1,0,0,45deg); ?x 軸上取1，與坐標原點連線作為旋轉(zhuǎn)軸旋轉(zhuǎn)45度挑格。
transform:rotate3d(0,0,1,45deg); 等價于 2d 旋轉(zhuǎn)
transform-style:flat | preserved-3d ?flat 為默認值咙冗，扁平化。preserved-3d 保留3d空間漂彤，在父元素上寫雾消。
backface-visibility:visible | hidden 背面是否可見 默認可見
8.動畫
transition 過渡
transition-property:none | <single-transition-property>[,<single-transition-property>]* ?過渡效果的屬性
<single-transition-property> = all | <IDENT> ?
transition-property:none;默認值 transition-property:all; 所有屬性都有過渡效果
transition-property:left,color; 只有 left 和 color 屬性有過渡效果。
transition-duration:<time> [,<time>] ? 過渡效果執(zhí)行時間
transition-timing-function : <single-transition-timing-function> [,<single-transition-timing-function>]*
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[,[ start | end ]]?) | cubic-bezier(<number>,<number>,<number>,<number>)
ease 默認值显歧，兩頭慢中間快 ? linear 勻速 ? ease-in ?開始慢 ? ?ease-out ?結(jié)束慢 ??
ease-in-out 與ease相比幅度更大? step-start 等價于 steps(1,start)??
step-start 等價于 steps(1,start) ? ?steps(<integer>[,[ start | end ]]?) 整數(shù)代表時間函數(shù)中的間隔數(shù)量仪或，start 和 end 指定在每個間隔的起點或是終點發(fā)生變化。
cubic-bezier 中的 number 分別為下圖貝塞爾曲線的?P1 P2 坐標士骤，y/x 越大越快范删。
transition-delay:<time>[,<time>]* ? 延時
transition:<single-transition> [',' <single-transition>]*
<single-transition> = [ none | <single-transition-property>] || <time> || <single-transition-timing-function> || <time> 第一個 time 為執(zhí)行時間，第二個為延時
transition:left 2s ease 1s;
animation 動畫
animation-name:<single-animation-name>[',' <single-animation-name>]*
<single-animation-name> = none | <IDENT> 為 animation 指定一個名稱拷肌，來自關(guān)鍵幀的定義
animation-duration:<time>[,<time>]* 動畫執(zhí)行時間
animation-timing-function 時間函數(shù)
animation-iteration-count:<single-animation-iteration-count>[','<single-animation-iteration-count>]*
<single-animation-iteration-count> = infinite | <number> ?動畫執(zhí)行的次數(shù)
animation-direction:<single-animation-direction>[','<single-animation-direction>]*
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
定義動畫的方向 ?alnernate 往返
animation-play-state:<single-animation-play-state> [','<single-animation-play-state>]*
<single-animation-play-state> = running | paused ? 播放狀態(tài)到旦，讓動畫暫停或播放
animation-delay:<time>[','<time>]* 延時
animation-fill-mode:<single-animation-fill-mode>[','<single-animation-fill-mode>]*
<single-animation-fill-mode> = none | backwards | forwards | both
backwards 開始時保持第一幀狀態(tài) ?forwards 結(jié)束時保持最后一幀狀態(tài)
animation:<single-animation>[','<single-animation>]*
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill_mode> || <single-animation-play-state>
animation: abc 2s ease 0s 1 normal none running; animation:abc 1s 2s both;
@keyframes ?關(guān)鍵幀定義 用 animation 調(diào)用
@keyframes abc{ from{...}? to{...} }? ? ? ? @keyframes abc{ 0%{...}? 100%{...} }
