【详解CSS3盒模型display:box】

【详解CSS3盒模型display:box】
一、box-flex属性(2):如果其中一个子容器或多个子容器设置了固定宽度，其它子容器没有设置，其计算方式是这样的：子容器如果设置了固定宽度值，该子容器则直接应用设置的宽度值，其它没有设置的则再父容器的宽度基础上减去子容器设置的固定宽度，在剩下的宽度基础上按一定比例进行划分分配详解CSS3盒模型display:box详解CSS3盒模型display:box。请看下面代码:CSS代码：.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代码：.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属性}.sectionThree{width:200px;background:green;}说明：父容器的宽度600px减去设置了子容器的200px基础上再减去100px(2×50)剩下300px，这300px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即225px,sectionTwo占居1/4即75px。