CSS中固定宽度布局的详细教程

.布局前的认知
1.1 三种基本方案

多栏布局有三种基本的实现方案：固定宽度、流动、弹性。

    固定宽度。布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到 1100 像素宽（最常见的是 960 像素）。

    流动。布局的大小会随用户调整浏览器窗口大小而变化。（结合 CSS 媒体查询，能够适应最大和最小的屏幕，业界称之为 响应式设计。）

    弹性。在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化。（实现太过复杂，不多介绍。）

1.2 布局高度

多数情况下，布局中结构化元素（乃至任何元素）的高度是 不必或者不应该设定的。因为保持元素 height 属性的默认值 auto 不变，才能使元素根据自己包含内容的增加而在垂直方向上扩展。这样扩展的元素会把下方的元素向下推，而布局也能随内容数量的增减而垂直伸缩。
1.3 布局宽度

为了使浏览器窗口宽度合理变化，布局能作出适当的调整，我们 需要精细地控制 布局宽度。
2.三栏-固定宽度布局

结构如下：

上代码：