CSS - 布局

希望您对HTML表格非常熟悉，并且您可以高效地使用HTML表格设计页面布局.但是你知道CSS还为文档中的定位元素提供了大量的控件.由于CSS是未来的潮流，为什么不学习和使用CSS代替表格进行页面布局？

以下列表收集了一些优点和缺点两种技术 :

• 大多数浏览器都支持表格，而CSS支持正在慢慢采用.

• 当浏览器窗口大小发生变化时，表格更加宽容 - 变形其内容并换行以相应地适应更改. CSS定位往往是精确且相当不灵活的.

• 表比CSS规则更容易学习和操作.

但这些参数中的每一个都可以反转 :

• CSS对于Web文档的未来至关重要，并且将得到大多数浏览器的支持.

• CSS比表更准确，允许您按照预期查看文档，无论浏览器窗口如何.

• 跟踪嵌套表格可能会非常痛苦. CSS规则往往组织良好，易于阅读，并且易于更改.

最后，我们建议您使用任何有意义的技术给你并以最好的方式使用你所知道的或以你的文件呈现的文件.

CSS还提供了 table-layout 属性，使你的表加载速度更快.以下是一个示例 :

         CSS table layout cell 1      CSS table layout cell 2      CSS table layout cell 3   

您会注意到大型桌面的好处.使用传统的HTML，浏览器必须在最终渲染表之前计算每个单元格.但是，当您将表格布局算法设置为 fixed 时，它只需要在渲染整个表格之前查看第一行.这意味着您的表需要具有固定的列宽和行高.

示例列布局

以下是创建简单列布局的步骤使用CSS :

设置完整文档的边距和填充如下:

现在，我们将定义一个黄色的列，稍后，我们会将此规则附加到< div>  :

到目前为止，我们将有一个带有黄色主体的文档，所以现在让我们在level0 : 中定义另一个分区;

现在，我们将在level1中再嵌套一个分区，我们将只更改背景颜色和减号;

 < style style ="text/css"> <！ -  ＃level2 { background:＃FFF3AC; }   - > 

最后，我们将使用相同的技术，在level2中嵌套level3分区以获得右列的可视布局 :

完成源代码如下 :

   body {      margin:9px 9px 0 9px;      padding:0;      background:#FFF;   }   #level0 {background:#FC0;}   #level1 {      margin-left:143px;      padding-left:9px;      background:#FFF;   }   #level2 {background:#FFF3AC;}   #level3 {      margin-right:143px;      padding-right:9px;      background:#FFF;   }   #main {background:#CCC;}                                                               Final Content goes here...