📜  CSS-布局

📅  最后修改于: 2020-10-26 04:55:39             🧑  作者: Mango


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

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

  • 大多数浏览器都支持表,而CSS支持正在逐渐被采用。

  • 当浏览器窗口大小更改时,表更宽容-改变其内容并包装以适应相应的更改。 CSS定位往往是准确且相当不灵活的。

  • 与CSS规则相比,表更易于学习和操作。

但是每个参数都可以颠倒-

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

  • CSS比表格更精确,因此无论浏览器窗口如何,都可以按预期方式查看文档。

  • 跟踪嵌套表可能是一个真正的难题。 CSS规则往往组织得井井有条,易于阅读和更改。

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

CSS还提供了table-layout属性,以使您的表加载更快。以下是一个例子-

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

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

样本列布局

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

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


现在,我们将定义一个带有黄色的列,然后,将该规则附加到

-


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


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


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


如下完成源代码-



   
Final Content goes here...

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

它将产生以下结果-