1. 引言
基于CSS + Div的排版是当前网页设计中实现页面布局的常用技术。它使用
2. 使用举例
2.1. 固定宽度布局
一般情况下，此类页面布局的列都有固定的宽度，在这里以经典的三行两列宽度固定布局为例讲解固定分栏布局。
例题1：完成页面，效果如下图1。
对应的主要代码如下：
固定宽度布局分析：可以看到这是一个三行两列宽度固定布局。所有div元素宽度固定，页面显示效果固定不变，不会随着浏览器窗口大小变化而变化。
如上例，在浏览器窗口变小的情况下，显示如下图2所示，内容不能完整显示。
使用固定宽度布局实现的页面布局，在浏览器窗口大小变化的情况下，不能看到页面的完整结构 [2]，而使用变宽度布局方式可以弥补这个缺陷。
2.2. 变宽度布局
变宽度布局，可以使内容的整体宽度随浏览器窗口宽度的变化而同步变化 [3]。宽度变化有两种不同的情况，这里以两列为例。一种情况是两列按照一定比例同时变化的，另一种情况是一列固定，另一列变化宽度。
1) 等比例变宽布局
等比例变宽布局是各个Div区域的宽度会等比例适应浏览器窗口。
例题2：完成页面，效果如下图3，图4所示。
图3是大浏览器窗口下显示效果，图4是小浏览器窗口下显示效果。
在例题1的基础上，修改代码如下：
#container {
width: 80%;/*删除固定宽度，改为比例宽度*/
margin:0 auto;
}
#header {
……/*与前面相同*/
}
#mainbox {
float: left;
width: 66.9%;/*删除固定宽度，改为比例宽度*/
background-color: #0FF;
}
#sidebox {
float: right;
width: 33%;/*删除固定宽度，改为比例宽度*/
background-color: #FF0;
}
#footer {
…… /*与前面相同*/
}
……/*其余部分与上一例题相同*/
分析：在这个页面中，以比例宽度代替固定宽度，实现页面随浏览器窗口大小等比例变化。网页内容的宽度为浏览器窗口宽度的80%，页面中左侧和右侧的宽度保持在2:1的比例，可以看到无论浏览器窗口如何变化，它们都会等比例变化 [4]，如上图3是大浏览器窗口下显示效果，上图4是小浏览器窗口下显示效果。
2) 单列变宽布局
单列变宽布局是指单列宽度变化，而其他列保持不变，可以使用绝对定位法和改进浮动法实现 [5]。
例题3：使用绝对定位法完成单列变宽布局页面 [6]，结果如下图5，图6所示。
在上例的基础上，修改代码如下：
#container {
width: 80%;/*设置总宽度80%，这样总宽度会随浏览器窗口变化*/
margin:0 auto;
position:relative;/*设置为相对定位属性，使它成为其里面列的定位基准*/
}
#mainbox { /*删除宽度设置*/
float: left;
background-color: #0FF;
margin-right:300px; /*设置右外边距，使它不会与sidebox列重叠*/
}
#sidebox {
position:absolute;/*设置为绝对定位属性*/
top:30px; /*设置其紧贴container的上部*/
right:0; /*设置其紧贴container的右侧*/
width:300px; /*设置宽度为固定值*/
background-color: #FF0;
}
分析：在这个页面中，实现了右侧列单列宽度固定，而左侧列变化宽度的布局样式。可以看到上图5是大浏览器窗口下显示效果，上图6是小浏览器窗口下显示效果，右侧列宽度不变，左侧列随浏览器窗口大小而变化。
这种方式有种缺陷，当固定宽度列的高度大于活动列的高度时，会使固定宽度列与页脚部分重叠 [7]。如下图7所示。
解决方法是设置变宽度列的高度是最高的，就不会出现重叠现象。如上例题，将mainboxde的高度属性设置的足够大，就不会出现内容重叠了。效果如下图8所示。
以上页面的功能也可以使用改进浮动法实现，核心问题是实现变宽度列mainbox的宽度等于“100%-固定宽度列sidebox宽度”。
例题4：使用改进浮动法完成单列变宽布局页面 [8]，效果如图5，图6所示。
主要代码如下：
分析：通过在可变宽度列mainbox的外面又套了一层Div，即conternwrap标签，设置宽度为100%，设置margin-right的值为负的固定宽度列sidebox宽度数值，同时再将变宽度列mainbox的margin-right的值的设置为正的固定宽度列sidebox宽度数值，实现了mainbox列的“100%-固定宽度列sidebox宽度数值”的宽度。最大好处是可以不用考虑各列的高度，通过footer的clear属性设置，保证了不会发生重叠现象 [9]。
3. 总结
通过以上的例题和分析可以得出如下结论：固定宽度页面布局需要指定列的宽度，变宽度页面布局可以根据需要设置列的宽度比例，采用绝对定位法或改进浮动法来实现 [10]。
4. 结束语
本文对固定宽度页面布局和变宽度页面布局进行了举例和分析，深入剖析了使用CSS + Div如何固定宽度和变宽度，通过设置Div的宽度，采用数值单位设置可以实现固定宽度布局，采用等比例单位设置，绝对定位法或改进浮动法设置可以实现变宽度布局设置，在实际应用中，根据设计需求，采用不同的布局模式，设计出符合要求的页面布局，进而达到熟练掌握的目的。