// 開啟彈性布局
display
:-webkit-box;
display
: -moz-box;
display
: -ms-flexbox;
display
: -webkit-flex;
display
: flex;
// 定義子元素排列
-webkit-box-orient
:horizontal;
-webkit-box-direction
:normal;
-moz-box-orient
:horizontal;
-moz-box-direction
:normal;
( 子元素橫向排列 預設 )
box-orient
:horizontal;
box-direction
:normal;
-webkit-flex-direction
:row;
flex-direction
:row;
-webkit-box-orient
:horizontal;
-webkit-box-direction
:reverse;
-moz-box-orient
:horizontal;
-moz-box-direction
:reverse;
( 子元素橫向反轉排列 )
box-orient
:horizontal;
box-direction
:reverse;
-webkit-flex-direction
:row-reverse;
flex-direction
:column;
-webkit-box-orient
:vertical;
-webkit-box-direction
:normal;
-moz-box-orient
:vertical;
-moz-box-direction
:normal;
( 子元素豎向排列 )
box-orient
:vertical;
box-direction
:normal;
-webkit-flex-direction
:row-reverse;
flex-direction
:row-reverse;
-webkit-box-orient
:vertical;
-webkit-box-direction
:reverse;
-moz-box-orient
:vertical;
-moz-box-direction
:reverse;
( 子元素豎向反轉排列 )
box-orient
:vertical;
box-direction
:reverse;
-webkit-flex-direction
:column-reverse;
flex-direction
:column-reverse;
// 定義子元素橫向排列布局
-webkit-justify-content
:center;
justify-content
:center;
-moz-box-pack
:center;
(橫向據中排列布局)
-webkit--moz-box-pack
:center;
box-pack
:center;
webkit--moz-box-pack
:center;
-webkit-justify-content
:space-between;
-moz-box-pack
:center;
-moz-justify-content
:space-between;
(橫向兩邊排列布局)
-ms-flex-pack
: center;
-ms-justify-content
:space-between;
box-pack
:center;
justify-content
:space-between;
-webkit-box-pack
: center;
-webkit-justify-content
: space-around;
-moz-box-pack
:center;
-moz-justify-content
: space-around;
-ms-flex-pack
: center;
-ms-justify-content
: space-around;
box-pack
:center;
justify-content
: space-around;
// 定義子元素豎向排列布局
align-items
:center;
-webkit-align-items
:center;
box-align
:center;
-moz-box-align
:center;
-webkit-box-align
:center;
// 定義子元素換行
-webkit-flex-wrap
:wrap;
-webkit-box-lines
:multiple;
-moz-flex-wrap
:wrap;
flex-wrap
:wrap;
// -webkit-flex-flow
:row wrap;
-webkit-box-orient
:horizontal;
-webkit-box-lines
:multiple;
-moz-flex-flow
:row wrap;
box-orient
:horizontal;
box-lines
:multiple;
flex-flow
:row wrap;
// 伸縮盒子布局相容 flex
:num;的相容
box-flex
:num;
-webkit-box-flex
:num;
-moz-box-flex
:num;
-webkit-flex
:num;
flex
:num;
// 元素出現順序 order
:num相容
box-order
:num;
-webkit-box-order
:num;
-moz-box-order
:num;
-webkit-order
:num;
order
:num;
布局與相容性
1.不要用hack，一定有更好的解決辦法。很多情況都是因為 結構不夠好才會出現相容性問題。2.思考如何用最少的標籤及屬性實現頁面。3.理解結構，表現，行為分離的意義。4.布局前一定要先分析頁面結構，磨刀不誤砍柴工，分析怎麼用更好的辦法實現，理清思路後，再切圖寫 5.深刻理解類的概念，注重歸類元素，多...
常用原生JS方法總結（相容性寫法）
新增事件方法 1 2 3 4 5 6 7 8 9 addhandler function element,type,handler elseif element.attachevent else 移除之前新增的事件方法 1 2 3 4 5 6 7 8 9 removehandler function...
常用原生JS方法總結（相容性寫法）
經常會用到原生js來寫前端。但是原生js的一些方法在適應各個瀏覽器的時候寫法有的也不怎麼一樣的。今天下班有點累。就來總結一下簡單的東西吧 備註 一下的方法都是包裹在乙個eventutil物件裡面的，直接採用物件字面量定義方法了。新增事件方法 addhandler function element,t...