Page Layout

在过去，人类出现之前的猿类使用 HTML 表格来布局网页。真搞笑，对吧？！但 CSS，就像《2001 太空漫游》中的巨石一样，很快就出现了，改变了这一切。

使用 CSS 进行布局很简单。你只需截取页面的一部分，然后将其随意放置。你可以 绝对定位 或 相对定位 将这些块放置在其他块的旁边。

定位

position 属性用于定义一个盒子是绝对定位、相对定位、静态定位还是固定定位。

static 是默认值，它会在 HTML 中元素正常出现的顺序中渲染一个盒子。
relative 与 static 非常相似，但可以使用 top、right、bottom 和 left 属性将盒子从其原始位置偏移。
absolute 会将一个盒子从 HTML 的正常流中移除，并将其置于一个独立的世界中。在这个奇妙的小世界里，可以使用 top、right、bottom 和 left 将绝对定位的盒子放置在页面的任何位置。
fixed 的行为类似于 absolute，但它会相对于浏览器窗口（而不是网页）绝对定位一个盒子，因此即使页面滚动，固定定位的盒子也会始终停留在屏幕上的相同位置。

使用绝对定位进行布局

如果你有类似下面的 HTML，就可以使用绝对定位创建一个传统的两栏布局。


<div id="navigation">
    <ul>
        <li><a href="this.html">This</a></li>
        <li><a href="that.html">That</a></li>
        <li><a href="theOther.html">The Other</a></li>
    </ul>
</div>

<div id="content">
    <h1>Ra ra banjo banjo</h1>
    <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
    <p>(Ra ra banjo banjo)</p>
</div>

如果你应用以下 CSS：


#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#content {
    margin-left: 200px;
}

你会看到这会将导航栏定位在左侧，并将宽度设置为 200 像素。由于导航是绝对定位的，它与页面其余部分的流程无关，因此只需将内容区域的左边距设置为与导航栏的宽度相等即可。

太简单了吧！而且你不限于这种两栏布局。通过巧妙的定位，你可以排列任意数量的块。例如，如果你想添加第三列，可以向 HTML 中添加一个“navigation2”块，并修改 CSS 为：


#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#navigation2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
}

#content {
    margin: 0 200px; /* setting top and bottom margin to 0 and right and left margin to 200px */
}

绝对定位盒子的唯一缺点是，由于它们存在于自己的世界里，因此无法准确确定它们的结束位置。如果你使用上面的示例，并且所有页面的导航栏都很小，内容区域很大，那么你可以应付，但特别是当使用相对值作为宽度和尺寸时，你常常不得不放弃将任何东西（例如页脚）放置在这些盒子下面的希望。如果你想这样做，一种方法是浮动你的块，而不是绝对定位它们。

浮动

浮动一个盒子会将其推向一行中的右侧或左侧，周围的内容会环绕它。

浮动通常用于在页面内移动较小的块，例如将导航链接推到容器的右侧，但它也可以用于较大的块，例如导航栏。

使用 float，你可以进行 float: left 或 float: right。

使用相同的 HTML，你可以应用以下 CSS：


#navigation {
    float: left;
    width: 200px;
}

#navigation2 {
    float: right;
    width: 200px;
}

#content {
    margin: 0 200px;
}

然后，如果你不希望下一个盒子环绕浮动对象，可以应用 clear 属性。

clear: left 将清除左浮动的盒子。
clear: right 将清除右浮动的盒子。
clear: both 将清除左右浮动的盒子。

所以，例如，如果你想在页面中添加一个页脚，可以添加一个 HTML 块……


<div id="footer">
    <p>Footer! Hoorah!</p>
</div>

……然后添加以下 CSS：


#footer {
    clear: both;
}

这样你就完成了。页脚将显示在所有列的下方，而不管其中任何一列的长度如何。