XUL 教程 分组方式

　　箱体入门

　　在XUL里主要的布局叫做“箱状模型”。这个模型允许你把窗口分割成连续的盒子。在盒子里面元素可以按水平或垂直方向排列。通过将一系列的箱子结合在一起，使用定位格和元素的flex属性，你可以控制窗口的布局。虽然盒子是XUL元素布局的基本部份，它很少遵循的惯例。一个盒子可以将它的子盒布置在两个方向之一，水平或垂直。水平盒子将它的元素进行水平排列，而垂直盒子将它的元素进行垂直排列。。你可以把一个盒子想像HTML表格中的一行或一列。除了可以在子元素中放置不同的属性还可以使用一些样式表属性来控制子盒子的精确定位和尺寸。

　　箱体例子

　　下面是箱体的基本语法:

<hbox>
　<!-- horizontal elements -->
</hbox>
<vbox>
　<!-- vertical elements -->
</vbox>

　　hbox 元素用来创建一个水平方向的盒子。每个放在hbox中的元素将被水平地排成一行。vbox 元素用来创建一个垂直方向的盒子。添加进来的元素将会被垂直地放在前一个的下面。

　　同样有一个普通的box 元素默认是水平方向的，和hbox的意思相同。然而，你可以使用orient 属生去操作盒子的方向。你可以设置这个属性的值为horizontal 去创建一个水平的盒子和vertical去创建一个垂直的盒子。

　　因此，下面两行的效果是一样的:

<vbox></vbox>
<box orient="vertical"></box>

　　下面例子展示怎么垂直放置三个按钮。

　　例1 : Source View