网页设计中的自动布局

  • 2019-05-24 13:49:50
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

网页设计时,自动布局模型尽管没有固定布局那么快,不过对你来说可能更熟悉,因为这正是HTML 表使用多年的模型。在大多数当前用户代理中,只要表的width为auto就会触发使用这个模型,而不论table-layout的值是什么,不过这一点不能保证。

为什么自动布局比较慢,因为在用户代理査看完表的所有内容之前无法确定表的布局。也就是说,自动布局要求用户代理毎得到一个新单元格时都完成整个表的布局。这通常需要用户代理完成一些计算,然后再返回头来对表完成第二组计算。必须充分分析单元格的内容,因为与HTML表类似,表布局完全取决于单元格的内容。如果最后一行一个单元格中有一个400像素宽的图像,就会要求它上面的所有单元格(同列中的单元格)都是400像素宽,因此,必须计算每个单元格的宽度,而且在确定表的布局之前还必须做一些调整(可能触发另一轮内容宽度计算)。

这个模型的详细过程见以下步骤:

1、对于一列中的各个单元格,计算最小和最大单元格宽度。

a. 确定显示内容所需的最小宽度。要记住,内容可以流入多行,不过不能超出单元格框。如果单元格的width值大于最小可能宽度,则把最小单元格宽度设竖为该width值。如果单元格的width值为auto,最小单元格宽度则设置为最小内容宽度。

b. 对于最大宽度,要确定完全显示内容而且不包括换行符所需的宽;度(除非明确要求,例如指出可以有<br>元素),这个值就是最大单元格宽度

2、对于各一列,计算最小和最大列宽。

a. 列的最小宽度由该列中所有单元格的最小单元格宽度的最大值确定。如果为该列指定的width值大于列中所有最小单元格宽度,最小列宽则设置为这个width 值。

b. 要计算最大宽度,取该列中所有单元格的最大单元格宽度的最大值。如果已经为列指定了一个width值,而且大于该列中的所有最大单元格宽度,最大列宽则设置为该width值。这两种行为改写了传统的HTML表行为,对于HTML 表,会强制列扩展为与其最宽的单元格同宽。

3、如果一个单元格跨多列,最小列宽之和必须等于这个跨列单元格的最小单元格宽度。类似地,最大列宽之和必须等于跨列单元格的最大宽度。如果列宽之和与单元格宽度有差距,用户代理会把这个差距在所跨的列上平均分配。

另外,用户代理必须考虑到这样一个问题:如果一个列的Width值为百分数值,这个百分数要相对于表的宽度计算,即便它还不知道这个宽度是多少!它必须把这个百分数保存起来,在算法的下一部分使用。

此时,用户代理已经确定了各列可能是多宽或多窄。有了这个信息,可以再真正得出表的宽度。这个过程如下:

1、如果表的计算宽度值不是auto,将这个计算表宽度值与所有列宽再加上所有边框和单元格间隔之和相比较(设置为百分数宽度的列往往在此时计算具体宽度)。二者中较大的一个就是表的最终宽度。如果表的计算宽度值大于列宽、边框和单元格间隔之和,所有列的宽度都会增加一个相等的量,使得刚好将表完全填充。

2、如果表的计算宽度值为auto,通过将列宽、边框和单元格间隔相加来确定表的最终宽度。这说明表的宽度只能恰好显示其内容,而不能有多余,这类似于传统的HTML表。设置为百分数宽度的列会以这个百分数作为一个限制,不过用户代理有可能并不满足这个限制。

只有在完成了最后一步之后,用户代理才算真正建立了表的布局。

以下样式和标记有助于说明这个过程:

table{table-layout: auto; width: auto;

border-collapse: collapse;}

td {border: 1px solid;}

col#c3 {width: 25%;}

#r1c1 {width: 40%;}

#r2c2 {width: 50px;}

#r2c3 {width: 35px;}

#r4cl {width: 100px;}

#r4c4 {width: 1px;}

<table>

<colgroup>

<col id="cl"><col id="c2"><col id="c3"><col id="c4">

</colgroup>

<td id=" r1c1">1-1</td><td id="r1c2 ">l-2</td>

<ta id="r1c3">1-3</td><td id="r1c4">l-4</td>

</tr>

<tr>

<td id="r2c1">5-1</td><td id="r2c2">2-2</td>

<td id="r2c3">2-3</td><td id="r2c4">2-4</td>

</tr>

<tr>

<td id=" r3c1">3-1</td><td id="r3c2">3-2</td>

<td id="r3c3">3-3</td><td id="r3c4">3-4</td>

</tr>

<tr>

<td id="r4c1">4-1</td><td id="r4c2">4-2</td>

<td id="r4c3">4-3</td><td id="r4c4">4-4</td>

</tr>

</table>

下面依次在网页设计时考虑对各个列会发生什么:

对于第一列,唯一明确的单元格或列的宽度是单元格4-1的宽度,其width指定为100px。由于它的内容太短,所以最小和最大列宽都是100px (如果列中一个单元格的文本有很多句,则要把最大列宽增加到足以不换行显示所有文本所需的宽度值)。

第二列中声明了两个宽度:单元格1-2的width指定为40%,单元格2-2的width 指定为50px。这一列的最小宽度为50px,最大宽度为最终表宽度的40%。

对于第三列,只是单元格3-3有明确的宽度(35px),不过该列本身也指定了宽度,width为25%。因此,最小列宽为35px,最大宽度为最终表宽度的25%。

对于第四列,只为单元格4-4指定了宽度为1pxs这比最小内容宽度小,所以最小和最大列宽都等于单元格的最小内容宽度,计算为25像素。

用户代理现在知道了,这4个列的最小和最大列宽如下:


最小100px /最大100px

最小50px /最大40%

最小35px /最大25%

最小25px /最大25px

因此,在网页设计中,表的最小宽度就是所有这些列的最小宽度再加上边框之和,总共是215像素。表的最大宽度是130px +65%,最后得出371.42857143像素(假设130px表示总表宽度的35%)。将这个小数取整为371像素后,假设用户代理实际使用的就是这个宽度。因此,第二列将是148像素宽,第三列将是93像素宽。用户代理不必真正使用最大值,完全可以选择其他方案。

当然,这是一个相当简单直接的例子(不过看上去可能并非如此):所有内容基本上都有相同的宽度,声明的大多数宽度都使用像素数指定。如果表中包含间隔GIF、文本段落。表单元素等,要得出表的布局,过程可能要麻烦得多。


当前文章标题:网页设计中的自动布局

当前URL:http://www.lyjtt.cn/news/wzzz/3028.html

上一篇:网页设计中的固定布局

下一篇:网页设计中的高度和对齐

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)