思洋互动网站建设学前班

元素的布局顺序--box-direction属性

在盒布局下，可以设置盒元素内部的顺序为正向或者反向。CSS 3新增的box-direction属性，可用于定义盒元素的内部布局顺序。基于webkit内核的替代私有属性是-webkit-box-direction，基于gecko内核的替代私有属性是-moz-box-direction。

1. 参数说明

box- direction属性的语法如下：

广州网站建设

1. box-direction : normal | reverse | inherit; 

取值说明如下。

normal：默认值，正常顺序。垂直布局的盒元素中，内部子元素从左到右排列显示；水平布局的盒元素中，内部子元素从上到下排列显示。

reverse：反向。表示盒元素内部的子元素的排列显示顺序与normal相反。

inherit：表示继承父元素中box-direction属性的值。

2. 示例介绍

基于示例4-1，在盒布局的方式下，把三个栏目改为水平方向上的反向布局。调整样式表如下。

【示例4-3】 反向显示三个栏目。

广州网站建设

1. <style type="text/css"> 
2. .container {  
3.     display:-webkit-box;  
4.     display:-moz-box;  
5.     display:box;  
6.     -webkit-box-orient:horizontal;  
7.     -moz-box-orient:horizontal;  
8.     box-orient:horizontal;  
9.     /* 布局顺序属性设置为反向 */  
10.     -webkit-box-direction:reverse;          /* 兼容webkit内核 */  
11.     -moz-box-direction:reverse;                 /* 兼容gecko内核 */  
12.     box-direction:reverse;                      /* 定义为反向顺序 */  
13. }  
14. .container div {  
15.     color:#FFF;  
16.     font-size:12px;  
17.     padding:10px;  
18.     line-height:20px;  
19. }  
20. .container div ul {  
21.     margin:0;  
22.     padding-left:20px;  
23. }  
24. .container .left-aside {  
25.     background-color:#F63;  
26. }  
27. .container .center-content {  
28.     background-color:#390;  
29.     width:200px;  
30. }  
31. .container .right-aside {  
32.     background-color:#039;  
33. }  
34. </style> 

广州网站设计

运行结果如图4-3所示。

（点击查看大图）图4-3  反向显示三个栏目

代码分析：示例4-3中，把box- direction属性值设置为reverse，表示反向布局顺序，并设置了兼容样式。同时也设置了box-orient属性值为horizontal，表示水平方向布局。在盒布局的方式下，三个栏目将在水平方向上反向显示，如图4-3所示。   广州网站设计