分解代码

这段标记并不是特别地值得注意——只是在每个主要页面元素的外面（标题、页脚、工具条和主内容）包围着 div。每个 div 有一个 id，相应的 CSS 样式可以使用这个 id 引用它。只有一个额外的 div（div id="columns"）包围着三列内容区域。在 Internet Explorer 中将页脚放在三列中最长一列的下面是必要的。

像平时用法一样，CSS 代码完成所有的重要任务。首先它完成一些家务管理。Body样式将页面的边距设为零，h2, h3样式将默认间距设为零。否则的话，这该布局周围就会有一个边距，而在某些浏览器（比如 Netscape 和 Mozilla）中标题将会在在主内容和页脚的上面产生一个空白区域。

样式div#head为标题 div 设置一个明确的高度和宽度。标题使用 position: absolute, top: 0px和 left: 0px规则显式地定位在页面的左上角。规则 position: absolute是非常重要的，因为定位属性（top、left、right、bottom）在常规（静态）定位时会被忽略。然而要记住，任何绝对定位的元素都会从常规的页面流中被移除掉，而属于页面流的元素将会像绝对定位元素不存在一样被定位到页面上。

样式 div#columns控制 div 的格式，使其充当三个列的容器。它使用 position: relative创建属于常规页面流的一个元素（它会根据其内容进行扩展和适应，因而影响其它元素的定位），但是它将从其常规位置偏移。规则 top: 100px提供一个偏移量，将列容器向下推，使其覆盖标题。

规则 div#side1控制第一个工具条列的样式。它设置该列的宽度（width: 150px）并使用绝对定位将该列放置在其父元素的左上角。父元素是该列的 div，如果该元素使用相对于 body 元素的相对定位，那么它将解释 top: 0px规则而非你所期望的 100px设置。规则 div#side2以同样的方式设置左工具条所用的列。div#side1和 div#side2唯一不同之处是背景色和 left: 600px规则，后者将该列定位在其它两列的右边。

样式 div#content中的主内容所用的列的样式控制与其它两列的样式控制相似。它显式地设计宽度（width: 450px）并使用 left: 150px和 top: 0px规则在其父元素（包围着三个列的 div）内定位该列。主要的不同之处在于 position: relative规则。我们使用相对定位使主内容列可以影响其父元素（包围着三个列的 div）的尺寸并因此影响页脚元素的尺寸。

样式 div#foot设置页脚的宽度（width: 750px），该样式还包含一个 clear: both规则，该规则保证它接在其它元素下面，而不是旁边。由于它使用相对定位，所以它在页面上的位置是由其它元素的流所决定的，在这里具体是由包围着三个列的 div 所决定的。规则 margin-top: 100px是一个很重要的细节，它防止页脚被上面的列所覆盖。这些列在页面流中从它们的常规位置偏移，从而为绝对定位的标题以及需要相应偏移的页脚腾出空间。

上一页  [1] [2] [3] [4] [5] 下一页