/*** 盒布局的基础知识 ***/
使用float与position可以将div盒子进行布局，可是每个盒子必须设定一样的高度，否则底部不会对齐。使用css3中的box属性就可以很容易的解决这个问题。
兼容写法：
//Mozilla 内核
-moz-box
// Webkit 内核
-webkit-box
// Opera 内核
-o-box
使用自适应窗口的弹性盒布局
只要使用一个box-flex属性，使盒布局变为弹性盒布局。
例子：-mox-box-flex:1;//除去div中指定的宽度，加入box-flex。
改变元素的显示顺序
只要使用一个box-ordinal-group属性，来改变各元素的显示顺序。
例子：-mox-box-ordinal-group:1; //表示第一个显示
改变元素的排列方向
只要使用一个box-orient属性，可以将多个元素的方向从水平改为垂直，也可以从垂直改为水平
例子：-mox-box-orient:vertical; //表示垂直方向 horizontal表示水平方向
水平方向与垂直方向的对齐方式
box-pack:center;//水平方向居中
box-align:center;//垂直方向居中