[XUL学习]XUL Tutorial(九) Box窗口布局

来源：百度文库 编辑：神马文学网 时间：2024/04/30 14:23:55

窗口布局是解决一个窗体中元素的摆放与对齐的问题。

在XUL最常用的就是box布局。

  • box
    通过修改orient为”horizental”，表示元素水平摆放。为”vertical” 表示元素垂直摆放。
  • hbox
    元素水平摆放
  • vbox
    元素垂直摆放
  • groupbox
    成组框。可以摆放多个元素。它会显示一个框，还可以有标题。
  • radiogroup
    与groupbox类似。只不过，里面所有的radio按钮都编成一个组，只能有一个被选中。

那么一个box布局的元素只能有一种摆放方向。但box中还可以嵌套box。这样，box+spacer+元素使用flex属性就可以很好的安排元素在一个窗体中的布局了。完善我们的findfile窗体为：

 
    Enter your search criteria below andselect the Find button to begin
    the search.
 
 
 
   
   
 

 
   

   

效果为：

box中的子元素如果设置为可变，那么当box发生变化时，子元素也会发生变化。当子元素未设置flex时，这个子元素在水平方面不会发生变化，但在竖直方面可能会发生变化。这是由于box有一个align的属性缺省为stretch，它表示其中的子元素会发生纵向扩展。那么align有以下几个值：

  • start
    如果是水平的box，它就是顶端对齐。如果是竖直的box，它就是左对齐。
  • center
    居中
  • end
    如果是水平的box，它就是底端对齐。如果是竖直的box，它就是右对齐。
  • baseline
    文本线对齐，只可以用在水平box上。
  • stretch
    自动扩展

可以看出align与box本身的方向相反。那么box还有一个同方向的属性设置是pack，它有以下几个值：

  • start
    对于水平的box，它就是左对齐。对于竖直的box，它就是顶端地齐。
  • center
    居中
  • end
    对于水平的box，它就是右对齐。对于竖直的box，它就是底端对齐。

因此pack和align是用来控制不同的方向。因此可以组合出9种不同的位置。

[XUL学习]XUL Tutorial(九) Box窗口布局 XUL(1) XUL简介 Ajax 框架ZK 2.1 发布 , Ajax,框架,ZK,XUL, , Dreamweaver网页制作教程：窗口布局 学习象棋布局 理解MFC控制条窗口布局原理之一 CCTV Box 保健BOX： CSS初学者对CSS盒模型（Box Model）的学习和理解 DSP tutorial HTML Tutorial Lucene Tutorial Gears Tutorial Tutorial - Makefile Gears Tutorial IT tutorial trados tutorial Ubiquity Tutorial 理解MFC控制条窗口布局原理之一 - 农民的萝卜地 - CSDNBlog CSS网页布局实例：div高度随窗口变化而变化 了解世界的窗口 学习英语的好机会 Div+CSS样式布局学习笔记(1) JavaScript学习（九）