【详解CSS3盒模型display:box】二

【详解CSS3盒模型display:box】二

box属性上面”css3弹性盒子模型之box-flex”将box-flex如何对父容器的宽度进行划分分配讲解完毕，下面在看一下父容器里面的box属性包括哪些box属性，具体属性如下代码所示：box-orient | box-direction | box-align | box-pack | box-lines1、box-orientbox-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。可选属性如下所示：horizontal | vertical | inline-axis | block-axis | inherithorizontal、inline-axis说明：给box设置horizontal或inline-axis属性其效果似乎表现一致，都可将子容器水平排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择horizontal或inline-axis属性对子容器进行水平排列，其是对父容器的宽度进行分配划分此时如果父容器定义了高度值，其子容器的高度值设置则无效状态，所有子容器的高度等于父容器的高度值;如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。CSS代码：.wrap{width:600px;height:200px;display:-moz-box;display:-webkit-box;display:box;-moz-box-orient:horizontal;-webkit-box-orient:horizontal;box-orient:horizontal;//水平排列}.sectionOne{background:orange;-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}.sectionTwo{background:purple;-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}.sectionThree{width:100px;background:green;}