在网页设计中,固定布局模型的速度之所以快,主要原因是布局不依赖于表单元格的内容。其布局是根据该表以及表中列和单元格的width值决定的。
在网页设计时固定布局模型的工作包括以下简单步骤:
1、width属性值不是auto的所有列元素会根据width值设置该列的宽度。
2、如果一个列的宽度为auto——不过,表首行中位于该列的单元格width不是auto——则根据该单元格宽度设置此列的宽度。如果这个单元格跨多列,则宽度在这些列上平均分配。
3、在以上两步之后,如果列的宽度仍为auto,会自动确定其大小,使其宽度尽可能相等。
此时,表的宽度设置为表的width值或列宽度之和(取其中较大者)。如果表宽度大于其列宽总和,将二者之差除以列数,再把得到的这个宽度增加到每一列上。
在网页设计时,这种方法的速度很快,因为所有列宽度都由表的第一行定义。首行后所有行中的单元格都根据首行所定义的列宽确定大小。后面这些行中的单元格不会改变列宽,这意味着为这些单元格指定的width值都会被忽略。如果一个单元格的内容无法放下,该单元格的overflow值将决定单元格内容是剪裁。可见还是生成一个滚动条。
考虑以下样式和标记:
table{table-layout: fixed; width: 400px;
border-collapse: collapse;}
td {border: 1px solid;}
Col#c1 {width: 200px;}
#r1c2 {width: 75px;}
#r2c3 {width: 500px;}
<table>
<colgroup>
<col id="cl"><col id="c2"><col id="c3"><col id="c4">
</colgroup>
<tr>
<td id="rlcl">l-l</td><td id="r1c2">l-2</td>
<td id="rlc3">l-3</td><td id="rlc4">1-4</td>
</tr>
<tr>
<td id="r2cl">2-l</td><td id="r2c2">2-2</td>
<td id="r2c3">2-3</td><cd id="r2c4">2-4</td>
</tr>
<tr>
<td id=" r3c1">3-1</td><td id=" r3 e2">3-2</td>
<Cd id="r3c3">3-3</td><td id="r3c4">3-4</td>
</tr>
<tr>
<td id="r4cl">4-l</tdxtd id="r4c2">4-2</td>
<td id="r4c3">4-3</tdxtd id="r4c4">4-4</td>
</tr>
</table>
注意,在网页设计时,使用固定宽度布局模型时,没有必要非得为表指定一个显式宽度,不过如果指定一个宽度确实有所帮助。例如,给定以下样式,用户代理可能计算出表的宽度比父元素的width窄50像素。它就会在固定布局算法中使用计算得到的这个宽度:
table{table-layput: fixed; margin: 0 25px;width: auto;}
当前文章标题:网页设计中的固定布局
当前URL:http://www.lyjtt.cn/news/wzzz/3027.html
上一篇:网页设计中的表大小
下一篇:网页设计中的自动布局