[轉]CSS网站布局-译自CSS禅意花园

From : http://hi.baidu.com/liuyang1984/blog/item/28bba545456dee3a869473c7.html

 

 

网站布局

用CSS进行页面布局需要了解很多不同的技术，设计师也要有相当的创造性思维。无论选择固定布局或流式布局，无论作品靠左还是居中对齐，都需要对CSS布局有着良好的把握能力。

布局基础

在用CSS实现分栏布局之前，需要了解一些预备知识。CSS并没有提供诸如“left-column:200px”之类的直观分栏属性，因此我们必须要用一些技巧来突破这些限制。

实现分栏布局主要有两种方法，每种都各有利弊。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动（float）概念。浮动并不是一种用作定位的选项，而是为元素分配一定的空间，然后让文档中的其他部分将自动环绕在其周围。

绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。

绝对定位

与浮动相比，绝对定位显得易于理解。若在文档中依次声明了一系列元素（简称为常规文档流，normal document flow），就像下面这段HTML这样，那么这些元素将会按照声明次序显示在页面中—没有什么特别的。

<h1>This is a header</h1>

<p>This is some text</p>

<p>And even more text</p>

但若是用绝对定位将某一元素（这里是h1元素）移动到指定位置，那么该元素原来占据的空间将消失。绝对定位的元素也不会对其旁边的元素带来任何影响，就像文档中根本不存在这个元素一样（虽然实际上在页面中仍能看到）。实现绝对定位的代码如下：

h1 {position: absolute; top: 100px; }

绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除，所以它也不会为其他元素带来任何的影响。

绝对定位模型中有个极为有用的特性，那就是若某个绝对定位元素的容器也被定位过，那么该元素指定的top和left值将不会基于文档的根元素html（也就是浏览器窗口的左上角）计算，而是会基于其容器的左上角计算这个偏移量。

浮动

与绝对定位相比，浮动更加具有技巧性。

浮动的语法看似简单，但却并不那么容易完全掌握。

采用浮动实现布局的优势在于，浮动元素仍保留在文档流中，其周围环绕的元素也都清楚它的位置。

因为浮动布局依然遵循常规文档流，所以与绝对定位相比，浮动定位时HTML源文件中元素声明的位置显得格外重要。

但由于不同的浏览器对浮动的支持良莠不齐，所以浮动布局也并不是完美之选。因此，只有有了相当的实践经验之后，我们才能够在设计时游刃有余，合理地选择并使用上述两种布局方法。

绝对定位的补充

我们有理由相信，在许多情况下，绝对定位是最简单易学且最行之有效的一种布局方法。

但绝对定位也不是万能的，使用时也难免会遇到一些问题。对于那些需要考虑页脚，或是页面中其他元素需要了解其周围元素的页面布局来说，浮动则将成为不二之选，无论绝对定位还是浮动都谈不上完美，但它们却组成了CSS中的最具可操作性的布局工具。合理恰当地选择某种方法，或者组合使用这两种方法，将能够随心所欲地控制页面的布局—唯一可能让作品受到限制的就是创造力。

固定布局和流式布局

按照惯例，Web页面的布局可以分为两类：固定布局和流式布局。固定布局是指页面有着固定的宽度，居左、居右（这种情况比较少见）对齐，或者居中。但页面内容的宽度却不随着浏览器窗口的宽度变化而变化。

流式布局又叫不固定（fluid）布局或动态（dynamic）布局。这种布局的页面宽度用百分比指定，而不是某个固定的宽度，所以当浏览器窗口大小变化时，页面宽度也随之变化，始终保持填满浏览器。

我们同样也可以将固定布局和流式布局结合起来使用。例如对于某个三栏页面来说，左右两栏可能有着固定的宽度，但中间一栏的宽度却用百分比定义（或者不定义去宽度）。这样，作品将始终填满浏览器窗口，在改变浏览器窗口大小，或是在不同分辨率下浏览该页面时，中间一栏的宽度将相应的变大或变小。

就像许多其他流行的东西一样，人们对固定布局和流式布局的偏好和倾向也在不停地变化。在早期的Web设计中，固定布局曾风靡一时。但一段时间之后，人们开始认识到流式布局的好处，几年中流式布局又变得如日中天。

在过去的两年中，固定布局似乎再一次占据了上风—特别是在那些推崇标准的设计师眼中。在此时刻，几乎所有的业内领先者都在他们的网站或作品中使用了固定布局。这是个很有意思的倾向，之所以人们再次开始钟情于固定布局，是因为他们主要考虑了如下几个明显问题。

首先，也是最重要的一点就是，由于作品区域大小固定，所以设计师在控制固定布局页面时将更加游刃有余。即使对于图文混排的情况，一行中文字的长度同样易于控制。固定布局的再次流行在很大程度上正是因为这些原因。

当然，流式布局也有它的优势所在。填满浏览器窗口意味着最大限度地利用了空间，且与那些居左对齐的固定宽度作品相比，流式布局设计避免了另一半页面的空白，显得更为平衡。流式布局的劣势在于我们无法精确控制行长、页面布局以及元素的位置。即使对于那些资深设计师来说，这些问题也都值得仔细斟酌，且现今也没有什么完美的解决方案。

对于固定布局作品导致的视觉失衡问题，设计师一般通过让作品水平居中显示来解决，这样当改变浏览器窗口大小时，空白部分将始终平均分配在页面的左右两侧，不至于让页面的右侧显得太过单调。