初探ＣＳＳ＋ＤＩＶ网页布局

王林祺

[摘要]主要从网页布局的标准，从传统表格布局的缺陷，到CSS布局的优点，以及CSS布局常见布局方式的分析进行论述。

[关键词]CSS DIV 布局 WEB标准

中图分类号：TP3文献标识码：A文章编号：1671－7597（2009）0520045－01

基于WEB标准的网站设计的核心在于如何使用众多WEB便准中的各项技术来达到表现与内容的分离，即网站的结构、表现和行为三者的分离。只有真正实现了结构分离的网页设计，才能真正意义上的符合WEB标准的网页设计。

一、传统表格布局的缺陷

传统表格布局方式实际上是利用表格元素具有无边框的特性。由于表格元素中可以显示表格的边框为0，即不显示边框，因此可以在网页中的各个元素按版式划分放入表格的各个单元格中，从而实现复杂的排版组合。

表格布局的代码最常见的是在HTML标签中间加入大量的设计代码，如width=100%，border=0等，表格布局的混合代码就这样编写的。大量的样式设计代码混杂在表格和单元格中，使得可读性大大降低，维护成本也相对提高。尽管使用DW等网页制作工具进行可视化操作，但不可能帮助缩减代码或删除重复的代码。

复杂的表格设计使得设计极为不易，修改更为复杂，最后生成的网页代码除了表格本身的代码，还有许多没有任何意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢。

二、CSS布局

使用CSS布局可以从根本上解决表格布局带来的问题。CSS布局的重点不在表格元素的设计上，而是采用另外一元素DIV。DIV可以理解为层或者是块。DIV是一种比表格简单的元素，从语法上只有

这样简单的定义。DIV的功能仅仅是将一段信息标记出来用于后期样式的定义。通过使用DIV，可以将网页中的各个元素划分到各个DIV中，成为网页中的结构主体，而样式表现由CSS完成。

DIV在使用时不再需要像表格一样通过单元格来组织版式，通过CSS强大的样式定义功能可以比表格更简单更自由地来控制页面版式和样式。

三、CSS入门的几个误区

（一）不要用传统的表格思维来嵌套DIV。CSS布局就是将原来用table的地方用DIV来替代，原来是表格嵌套，现在是DIV嵌套。这种观点是错误的。

使用WEB标准的目的是分离内容和表现。使用CSS布局，内容仅仅是一次罗列下来，只有结构，没有任何的样式。通过CSS样式定义每一块中的内容，才表现出来。这样制作的页面才是内容和表现分离，也就是说，当去掉CSS文件后，剩下的就只有内容。这样才能在手机、PDA上阅读，才能随时修改CSS实现改版。

（二）不必为每块内容都建立ID。我们知道内容都是有结构的，理解表现和结构相分离，相同的结构的内容我们可以用同一个样式来定义，比如相当级别的标题、正文和图片。对于多次引用的样式可以用Class来定义而不需要每个都用ID；另外也不是说一定要用

，也可以使用

来代替，同样是块级元素，一样具有盒模型的7个参数，

仅仅方便浮动。

四、CSS网页布局分类

1．一列固定宽度。一列布局是所有布局的基础，也是最简单的布局形式，即一种固定宽度的布局样式。DIV在默认状态下，宽度将占据整行的空间，因此当设置了宽度属性后，DIV宽度将变为设置的宽度。

2．一列自适应。自适应布局是网页设计中常见的布局形式。自适应的布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。实际上DIV在默认状态下展区整行的空间，便是宽度100%的自适应布局的表现形式。一列自适应布局只需要将宽度由固定值改为百分比的形式即可完成。

CSS的大部分数值作为参数的样式属性都提供百分比值。Width（宽度）属性也不例外。如将宽度设置为80%，则DIV的宽度就变为浏览器宽度的80%，当浏览器窗口的大小调整时，其宽度还将维持在浏览器当前宽度比例的80%。

3．一列固定宽度居中。页面整体居中是网页设计中常见的形式，在传统表格布局中，我们可以使用表格的 align属性来实现。DIV本身也支持该属性，但在CSS布局中为了实现表格与内容分离，因此在设置居中属性时，通过margin属性来控制对象的上下左右四个方向的外边距。Margin属性中可以直接使用数据，也支持“auto”，即自动判断边距。如果将左右边距设置为auto，浏览器就会将DIV左右边距设置为相同，从而实现居中效果。

4．两列固定宽度。我们知道DIV用于对某一个区域的标识，两列的布局需要采用两个DIV。两列固定宽度的实现需要新的属性float。该属性用来控制对象浮动布局方式。

Float是CSS布局非常强大的布局功能。也是理解CSS布局的关键问题所在。在CSS中，包括DIV在内的任何元素都可以以浮动的方式进行显示。

浮动是一种非常先进的布局方式，它能够改变页面中对象的前后流动顺序，这样可以使内容的排版变得简单而且具有良好的伸缩性。

Float属性有三个值，none表示对象不浮动。使用left时，表示右侧对象将流到当前对象左侧。使用right时，表示左侧对象将移动到当前对象的右侧。

要实现两列的布局的话，定义左栏和右栏中的float属性都为“left”。这样右栏的内容将流入到左栏的右边，并根据左栏的宽度，自动流入并贴至左栏，而贴近的程度则由左栏的右边距和右栏的左边距来控制，不需要一栏对象本身的宽度值。

浮动式布局使得页面的大部分内容都可以由浏览器来自动调试之间的关系，使我们能够专注于样式设计而非其相互之间的浮动关系，我们只需要简单地设置浮动方向便可以完成对象的布局分布。

5．三列浮动中间列宽度自适应。如果要求左栏和右栏固定宽度，中间栏需要在左栏和右栏中间，并根据左右栏的宽度自动调整间距。需要实现这样的布局，就需要使用position属性来定位。

将左栏的position设置为absolute，并将top和left设置为0px。将右栏的position设置为absolute，并将top和right设置为0px。将中间栏设置margin属性中left和right设置104px（该参数根据左右栏的宽度设置，只要略大于左右栏宽度即可），用于实现两边自适应宽度。

五、结语

使用CSS+DIV布局，真正实现了结构、表现和行为的分离。提高了网页开发的效率和页面下载的速度，提高了网站维护和修改的效率。

参考文献：

[1]谢君英，CSS与Dreamweaver CS3完美网页设计，北京：人民邮电出版社，2009.1.

[2]王海涛，CSS权威教程（第3版），北京：清华大学出版社，2008.9.