思洋互动网站建设学前班

元素的布局方向--box-orient属性

CSS 3新增的box-orient属性，可用于定义盒元素的内部布局方向。基于webkit内核的替代私有属性是-webkit-box-orient，基于gecko内核的替代私有属性是-moz-box-orient。

1. 参数说明

box-orient属性的语法如下：

广州网站设计

1. box-orient : horizontal | vertical | inline-axis | block-axis | inherit 

取值说明如下。

horizontal：表示盒子元素在一条水平线上从左到右编排它的子元素。

vertical：表示盒子元素在一条垂直线上从上到下编排它的子元素。

inline-axis：默认值，表示盒子元素沿着内联轴编排它的子元素，表现为横向编排。

block-axis：表示元素沿着块轴编排它的子元素，表现为垂直编排。

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

2. 示例介绍

基于示例4-1，在盒布局的方式下，改变三个栏目的布局方向为竖向显示。改变样式表如下。

【示例4-2】 竖向显示三个栏目。

广州网站设计

1. <style type="text/css"> 
2. .container {  
3.     display:-webkit-box;                    /* 兼容webkit内核 */  
4.     display:-moz-box;                       /* 兼容gecko内核 */  
5.     display:box;                            /* 定义为盒子显示 */  
6.     /* 布局方向设置为竖直方向 */  
7.     -webkit-box-orient:vertical;        /* 兼容webkit内核 */  
8.     -moz-box-orient:vertical;               /* 兼容gecko内核 */  
9.     box-orient:vertical;                    /* 定义为竖向编排显示 */  
10. }  
11. .container div {  
12.     color:#FFF;  
13.     font-size:12px;  
14.     padding:10px;  
15.     line-height:20px;  
16. }  
17. .container div ul {  
18.     margin:0;  
19.     padding-left:20px;  
20. }  
21. .container .left-aside {  
22.     background-color:#F63;  
23. }  
24. .container .center-content {                /* 去除了宽度设置 */  
25.     background-color:#390;  
26. }  
27. .container .right-aside {  
28.     background-color:#039;  
29. }  
30. </style> 

广州网站建设

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

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

代码分析：示例4-2中，把box-orient属性值设置为vertical，表示垂直方向布局，并设置了兼容样式。为了显示整齐，同时也取消了内容栏目的宽度设置。由于是盒布局的方式，三个栏目将竖向显示，如图4-2所示。   广州网站建设