CSS - 布局

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

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

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

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

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

但这些论点中的每一个都可以颠倒 -

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

  • CSS 比表格更精确，无论浏览器窗口如何，都可以按照您的预期查看文档。

  • 跟踪嵌套表可能是一件非常痛苦的事情。CSS 规则往往组织良好、易于阅读且易于更改。

最后，我们建议您使用对您有意义的技术，并使用您所知道的或以最佳方式呈现您的文档的技术。

CSS 还提供表格布局属性，使表格加载速度更快。以下是一个例子 -

<table style = "table-layout:fixed;width:600px;">
   <tr height = "30">
      <td width = "150">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "250">CSS table layout cell 3</td>
   </tr>
</table>

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

列布局示例

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

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

<style style = "text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

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

<style style = "text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

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

<style style = "text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

现在，我们将在 level1 中再嵌套一个分区，并且我们将仅更改背景颜色 -

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

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

<style style = "text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

完成源代码如下 -

现场演示 
<style style = "text/css">
   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;}
</style>
<body>
   <div id = "level0">
      <div id = "level1">
         <div id = "level2">
            <div id = "level3">
               <div id = "main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

同样，您可以在页面顶部添加顶部导航栏或广告栏。

它将产生以下结果 -