H5移動(dòng)端知識(shí)點(diǎn)總結(jié) 閱讀目錄
移動(dòng)開發(fā)基本知識(shí)點(diǎn) 一. 使用rem作為單位 html { font-size: 100px; } @media(min-width: 320px) { html { font-size: 100px; } } @media(min-width: 360px) { html { font-size: 112.5px; } } @media(min-width: 400px) { html { font-size: 125px; } } @media(min-width: 640px) { html { font-size: 200px; } } 給手機(jī)設(shè)置100px的字體大小; 對(duì)于320px的手機(jī)匹配是100px, 二. 禁用a,button,input,optgroup,select,textarea 等標(biāo)簽背景變暗 在移動(dòng)端使用a標(biāo)簽做按鈕的時(shí)候或者文字連接的時(shí)候,點(diǎn)擊按鈕會(huì)出現(xiàn)一個(gè) "暗色的"背景,比如如下代碼: a,button,input,optgroup,select,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); } 三. meta基礎(chǔ)知識(shí)點(diǎn): 1.頁(yè)面窗口自動(dòng)調(diào)整到設(shè)備寬度,并禁止用戶及縮放頁(yè)面。 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
屬性基本含義: 2.忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼
因此頁(yè)面上通用的模板如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>標(biāo)題</title> <link rel="shortcut icon" href="/favicon.ico"> </head> <body> 這里開始內(nèi)容 </body> </html> 四:移動(dòng)端如何定義字體font-family body{font-family: "Helvetica Neue", Helvetica, sans-serif;} 五:在android或者IOS下 撥打電話代碼如下: <a href="tel:15602512356">打電話給:15602512356</a> 六:發(fā)短信(winphone系統(tǒng)無效) <a href="sms:10010">發(fā)短信給: 10010</a> 七:調(diào)用手機(jī)系統(tǒng)自帶的郵件功能 1. 當(dāng)瀏覽者點(diǎn)擊這個(gè)鏈接時(shí),瀏覽器會(huì)自動(dòng)調(diào)用默認(rèn)的客戶端電子郵件程序,并在收件人框中自動(dòng)填上收件人的地址下面 2、填寫抄送地址; 在android手機(jī)下,如下代碼: 3. 填上密件抄送地址,如下代碼: 4. 包含多個(gè)收件人、抄送、密件抄送人,用分號(hào)隔(;)開多個(gè)收件人的地址即可實(shí)現(xiàn)。如下代碼: 6、包含內(nèi)容,用?body=可以填上內(nèi)容(需要換行的話,使用%0A給文本換行);代碼如下: 八:webkit表單輸入框placeholder的顏色值改變: 如果想要默認(rèn)的顏色顯示紅色,代碼如下: 九:移動(dòng)端IOS手機(jī)下清除輸入框內(nèi)陰影,代碼如下 input,textarea { 十:在IOS中 禁止長(zhǎng)按鏈接與圖片彈出菜單 a, img { calc基本用法 calc基本語(yǔ)法: <div class="calc">我是測(cè)試calc</div> box-sizing的理解及使用 該屬性是解決盒模型在不同的瀏覽器中表現(xiàn)不一致的問題。它有三個(gè)屬性值分別是: border-box: width與height是包括內(nèi)邊距和邊框的,不包括外邊距,這是IE的怪異模式使用的盒模型,比如還是上面的代碼: .box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:border-box;} 那么此時(shí)瀏覽器渲染的width會(huì)是178px,height也是178px; 因?yàn)榇藭r(shí)定義的width和height會(huì)包含padding和border在內(nèi); 瀏覽器支持的程度如下: 理解display:box的布局 display: box; box-flex 是css3新添加的盒子模型屬性,它可以為我們解決按比列劃分,水平均分,及垂直等高等。 一:按比例劃分: 目前box-flex 屬性還沒有得到firefox, Opera, chrome瀏覽器的完全支持,但我們可以使用它們的私有屬性定義firefox(-moz-),opera(-o-),chrome/safari(-webkit-)。box-flex屬性主要讓子容器針對(duì)父容器的寬度按一定的規(guī)則進(jìn)行劃分。 代碼如下: <div class="test"> <p id="p1">Hello</p> <p id="p2">W3School</p> </div> <style> .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style> 如下圖所示: 注意: 如下圖所示: 二:box具體的屬性如下: box-orient | box-direction | box-align | box-pack | box-lines 1. box-orient; <div class="test"> <p id="p1">Hello</p> <p id="p2">W3School</p> </div> css代碼如下: <style> .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-orient:horizontal; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style> 如下圖所示: 二:vertical 可以讓子元素進(jìn)行垂直排列; css代碼如下: <style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-orient:vertical; -webkit-box-orient:vertical; box-orient:vertical; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style> 如下圖所示: 三:inherit。 Inherit屬性讓子元素繼承父元素的相關(guān)屬性。 2. box-direction <div class="test"> <p id="p1">Hello</p> <p id="p2">W3School</p> </div> box-direction 用來確定父容器里的子容器的排列順序,具體的屬性如下代碼所示: <style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-direction:reverse; -webkit-box-direction:reverse; box-direction:reverse; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style> 如下圖所示: 3. box-align: box-align 表示容器里面字容器的垂直對(duì)齊方式,可選參數(shù)如下表示: <style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-align:start; -webkit-box-align:start; box-align:start; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; height:160px; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; height:100px; border:1px solid blue; } </style> 如上 P1 高度為160px p2 為100px; 對(duì)齊方式如下圖所示: 如果改為end的話,那么就是 居低對(duì)齊了,如下: center表示居中對(duì)齊,如下: stretch 在box-align表示拉伸,拉伸與其父容器等高。如下代碼: 在firefox下 和父容器下等高,滿足條件,如下: 在chrome下不滿足條件;如下: 4. box-pack box-pack表示父容器里面子容器的水平對(duì)齊方式,可選參數(shù)如下表示: <style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:400px; height:120px; border:1px solid #333; -moz-box-pack:start; -webkit-box-pack:start; box-pack:start; } #p1{ width:100px; height:108px; border:1px solid red; } #p2{ width:100px; height:108px; border:1px solid blue; } </style> 如下圖所示: box-pack:center; 表示水平居中對(duì)齊,均等地分割多余空間,其中一半空間被置于首個(gè)子元素前,另一半被置于最后一個(gè)子元素后; 如下圖所示: box-pack:end; 表示水平居右對(duì)齊;對(duì)于正常方向的框,最后子元素的右邊緣被放在右側(cè)(首個(gè)子元素前是所有剩余的空間)。 box-pack:Justify: 理解flex布局 我們傳統(tǒng)的布局方式是基于在盒子模型下的,依賴于display屬性的,position屬性的或者是float屬性的,但是在傳統(tǒng)的布局上面并不好布局; 比如我們想讓某個(gè)元素垂直居中的話,我們常見的會(huì)讓其元素表現(xiàn)為表格形式,比如display:table-cell屬性什么的,我們現(xiàn)在來學(xué)習(xí)下使用flex布局是非常方便的; <div class="first-face container"> <span class="pip"></span> </div> css代碼如下: <style> html, body { height: 100%; } .container { width:150px; height:150px; border:1px solid red; } .first-face { display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction:row; display: -webkit-box; -webkit-box-pack:start; } .pip { display:block; width: 24px; height: 24px; border-radius: 50%; background-color: #333; } </style> 注意:在android平臺(tái)的uc瀏覽器和微信瀏覽器中使用display: flex;會(huì)出問題。不支持該屬性,因此使用display: flex;的時(shí)候需要加上display: -webkit-box; 還有一些水平對(duì)齊或者垂直對(duì)齊都需要加上對(duì)應(yīng)的box-pack(box-pack表示父容器里面子容器的水平對(duì)齊方式)及box-align(box-align 表示容器里面子容器的垂直對(duì)齊方式).具體的可以看如下介紹的 display:box屬性那一節(jié)。 當(dāng)我們把flex-direction的值改為 row-reverse后(主軸為水平方向,起點(diǎn)在右端),我們截圖如下所示: 2. flex-wrap屬性 默認(rèn)情況下,項(xiàng)目都排在一條線(又稱"軸線")上。flex-wrap屬性定義,如果一條軸線排不下,可以換行。 3. flex-flow 4. justify-content屬性 5. align-items屬性 6. align-content屬性 三:項(xiàng)目的屬性,以下有6個(gè)屬性可以設(shè)置在項(xiàng)目中, .xx { flex-basis: <length> | auto;} 它可以設(shè)為跟width或height屬性一樣的值(比如350px),則項(xiàng)目將占據(jù)固定空間。
基本語(yǔ)法: 上面是基本語(yǔ)法,感覺好模糊啊,看到這么多介紹,感覺很迷茫啊,下面我們趁熱打鐵來實(shí)現(xiàn)下demo。 一: 1丙 HTML代碼: <div class="first-face container"> <span class="pip"></span> </div> 上面代碼中,div元素(代表骰子的一個(gè)面)是Flex容器,span元素(代表一個(gè)點(diǎn))是Flex項(xiàng)目。如果有多個(gè)項(xiàng)目,就要添加多個(gè)span元素,以此類推。 <style> html, body { height: 100%; } .container { width:150px; height:150px; border:1px solid red; } .first-face { } .pip { display:block; width: 24px; height: 24px; border-radius: 50%; background-color: #333; } </style> 1. 首先,只有一個(gè)左上角的情況下,flex布局默認(rèn)為左對(duì)齊,因此需要display:flex即可;如下代碼: .first-face { display: flex; display: -webkit-box; } 上面為了兼容UC瀏覽器和IOS瀏覽器下,因此需要加上display: -webkit-box;來兼容,我們也明白,如果不加上.first-face里面的代碼,也能做出效果,因?yàn)樵啬J(rèn)都是向左對(duì)齊的,如下圖所示: 我們繼續(xù)來看看對(duì)元素進(jìn)行居中對(duì)齊; 需要加上 justify-content: center;即可;但是在UC瀏覽器下不支持該屬性, .first-face { display: flex; display: -webkit-box; justify-content:center; -webkit-box-pack:center; } 效果如下: 上面已經(jīng)介紹過 水平右對(duì)齊代碼也一樣、因此代碼變成如下: .first-face { display: flex; display: -webkit-box; justify-content:flex-end; -webkit-box-pack:end; } 如下圖所示: 2. 我們接著來分別看看垂直居左對(duì)齊,垂直居中對(duì)齊,垂直居右對(duì)齊. 效果如下: 二:垂直居中對(duì)齊 現(xiàn)在垂直已經(jīng)居中對(duì)齊了,但是在水平上還未居中對(duì)齊,因此在水平上居中對(duì)齊,我們需要加上justify-content屬性居中即可; .first-face { display: flex; display: -webkit-box; align-items:center; -webkit-box-align:center; justify-content:center; -webkit-box-pack:center; } 效果如下: 三:垂直居右對(duì)齊 原理和上面的垂直居中對(duì)齊是一個(gè)道理,只是值換了下而已;代碼如下: .first-face { display: flex; display: -webkit-box; align-items:center; -webkit-box-align:center; justify-content:flex-end; -webkit-box-pack:end; } 效果如下: 3. 我們接著來分別看看底部居左對(duì)齊,底部居中對(duì)齊,底部居右對(duì)齊. 一:底部居左對(duì)齊 其實(shí)屬性還是用到上面的,只是值換了一下而已;代碼如下: .first-face { display: flex; display: -webkit-box; align-items:flex-end; -webkit-box-align:end; justify-content:flex-start; -webkit-box-pack:start; } 效果如下: 二:底部居中對(duì)齊 .first-face { display: flex; display: -webkit-box; align-items:flex-end; -webkit-box-align:end; justify-content:center; -webkit-box-pack:center; } 效果如下: 三:底部居右對(duì)齊 .first-face { display: flex; display: -webkit-box; align-items:flex-end; -webkit-box-align:end; justify-content:flex-end; -webkit-box-pack:end; } 效果如下: 二:2丙 .first-face { display: flex; justify-content: space-between; } 但是在UC瀏覽器下不生效,因此我們需要 display: -webkit-box;和-webkit-box-pack:Justify;這兩句代碼; .first-face { display: flex; justify-content: space-between; display: -webkit-box; -webkit-box-pack:Justify; } 效果如下: 2. 垂直兩端對(duì)齊; .first-face { display: flex; justify-content: space-between; flex-direction: column; } 再加上justify-content: space-between;說明兩端對(duì)齊.但是在UC瀏覽器并不支持該屬性,使其不能垂直兩端對(duì)齊,因此為了兼容UC瀏覽器,需要使用-webkit-box;因此 .first-face { display: flex; justify-content: space-between; -webkit-flex-direction: column; flex-direction: column; display: -webkit-box; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-box-pack:justify; } 如上使用 -webkit-box-direction: normal; 使其對(duì)齊方向?yàn)樗綇淖蠖碎_始,-webkit-box-orient: vertical;使用這句代碼告訴 3. 垂直居中兩端對(duì)齊 .first-face { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } 多加一句 align-items: center;代碼; 表示交叉軸上居中對(duì)齊。同理在UC瀏覽器下不支持的,因此我們?yōu)榱思嫒軺C瀏覽器,可以加上如下代碼,因此整個(gè)代碼如下: .first-face { display: flex; justify-content: space-between; -webkit-flex-direction: column; flex-direction: column; align-items:center; display: -webkit-box; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-box-pack:justify; -webkit-box-align:center; } 再加上-webkit-box-align:center;這句代碼,告訴瀏覽器垂直居中。 4. 垂直居右兩端對(duì)齊 .first-face { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } 同理為了兼容UC瀏覽器,整個(gè)代碼變成如下: .first-face { display: flex; justify-content: space-between; -webkit-flex-direction: column; flex-direction: column; align-items:flex-end; display: -webkit-box; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-box-pack:justify; -webkit-box-align:end; } 和上面代碼一樣,只是更改了一下垂直對(duì)齊方式而已; 注意:下面由于時(shí)間的關(guān)系,先不考慮UC瀏覽器的兼容 三:3丙 <div class="first-face container"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div> CSS代碼如下: .first-face { display: flex; flex-direction: column; justify-content: space-between; } .pip:nth-child(2) { align-self: center; } .pip:nth-child(3) { align-self: flex-end; } 如下圖所示: 四: 4丙 <div class="first-face container"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> </div> CSS代碼如下: .column{ display: flex; justify-content: space-between; } .first-face { display: flex; flex-direction: column; justify-content: space-between; } 如下圖所示: 五:5丙 <div class="first-face container"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> </div> css代碼如下: .column{ display: flex; justify-content: space-between; } .first-face { display: flex; flex-direction: column; justify-content: space-between; } .first-face .column:nth-of-type(2){ justify-content: center; } 如下圖所示: 六:6丙 <div class="first-face container"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> </div> css代碼如下: .column{ display: flex; justify-content: space-between; } .first-face { display: flex; flex-direction: column; justify-content: space-between; } 如下圖所示: 7,8,9丙也是一個(gè)意思,這里先不做了; Flex布局兼容知識(shí)點(diǎn)總結(jié) 假設(shè)父容器class為 box,子項(xiàng)目為item. .box { display: -moz-box; display: -webkit-box; display: box; } 新版語(yǔ)法需要如下寫: .box{ display: -webkit-flex; display: flex; } 或者 行內(nèi) .box{ display: -webkit-inline-flex; display:inline-flex; } 二:容器屬性(舊版語(yǔ)法) .box{ -moz-box-pack: center; -webkit-box-pack: center; box-pack: center; } box-pack屬性總共有4個(gè)值: .box{ 各個(gè)值的含義如下: 2.box-align 屬性(垂直方向上的對(duì)齊方式) .box{ -moz-box-align: center; /*Firefox*/ -webkit-box-align: center; /*Safari,Opera,Chrome*/ box-align: center; } box-align屬性總共有5個(gè)值: .box{ box-align: start | end | center | baseline | stretch; /*交叉軸對(duì)齊:頂部對(duì)齊(默認(rèn)) | 底部對(duì)齊 | 居中對(duì)齊 | 文本基線對(duì)齊 | 上下對(duì)齊并鋪滿*/ } 各個(gè)值的含義如下: 3.box-direction 屬性 .box{ -moz-box-direction: reverse; /*Firefox*/ -webkit-box-direction: reverse; /*Safari,Opera,Chrome*/ box-direction: reverse; } box-direction屬性總共有3個(gè)值: .box{ box-direction: normal | reverse | inherit; /*顯示方向:默認(rèn)方向 | 反方向 | 繼承子元素的 box-direction*/ } 4.box-orient 屬性 box-orient定義子元素是否應(yīng)水平或垂直排列。 .box{ -moz-box-orient: horizontal; /*Firefox*/ -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/ box-orient: horizontal; } box-orient屬性總共有5個(gè)值: .box{ box-orient: horizontal | vertical | inline-axis | block-axis | inherit; /*排列方向:水平 | 垂直 | 行內(nèi)方式排列(默認(rèn)) | 塊方式排列 | 繼承父級(jí)的box-orient*/ } horizontal: 在水平行中從左向右排列子元素。 5.box-lines 屬性 .box{ -moz-box-lines: multiple; /*Firefox*/ -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/ box-lines: multiple; } box-lines屬性總共有2個(gè)值: .box{ box-lines: single | multiple; /*允許換行:不允許(默認(rèn)) | 允許*/ } single:伸縮盒對(duì)象的子元素只在一行內(nèi)顯示 6.box-flex 屬性。 .item{ -moz-box-flex: 1.0; /*Firefox*/ -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/ box-flex: 1.0; } box-flex屬性使用一個(gè)浮點(diǎn)值: .item{ box-flex: <value>; /*伸縮:<一個(gè)浮點(diǎn)數(shù),默認(rèn)為0.0,即表示不可伸縮,大于0的值可伸縮,柔性相對(duì)>*/ } 7.box-ordinal-group 屬性 .item{ -moz-box-ordinal-group: 1; /*Firefox*/ -webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/ box-ordinal-group: 1; } box-direction屬性使用一個(gè)整數(shù)值: .item{ box-ordinal-group: <integer>; /*顯示次序:<一個(gè)整數(shù),默認(rèn)為1,數(shù)值越小越排前>*/ } 新版語(yǔ)法如下: 定義容器的display屬性: .box{ display: -webkit-flex; /*webkit*/ display: flex; } /*行內(nèi)flex*/ .box{ display: -webkit-inline-flex; /*webkit*/ display:inline-flex; } 容器樣式 .box{ flex-direction: row | row-reverse | column | column-reverse; /*主軸方向:左到右(默認(rèn)) | 右到左 | 上到下 | 下到上*/ flex-wrap: nowrap | wrap | wrap-reverse; /*換行:不換行(默認(rèn)) | 換行 | 換行并第一行在下方*/ flex-flow: <flex-direction> <flex-wrap>; /*主軸方向和換行簡(jiǎn)寫*/ justify-content: flex-start | flex-end | center | space-between | space-around; /*主軸對(duì)齊方式:左對(duì)齊(默認(rèn)) | 右對(duì)齊 | 居中對(duì)齊 | 兩端對(duì)齊 | 平均分布*/ align-items: flex-start | flex-end | center | baseline | stretch; /*交叉軸對(duì)齊方式:頂部對(duì)齊(默認(rèn)) | 底部對(duì)齊 | 居中對(duì)齊 | 上下對(duì)齊并鋪滿 | 文本基線對(duì)齊*/ align-content: flex-start | flex-end | center | space-between | space-around | stretch; /*多主軸對(duì)齊:頂部對(duì)齊(默認(rèn)) | 底部對(duì)齊 | 居中對(duì)齊 | 上下對(duì)齊并鋪滿 | 上下平均分布*/ } flex-direction值介紹如下: flex-wrap 值介紹如下: flex-flow值介紹如下(主軸方向和換行簡(jiǎn)寫): justify-content值介紹如下: align-items值介紹如下: align-content值介紹如下: 子元素屬性 .item{ order: <integer>; /*排序:數(shù)值越小,越排前,默認(rèn)為0*/ flex-grow: <number>; /* default 0 */ /*放大:默認(rèn)0(即如果有剩余空間也不放大,值為1則放大,2是1的雙倍大小,以此類推)*/ flex-shrink: <number>; /* default 1 */ /*縮?。耗J(rèn)1(如果空間不足則會(huì)縮小,值為0不縮?。?/span>*/ flex-basis: <length> | auto; /* default auto */ /*固定大小:默認(rèn)為0,可以設(shè)置px值,也可以設(shè)置百分比大小*/ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /*flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫,默認(rèn)值為0 1 auto,*/ align-self: auto | flex-start | flex-end | center | baseline | stretch; /*單獨(dú)對(duì)齊方式:自動(dòng)(默認(rèn)) | 頂部對(duì)齊 | 底部對(duì)齊 | 居中對(duì)齊 | 上下對(duì)齊并鋪滿 | 文本基線對(duì)齊*/ } 兼容寫法 1. 首先是定義容器的 display 屬性: .box{ display: -webkit-box; /* 老版本語(yǔ)法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本語(yǔ)法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本語(yǔ)法: IE 10 */ display: -webkit-flex; /* 新版本語(yǔ)法: Chrome 21+ */ display: flex; /* 新版本語(yǔ)法: Opera 12.1, Firefox 22+ */ } 這里還要注意的是,如果子元素是行內(nèi)元素,在很多情況下都要使用 display:block 或 display:inline-block 2. 子元素主軸對(duì)齊方式(水平居中對(duì)齊) .box{ -webkit-box-pack: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center; } 兼容寫法新版語(yǔ)法的 space-around 是不可用的:如下新版語(yǔ)法space-around; .box{ box-pack: start | end | center | justify; /*主軸對(duì)齊:左對(duì)齊(默認(rèn)) | 右對(duì)齊 | 居中對(duì)齊 | 左右對(duì)齊*/ justify-content: flex-start | flex-end | center | space-between | space-around; /*主軸對(duì)齊方式:左對(duì)齊(默認(rèn)) | 右對(duì)齊 | 居中對(duì)齊 | 兩端對(duì)齊 | 平均分布*/ } 3. 子元素交叉軸對(duì)齊方式(垂直居中對(duì)齊) .box{ box-align: start | end | center | baseline | stretch; /*交叉軸對(duì)齊:頂部對(duì)齊(默認(rèn)) | 底部對(duì)齊 | 居中對(duì)齊 | 文本基線對(duì)齊 | 上下對(duì)齊并鋪滿*/ align-items: flex-start | flex-end | center | baseline | stretch; /*交叉軸對(duì)齊方式:頂部對(duì)齊(默認(rèn)) | 底部對(duì)齊 | 居中對(duì)齊 | 上下對(duì)齊并鋪滿 | 文本基線對(duì)齊*/ } 4. 子元素的顯示方向。 子元素的顯示方向可通過 box-direction + box-orient + flex-direction 實(shí)現(xiàn),如下代碼: .box{ -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } 2. 右到左(水平方向) .box{ -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -moz-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } 如上代碼:box 寫法的 box-direction 只是改變了子元素的排序,并沒有改變對(duì)齊方式,需要新增一個(gè) box-pack 來改變對(duì)齊方式。 3. 上到下(垂直方向上) .box{ -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } 4. 下到上(垂直方向上) .box{ -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: vertical; -moz-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } 5. 是否允許子元素伸縮 box語(yǔ)法中 box-flex 如果不是0就表示該子元素允許伸縮,而flex是分開的,上面 flex-grow 是允許放大(默認(rèn)不允許) flex-shrink 是允許縮小(默認(rèn)允許)。box-flex 默認(rèn)值為0,也就是說,在默認(rèn)的情況下,在兩個(gè)瀏覽器中的表現(xiàn)是不一樣的: .item{ box-flex: <value>; /*伸縮:<一個(gè)浮點(diǎn)數(shù),默認(rèn)為0.0,即表示不可伸縮,大于0的值可伸縮,柔性相對(duì)>*/ flex-grow: <number>; /* default 0 */ /*放大:默認(rèn)0(即如果有剩余空間也不放大,值為1則放大,2是1的雙倍大小,以此類推)*/ flex-shrink: <number>; /* default 1 */ /*縮小:默認(rèn)1(如果空間不足則會(huì)縮小,值為0不縮小)*/ } 6. 子元素的顯示次序 注意:目前還有一個(gè)問題沒有弄明白,舊版本中的那個(gè)屬性對(duì)應(yīng)著新版本的 align-self屬性,有知道的請(qǐng)告知,謝謝! |
|