CSS3中几个新增加的盒模型属性使用教程

1. .wrap{        width:600px;   
2.     height:200px;        display:-moz-box;   
3.     display:-webkit-box;        display:box;   
4. }    .sectionOne{   
5.     background:orange;        -moz-box-flex:3;   
6.     -webkit-box-flex:3;        box-flex:3;   
7. }    .sectionTwo{   
8.     background:purple;        -moz-box-flex:2;   
9.     -webkit-box-flex:2;        box-flex:2;   
10. }    .sectionThree{   
11.     -moz-box-flex:1;        -webkit-box-flex:1;   
12.     box-flex:1;        background:green;   
13. }  

展示效果：

说明：
必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center);分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1，也就是说这三个子容器将父容器wrap的宽度600px分为6份，sectionOne占居父结构宽度的3/6即300px，sectionOne占居父结构宽度的2/6即200px，sectionThree占居父结构宽度的1/6即100px。