CSS3弹性盒模型开发笔记（一）

normal：正常显示顺序，即如果盒子元素的box-origent属性值为horizontal，则其包含的子元素按照从左到右的顺序显示，即每个子元素的左边总是靠近前一个子元素的右边；如果盒子元素的box-origent属性值设置为vertical，则其包含的子元素按照从上到下的顺序显示。

reverse：反向显示，盒子所包含的子元素的显示顺序将于normal相反。

inherit：继承上级元素的显示顺序。

实战体验：反向布局网页（以上面的案例为基础）：

CSS3代码：

CSS Code复制内容到剪贴板

<style>   

body{   

    margin:0;padding:0px;   

    text-align:center;   

    background:#170843;   

}   

#box{   

    margin:auto;   

    text-align:center;   

    width:975px;   

}   

#box1{width:185px;}   

#box2{width:601px;}   

#box3{width:189px;}   

#sub-box{   

    display:-moz-box;   

    display:-webkit-box;   

    display:box;   

    box-orient:horizontal;   

    -moz-box-orient:horizontal;   

    -webkit-box-orient:horizontal;     

    box-direction:reverse;   

    -moz-box-direction:reverse;   

    -webkit-box-direction:reverse;   

}   

</style>   

演示效果：

box-ordinal-group属性

  box-direction属性可以改变盒子内部元素的流动顺序，而box-ordinal-group属性能够设置每个子元素在盒子中的具体显示位置，语法如下：

box-ordinal-group：<integer>

取值说明：

属性值是一个自然数，从1 开始，用来设置子元素的位置符号。子元素的分布将根据这个属性值从小到大进行排列。在默认情况下，子元素将根据元素的位置进行排列。
注意：如果没有指定box-ordinal-group属性值的子元素，则其序号默认都为1，并且序号相同的元素将按照他们在文档中的加载的顺序进行排列。

实战体验：垂直网页布局

HTML代码：

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

<div id="box">  

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!