布局

基本概念

布局

布局概念

1. 什么是布局

按照维基百科的解释，布局是页面中元素相互位置关系的排列方案。布局好比是建筑里的框架，而元素则相当于建筑里的砖瓦。元素按照布局的要求依次排列，就组成了用户所看见的界面。

2. 观察布局

学习布局，应该首先从观察别人的布局开始，打开一个页面，观察这些元素分为几个大块，每块中元素又如何排列，并进一步思考作者为什么这样安排元素分布——也就是思考给定页面布局的目标或者说背后的目标流程。

比如你现在正在看的这个页面，它是由顶部栏，左侧菜单栏，正文区域和最后的底部栏组成的。顶部栏水平排列logo、章节名、搜索按钮和目录按钮，菜单栏竖直排列每一小节的跳转链接，底部栏也是采用了水平排列的方式。

为了方便您观察，在页面上按动"Ctrl+Shift+C"，进入谷歌浏览器元素选择模式，然后滑动鼠标，鼠标下的元素会变色，这方便您直观的观察布局——也就是元素分布方案。

3. 实现布局

在有了明确的布局方案之后，还需要实现之——也就是告诉计算机，您设计的布局方案是什么。因此，WIDE提供了几个布局小工具，每个小工具支持一种元素排列规则。因此，您需要首先熟悉常见的布局工具，然后在设计布局方案时，直接使用布局工具来描述您的布局方案。

布局工具本质上类似一种种语言，实现一个布局，其实就是采用布局工具的语言来描述您的布局方案。正如现实世界中，会有很多不同的语言，WIDE也提供了很多布局工具，每种工具有自己擅长描述的布局方案。幸运的是，您可以混合使用各种不同的布局工具，综合描述您的布局方案。

WIDE提供的布局工具中，最重要的是行列布局以及文档流布局。行列布局将整个页面看作表格，用于宏观层面的布局。而文档流布局将页面看作我们通常的文档，从左到右，从上到下自然排列，因此适合于细节层面的布局安排。WIDE页面编辑首先看到的界面就是行列布局，点击编辑按钮将进入对应元素的文档流布局界面。

4. 布局与元素

布局在HTML规范中属于元素的外观样式，也是通过CSS来控制的。换言之，您可以直接通过样式设定任意元素相对其它元素的位置安排。由于元素很多，这会引发巨大工作量，在WIDE中，布局的实现是使用单独的元素来实现的，由WIDE维护这些布局元素的外观样式可以简化很多工作。在行列布局界面中，灰色编辑按钮会忽略布局元素只需编辑内容元素，而黄色编辑按钮允许您像编辑其它元素那样编辑布局元素。

布局元素也是元素，因此元素的特性对布局元素依然有效。由于父元素的外观样式可以影响子元素，因此多个布局可以混用，并且子布局作为一个标准元素被父布局所影响。

在WIDE中，相对定位是直接以外观样式的形式提供出来的，这会为您的页面带来层的概念。

5. 层的概念

网页是由1至n层的复合效果。也就是说，网页不是只有一个平面，我们在网页上看到的元素可能是第二层，可能是一层和二层的叠加效果等等。网页的层使用z-index属性标识。z-index可以是任意整数，如 -3, -1, 0, 1, 2, 10000等。可以通过在下面输入框内输入z-index值来实际查看具体的效果，下面例子中初始的z-index值分别为4，5，6。若只其中修改一个或者两个的值，未输入数字的z-index值会恢复默认值。示例：

第一层z-index值：

第二层z-index值：

第三层z-index值：

第一层

第二层

第三层

6. 层的应用

在wide中可以通过相对布局或模式对话框引入层的概念，对层加以应用。在页面编辑界面中拖拽进一个布局，点击右键将当前行转化为层即可以将这个布局当做层来进行一系列操作。转化方式如下图所示：

WIDE提供的布局工具

1. 文档流布局

文档流布局是一种自然布局，不对布局做任何修饰，让元素自动从左往右自然排列，至行尾时直接换到下一行继续排列元素。文档流布局适用于内容自然排列情况下的页面，是浏览器的内置布局，在wide里对应的界面为细节编辑界面。

在文档流布局中点击元素编辑按钮切换到元素编辑模式时，会发现元素是由诸如<p>、<div>、<span>这类的元素包含在内，他们之间的区别只是本身自带的默认样式不同，如果需要，可以将<p>、<div>、<span>等元素互相切换调整，以此来微调布局。

段样式：可以承载一个段落的样式称为段样式，即CSS中提到的block，如上文中提到的<p>、<div>都是段样式。

字样式：所承载的元素以行内样式的形式提现称为字样式，即CSS中提到的inline，如上文中提到的<span>是一种字样式。

2. 表格布局

表格布局就是将布局空间划分成一个n*n的表格，以表格的形式呈现页面内容。在表格内部可以填充任何元素，如<p>、<div>、<span>、图片以及其他表格等。相对于其他布局，表格布局的缺点是不能做到自适应，为了解决这个问题，引入了行列布局。

3. 行列布局

行列布局是将布局空间先按行分割（行数可以随意设置），将分割出来的行按列分割（列数可以随意设置，列在行中），分割出了很多大小不一的布局空间。

行列布局和表格布局相似，区别在于行列布局可以相对于屏幕自适应，根据屏幕大小自动重排布局，而表格布局无法做到这一点。

行列布局是一种比较重要的布局，在wide中与其对应的界面是页面编辑界面，可以从左侧直接拖拽行列布局进入容器内进行布局设置。

4. 相对定位

相对定位是元素相对于父容器进行定位的一种布局方式。

容器是一种特殊的元素，其内部可以包含各种元素。这些元素称为这个容器的子元素，这个容器成为这些元素的父容器。

当元素相对于父容器进行相对定位时，该元素相对原本位置会有所偏移，与其它元素发生重叠，也就是两个元素在同一个位置展示，元素间发生了分层。而这个位置到底展示哪个元素，是层（z-index）来控制的，层可以用数字区分，该位置显示的是层级大的元素。如果A、B两个元素占据了同一个位置，A的层是z-index:10，而B的层是z-index:11，那么这个位置显示B元素。

绝对定位是元素相对于屏幕进行定位的一种布局方式。同样会存在元素间重叠的问题，依旧是根据元素的层级大小，决定最终呈现层级最大的元素的内容。元素采用绝对定位布局，相对于屏幕偏移量为0，元素的宽和高都设置成100%，该元素最终在页面上将会以全屏的表现形式呈现出来。

5. 栅格布局

栅格布局和行列布局类似，是将行划分成固定的12列，每一个布局空间可以占n列，最多只能占12列，也可以将行划分成m（m<=12）个布局空间，每个布局空间可以占k（k<=12）列，该行中的所有布局空间所占的列数之和不能超过12列，但是可以少于12列，这就是栅格布局。栅格布局适用于内容按一定的要求自动填充满页面情况下的页面。