[翻译]掌握CSS：网站布局
Sunday, 10. September 2006, 06:51:18
使用CSS的好处之一是你可以不通过使用标签（markup）就能很好地控制页面。但是CSS也赢得了一个不好的名声——不易学习，尤其是对于那些刚刚接触到这门语言的初学者们。这是因为有大量不同的网页布局方法。似乎每一个CSS作者都有自己独特的方法去建立多列设计（multicolumn layouts），而很多初学CSS的人也喜欢使用一些自己不明白工作原理的技术。“黑匣子”型布局方式虽然可以立竿见影，但对你的学习很有害。
所有的这些CSS布局技术都建立在3个最基本的概念上：定位（positioning）、浮动（floating）和边距操作（margin manipulation）。不同的技术其实并不是真的不同，只要你能理解核心的概念，你就能轻易地做出你自己的设计。
在这一节，你将学习到如何把网页内容居中显示。
所有的这些CSS布局技术都建立在3个最基本的概念上：定位（positioning）、浮动（floating）和边距操作（margin manipulation）。不同的技术其实并不是真的不同，只要你能理解核心的概念，你就能轻易地做出你自己的设计。
在这一节，你将学习到如何把网页内容居中显示。
居中布局
一行句子如果太长将变得非常不易阅读。当现在的显示器尺寸越来越大的时候，文字的可读性变得越来越重要。网页设计师们解决这个问题的一个方法就是去把网页内容居中显示。相对于占满屏幕的整个宽度，只占用屏幕的一部分来居中显示内容将会使每一行的文字变得更短，当然也变得更具可读性。
在现在，居中式布局非常时髦，所以如何去在CSS里把你的布局居中显示是每一个网页设计师都必须学习的东西。现在有两种方法去将这个页面居中：使用自动边距（auto margins）或者使用定位（positioning）和负边距（negative margins）。
使用自动边距（auto margins）来居中显示页面
比如你准备把下面的那个div外壳居中显示：
（译注：我们习惯编写一个div作为wrapper(外壳)，wrapper作用是包含页面中所有的设计元素并决定在body元素中的位置。后文类似wrapper div的地方我译为div外壳，而其它地方我保持原英文wrapper不变。）
<body> <div id="wrapper"> </div> </body>
要做到很简单，只需要把div元素的水平外间距（horizontal margins）设置为自动（auto）：
#wrapper {
width: 720px;
margin: 0 auto;
}
在这个例子里我定义了div外壳的宽度，这样它就能在800×600分辨率的屏幕里很好地显示。不过，你也可以把width设置为body标签的百分比大小，或者通过使用ems来让宽度自适应文字大小。
这种方法在一些现代浏览器里可以很好的工作。但是，IE5.x和IE6却不能识别自动边距。幸运的是，IE错误地理解了text-align: center，它把除了文字以外的所有内容都居中显示了。你可以利用这点把body标签下的所有内容居中显示，包括div外壳,然后再把div外壳里的内容设置为左对齐：
body {
<strong>text-align: center;</strong>
}
#wrapper {
width: 720px;
margin: 0 auto;
<strong>text-align: left;</strong>
}
对于这样使用text-align标签的方法我们称之为hack（相关链接：1,2）——一个公正无害的hack不会对你的代码产生不利的影响。现在wrapper可以在IE里像其他浏览器那样正常显示了（如图7-1）：
图7-1：使用自动边距让布局居中
最后还有一件事需要注意，以便让这个方法在所有浏览器里工作正常。在Netscape6里，当窗口的宽度小于wrapper的宽度时，wrapper左边超出范围的部分便不能显示。为了防止这件事发生，你需要给body元素定义一个最小宽度——这个最小宽度应该等于或者略大于wrapper元素的宽度：
body {
text-align: center;
min-width: 760px;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
现在，如果你让窗口宽度小于div外壳的宽度，窗口底部就会出现一个滚动条让你浏览全部内容。
使用定位和负边距来居中显示页面
使用自动边距是现在最核心的共同做法，但它并不能使用hack来让IE5.x正常显示。它同时也要求你为多种浏览器编写CSS。正是因为这个原因，很多人更愿意使用定位（positioning）和负边距（negative margins）来代替它。
你仍像刚才那样给wrapper定义一个宽度，然后你再把position属性设置为relative，并把left属性设置为50%。这样wrapper的左边距将在页面里居中显示：
#wrapper {
width: 720px;
position: relative;
left: 50%;
}
然而，你并不是想把左边距居中——实际上你是想把wrapper的中间部分居中。你只需要设置一个数值等于wrapper宽度一半的负边距便可以做到。它将会把wrapper一半的宽度移到左边，然后把wrapper居中显示：
#wrapper {
width: 720px;
position: relative;
left: 50%;
<strong>margin-left: -360px;</strong>
}
你可以凭个人喜好来选择居中布局的方法。不过，掌握所有的方法终归是对你有益的。
9.21
发现已经有人把此文翻译完了，在：http://hi.baidu.com/andycai/blog/category/design%5B1%2B1%5D
撞车了，晕……
WIDGETIZE
Anonymous # 6. October 2006, 00:01
火星了...
Miracle86 # 17. November 2006, 11:47