使用CSS+DIV布局网页初探

一、表格布局与CSS+DIV布局对比

表格布局方式实际上是利用表格元素具有无边框的特性，在网页中的各个元素按版式划分放入表格的各个单元格中，实现复杂的排版组合。

表格布局的代码最常见的是在HTML标签中间加入大量的设计代码，大量的样式设计代码混杂在表格和单元格中，使得可读性大大降低，维护成本也相对提高。尽管使用DW等网页制作工具进行可视化操作，但不可能帮助缩减代码或删除重复的代码，因而会出现许多没有任何意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢。

使用CSS布局可以从根本上解决表格布局带来的问题。CSS布局的重点不在表格元素的设计上，而是采用另外一元素DIV。DIV可以理解为层或者是块，是一种比表格简单的元素。DIV的功能仅仅是将一段信息标记出来用于后期样式的定义。通过使用DIV，可以将网页中的各个元素划分到各个DIV中，成为网页中的结构主体，而样式表现由CSS完成。DIV在使用时不再需要像表格一样通过单元格来组织版式，通过CSS强大的样式定义功能可以比表格更简单更自由地来控制页面版式和样式。

二、CSS+DIV布局网页的主要内容

要掌握使用CSS+DIV布局网页，首先要深刻理解盒子模型。盒子模型可以类比为装手机的盒子，手机可以当成盒子的内容部分，保护手机的海绵可以当成填充部分，手机盒子的棱角就是边框，两个手机盒子之间的距离就是边距。

盒子模型的宽度（高度）=内容的宽度（高度）+填充的宽度（高度）+边框的宽度（高度）+边距的宽度（高度）。盒子模型的宽度（高度）会随着里面内容和填充的增长而增大，这点有别于真实的盒子。

当了解完盒子模型后，就可以使用CSS+DIV对网页进行设计了。可以先把网页用DIV把所有的区块勾画出来，用CSS样式表里对这些DIV进行属性的设置，然后再布局嵌套里面的文字，图片。文字图片可以使用类进行控制，可以把它们也当成嵌套进去的盒子，不妨给它们加上边框，在盒子理论的引导下就能轻松对它们在网页中的位置进行设置。

使用CSS+DIV布局网页应用比较多的一项是使用项目列表制作导航条。可以先把项目列表里每行的文字变成超链接，并把这些超链接CSS样式表里区块的显示属性设置成块，然后把的内置设置清零，也就是把它CSS样式表列表的类型属性设置为无，将方框的填充和边框属性设置为零。这样就可以把，，三个元素看为三个嵌套的盒子进行操作了。

三、CSS网页布局分类

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

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

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

4.两列固定宽度。我们知道DIV用于对某一个区域的标识，两列的布局需要采用两个DIV。两列固定宽度的实现需要新的属性浮动。该属性用来控制对象浮动布局方式。浮动是CSS布局非常强大的布局功能，也是理解CSS布局的关键问题所在。在CSS中，包括DIV在内的任何元素都可以以浮动的方式进行显示。浮动属性有三个值，无表示对象不浮动。使用左对齐时，表示右侧对象将流到当前对象左侧。使用右对齐时，表示左侧对象将移动到当前对象的右侧。要实现两列的布局的话，定义左栏和右栏中的浮动属性都为左对齐。这样右栏的内容将流入到左栏的右边，并根据左栏的宽度，自动流入并贴至左栏，而贴近的程度则由左栏的右边距和右栏的左边距来控制，不需要一栏对象本身的宽度值。

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

将左栏的定位类型设置为绝对，并将上和左设置为0像素。将右栏的定位类型设置为绝对，并将上和右设置为0像素。将中间栏设置边界属性中左和右设置只要略大于左右栏宽度即可，用于实现两边自适应宽度。

四、结语

使用CSS+DIV布局网页可以从根本上解决表格布局带来的问题，能更加随意地对网页的结构进行设置和调整，真正地实现了网页结构、表现和行为的分离。它还提高了网站维护和修改的效率，提高了网页开发的效率和页面下载的速度，是网页布局发展的方向。

参考文献：

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

[2]何福男，密海英.网站设计与网页制作项目教程.电子工业出版社，2011-01.