1. 說明
移動網(wǎng)頁開發(fā)跟pc網(wǎng)頁開發(fā)雁佳，雖是一脈相承言秸，卻也存在著代溝曹体。為了讓傳統(tǒng)web網(wǎng)頁開發(fā)人員快速適應(yīng)移動網(wǎng)頁開發(fā)，特制訂此文檔寥枝。同時本文檔 起到簡化移動網(wǎng)頁布局復(fù)雜度和約束和規(guī)范公司開發(fā)移動網(wǎng)頁的作用宪塔。
<p >此文檔可能隨著經(jīng)驗的積累和項目的推進會有變化。</p>
本文檔共有以下幾個部分：
- 說明
- 傳統(tǒng)網(wǎng)頁布局與移動網(wǎng)頁布局差異
- 盒模型
- Flex布局
- css 屬性裁剪
- html元素的支持
- 示例
2.傳統(tǒng)網(wǎng)頁布局與移動網(wǎng)頁布局差異
兩者的差異并不大囊拜，甚至可以說后者是前者的子集某筐。
傳統(tǒng)網(wǎng)頁開發(fā)可能在布局上考慮的更多的是瀏覽器的差異，而移動網(wǎng)頁布局考慮的更多的是屏幕尺寸和分辨率的差異冠跷。
可以從我們公司的首頁和用一個我編寫的demo看到差異
圖中的箭頭是我需要調(diào)整的部分南誊。
3.盒模型
支持的css樣式包含：
- border
- border-*
- border-*-*
- border-*-*-*
- height
- width
- padding
- padding-*
- margin
- margin-*
在一些較復(fù)雜布局下可以支持：
- min-height
- min-width
- max-height
- max-width
但不建議使用。
4.Flex布局
4.1設(shè)置成flex布局
請自覺使用下面的代碼
.box{ display:flex; display: -webkit-flex; }
4.2 flex概念
. 主要有主軸(main axis)蜜托，和交叉軸(cross axis)
. 主軸的起點叫main start抄囚，結(jié)束叫main end
. 交叉軸起點則叫cross start，結(jié)束則叫 cross end
如需詳細(xì)了解請移步阮老師的博文
下面是能夠用在父容器的樣式屬性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
下面是用在子元素上的樣式屬性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
4.3 flex-direction屬性
flex-direction的值有：
row（默認(rèn)值）：主軸為水平方向橄务，起點在左端幔托。
row-reverse：主軸為水平方向，起點在右端蜂挪。
column：主軸為垂直方向重挑，起點在上沿。
column-reverse：主軸為垂直方向棠涮，起點在下沿谬哀。
相對應(yīng)的布局圖如下：
4.4 flex-wrap屬性
默認(rèn)情況下，項目都排在一條主軸上严肪。flex-wrap可以設(shè)置是否“換行”
常用的值有：
nowrap(不換行史煎，默認(rèn)) | wrap（換行） | wrap-reverse（換行，在此行上面）;
4.5 flex-flow
flex-flow是flex-direction和flex-wrap的和寫驳糯，寫法為下：
.box { flex-flow: <flex-direction> <flex-wrap>; }
4.6 justify-content屬性
justify-content屬性值：
flex-start | flex-end | center | space-between | space-around
效果如下圖：
4.7 order
order屬性定義子元素的排列順序篇梭。數(shù)值越小，排列越靠前酝枢，默認(rèn)為0很洋。
4.8 flex-grow
flex-grow屬性定義子元素的放大比例。默認(rèn)為0隧枫，即父容器有剩余空間時喉磁，也不進行放大。
4.9 flex-shrink
flex-shrink屬性定義子元素的縮小比例官脓，即當(dāng)父容器空間不足時协怒，子元素進行縮小。
4.10 flex-basis
flex-basis屬性定義了在分配多余空間之前卑笨，子元素占據(jù)的主軸空間（main size）孕暇。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間赤兴。它的默認(rèn)值為auto妖滔，即子元素的本來大小。
它可以設(shè)為跟width或height屬性一樣的值（比如350px）桶良，則項目將占據(jù)固定空間座舍。
4.11 flex
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性陨帆。
用法如下：
flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;
4.12 align-self
align-self屬性重寫父容器align-items屬性曲秉，如果沒有父容器，則相當(dāng)于值設(shè)置為stretch疲牵。
此屬性的值為：
auto | flex-start | flex-end | center | baseline | stretch
在移動網(wǎng)頁布局中如非必要承二，不建議使用align-self屬性。
5. css 屬性裁剪
為了簡化移動網(wǎng)頁布局纲爸，提高代碼質(zhì)量亥鸠，方便前端代碼檢視，特對css3屬性進行裁剪识啦。
5.1 位置相關(guān)
position负蚊，值為absolute，absolute袁滥，relative盖桥，static
left
right
top
bottom
5.2 顏色相關(guān)
可以使用英文表示的顏色值，如red题翻，blue
可以使用rgb表示顏色揩徊，如rgb（220，220,220）
可以使用十六進制表示的顏色嵌赠，如#eee或者#eeeeee
可以使用漸變顏色
5.3 邊框相關(guān)
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
5.4 文字相關(guān)
font-family
color
white-space
text-decoration
letter-spacing
font-size
font-style
font-weight
line-height
text-align
word-wrap
word-spacing
overflow
text-overflow
5.5 背景相關(guān)
background
background-color
background-image
background-repeat
background-attachment
background-position
6 html元素的支持
支持的元素有：
a
form
input
img
button
select
label
canvas
audio
source
video
ul
li
ol
dl
dt
dd
div
p
span
meter
h1-h6 需要重寫樣式
