设计元素决定了整体设计的视觉流向和层次结构，同时页面布局构建了整个网站的骨架，为页面中的元素提供了呼吸和生存的空间结构。但是设计网页布局确实非常复杂耗时，设计师的耐心在面对各种浏览器之间的不兼容以及多种风格和样式之间的利弊权衡过程中一点点被侵蚀。

好消息：已经有一些实用的指导可以帮助我们有效、可控地完成页面布局。本篇文章将会介绍多种类型的布局，并且分别介绍它们的优点和缺点，以及在何种情况下使用最好。同时，为了从总体上更好地理解CSS 布局，我们还会涉及一些主要技术和相关话题。探寻建立一个完美、普适布局的过程最后都归结为对现存的各种方法的比较，这个过程还会极大地受到设计师的技能，以及在像素级、自适应、灵活性布局间选择的影响。基本上，设计师有4 种可选择的布局类型：固定宽度布局、自适应布局、弹性布局和混合布局。这些布局的名字暗示了它们是否能够根据用户浏览器的尺寸调查自身的尺寸。

固定宽度布局

固定宽度的布局，就像它的名字一样，这是一种以像素为单位，宽度固定的静态布局。这类布局的外层宽度都是固定的，内部使用了百分比或者固定的宽度。设计师对内容区域周围的设计元素就有了更大的控制力，并且能够更精确地设计内容和导航的宽度。青岛网站设计师根据自己的经验和探索，可以对页面中的字体、图片和平衡关系做更精确的规划。固定宽度的设计可以确保所有设计中的平衡关系能够始终如一，不管用户使用什么样的浏览器，这种平衡永远不会被打破。

固定宽度布局正是由于其简洁、直观、易于实现和定制的特性，成为了一种非常流行的选择。使用固定宽度布局，我们可以确保在不同分辨率下设计效果保持一致。我们不用去猜测用户使用什么客户端，测试也变得简单，从而总体上缩短了开发时间。特别是固定宽度布局使用绝对的像素值，这比相对单位的百分比或者em（基于字体大小）更能让设计师感到舒服和直观。严格按照像素来定位内容区域也许就是固定宽度布局最为显著的特点。

固定宽度布局所用的宽度往往由显示器的平均分辨率决定。当下，大多数用户都已经拥有了1024×768 或更高分辨率的显示器，所以大多数设计师选择了使用960 或者1050 像素（px）作为固定宽度布局的宽度。这个宽度可以避免水平滚动条的出现，并且为多数浏览器中都会出现的20 像素的垂直滚动条留下了充足的空间。但是，对于低分辨率的屏幕，我们需要多加注意，如果固定宽度布局的宽度过宽，则会出现水平的滚动条。

固定宽度布局的一个优势在于设计要素易于定位，结果容易预测。确定了布局的宽度，定位元素就不会很复杂。另外，即使一个网站设计师考虑兼容最小的800×600 像素分辨率显示器，在高分辨率的情况下，内容区域仍会清晰可辨。那些从平面设计领域转行到基于网页的设计领域的设计师趋向于选择固定宽度布局，因为他们热衷于精确的控制，毕竟在传统的印刷设计中普遍采用绝对定位的方式。

固定宽度布局的缺点是没有充分利用用户显示器的全部显示区域。当然，屏幕的分辨率不一定会和浏览器的分辨率相同，因为很多“宽屏”不会最大化浏览器窗口[注释]。但是，如果用户有一个很大的宽屏显示器（例如，分辨率1900×1200 像素，浏览器分辨率1500 像素），屏幕中很大一部分没有被使用的假设就比较合理了。例如，浏览一个750 像素宽的固定布局，空白区域的水平宽度会和布局一样宽。

因此，圭谷网站建设研究中心固定宽度布局产生了过度的空白，扰乱了黄金比例、三分构图、总体平衡或者其他的设计原则。那些顺畅的纹理、图案和连续的图片也需要适应高分辨率的情况。最后，强烈推荐使用一个居中的DIV 来维护固定宽度设计中的平衡感。

#wrapper { margin:0 auto; }

这段代码可以实现这个效果。如果不这么做，在那些拥有高分辨率显示器的用户看来，整个布局会藏在左上的角落里。of respondents maximize windows”（456bereastreet.com）。

那么，如何确定什么尺寸是最合适的呢？许多用户有了很大的宽屏显示器，但是更多的人还在使用普通尺寸的显示器，还有一些仍在使用低分辨率显示器。不管是哪种情况，多数用户都会将窗口调整到他们喜欢的尺寸，而不是使用最大化的、标准的或者和屏幕分辨率成比例的窗口大小。

在实践中，为网站固定宽度布局找一个最佳的平衡点通常需要对网站的用户资

料进行深入的研究。通常的做法是评定访问者的浏览偏好，然后相应地调整设计。最常用的方法是分析网站的统计数据，找到使用最多的分辨率，并分析有多少用户使用较低的分辨率。根据通常的经验，可以将宽度设置在800～1000 像素之间。作为专业人士，我们必须为用户而不是我们自己创建合适的布局，即使我们的设计在高分辨率的宽屏笔记本上看起来很糟糕。

为了固定宽度，在 #container 层上设置width（宽度）属性，同时为左右两栏设置固定宽度。为了让头部和底部与容器等宽，设置宽度为100%（尽管在大多数的时候这个属性是不必要的，但这是一个很好的习惯，可以确保这两个区域确实与容器等宽）。另外，你还需要在其他类型的浏览器上进行测试，确保布局能够在不同的浏览器上正常显示。

对于固定宽度布局，人们普遍认为，从长远看来，其代码维护困难。如果设计中使用了固定尺寸的字体（尽管IE6 的用户完全不能改变文字的尺寸），有一天客户要求加大某些特定的设计元素的尺寸（例如文本），重新计算并修改文本的尺寸将会成为一场“噩梦”。一个比较好的方法应当是使用元素之间的比例关系来决定设计的尺寸（例如使用相对值），这就是接下来要介绍的灵活布局（自适应布局和弹性布局）。