移动端入门+box-flex
头部标签详解
1.编码必须为utf-8编码；
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
2.可视区域viewport，移动端特有的属性
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
inital-scale表示的初始的缩放比例，当即是当页面第一次load的时候缩放比例.一般设置为1.0倍。
minimum-scale=1.0表示的允许用户缩放的最小比例。
maximum-scale=1.0表示的允许用户缩放的最大比例。
user-scalable=yes/no表示是否支持用户手动进行缩放，默认为yes，一般设置为no。
3. IOS的特有属性
<meta name="apple-mobile-web-app-capable" content="yes" />
是否启动webapp功能。说通俗一点。就是当点击网页添加至主屏幕功能时，会在主屏幕上生成一个图标。点击该图标会进入webapp功能。就是模拟本地应用的模式来浏览web页面。生成的图标可以自定义，启动webapp时的开始时的图片也可以定义。这个是link标签的作用，我会在介绍link标签时，单独进行说明。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。这个主要是根据实际的页面设计的主体色为搭配来进行设置。
CSS3属性：box-flex，弹性盒模型，移动端很实用主要让子容器针对父容器的宽度按一定规则进行划分
它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分；
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)；
用法：其父元素必须定义为display:box;属性，其子元素
box-flex: value。value是要分为的分数。
如：
css代码：
*{margin: 0; padding: 0;}
html,body{height: 100%; margin: 0;}
li{list-style-type: none;}
.wrapper{
width: 100%;
display:-moz-box; //父元素定义为弹性布局
display:-webkit-box;
display:box;
/**定义子级分布类型：默认为水平显示inline-axis或者horizontal，垂直显示：block-axis或者vertical**/
box-orient:horizontal;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
/**定义子级摆列方向：块级元素默认显示为从上到下，行内元素默认显示为从左到右。反向排列属性reverse **/
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
box-direction:reverse;
}
.item01{
background: #e2e2e2;
box-flex:2;
-webkit-box-flex:2;
-moz-box-flex:2;
/*将子元素划分组（默认是按照元素先后顺序来显示的，有了这属性，就从属性值的从小到大排列显示）*/
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
box-ordinal-group:1;
}
.item02{
background: #330;
box-flex:3;
-webkit-box-flex:3;
-moz-box-flex:3;
/*将子元素划分组（默认是按照顺序来显示的，从小到大）*/
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
box-ordinal-group:3;
}
.item03{
background: #f30;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
/*将子元素划分组（默认是按照顺序来显示的，从小到大）*/
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
box-ordinal-group:2;
}
html代码：
<ul class="wrapper">
<li class="item01">11111</li>
<li class="item02">22222</li>
<li class="item03">333333</li>
</ul>
表示box里的内容总共分为3份，item1的宽度为100%的2/3,item2的宽度为100%的1/3
