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

<vbox>
  <button id="yes" label="Yes"/>
  <button id="no" label="No"/>
  <