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

XML/HTML Code复制内容到剪贴板

<article>  
    <section>01</section>  
    <section>02</section>  
    <section>03</section>  
</article>  

CSS代码：

CSS Code复制内容到剪贴板

.wrap{   
    width:600px;   
    height:200px;   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
}   
.sectionOne{   
    background:orange;   
    -moz-box-flex:3;   
    -webkit-box-flex:3;   
    box-flex:3;   
}   
.sectionTwo{   
    background:purple;   
    -moz-box-flex:1;   
    -webkit-box-flex:1;   
    box-flex:1;   
}   
.sectionThree{   
    width:200px;//设置固定宽度   
    background:green;   
}  

展示效果：

说明：
sectionThree设置了固定宽度为200px，父容器的宽度600px减去改子容器的200px还剩下400px，这400px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。
在以上代码的基础上给sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度又如何进行分配划分的那？接着看
CSS代码：

CSS Code复制内容到剪贴板

.wrap{   
    width:600px;   
    height:200px;   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
}   
.sectionOne{   
    background:orange;   
    -moz-box-flex:3;   
    -webkit-box-flex:3;   
    box-flex:3;   
}   
.sectionTwo{   
    background:purple;   
    -moz-box-flex:1;   
    -webkit-box-flex:1;   
    box-flex:1;   
        margin:0px 50px;//添加margin属性