centering align 

CSS其中一个优点是它能够在不使用表现的标记来控制页面的layout。所有的css layout技术都依赖于三个基本的概念：positioning，floating和margin的操作。

长度过长的内容读起来很困难，特别是现代的显示器的宽度越来越大，屏幕的可读性问题就变得越来越重要了，设计师解决这个问题的方法就是把他们的设计居中显示而不是全屏显示。居中的设计只是跨越屏幕的一部分，以创建一个较短的和易于阅读宽度。

居中设计在现在是一种很流行的方法，因此，学习怎样在css里使用居中显示也是很多开发者想学的第一样东西。居中设计有两个基本的方法：一种是使用auto margins，另一种是使用positioning 和负margins，下面介绍这两种方法。 

 

1. auto margins

<body>
<div id=”wrapper”>
</div> 

水平居中div元素的css为：

#wrapper{ width:720px; margin:0 auto; border:5px #666 solid; }

水 平居中我们就可以更灵活地控制div里的内容显示了，我们也可用百分比和用字符数单位em来表示div的宽度了。上面的代码在现在的浏览器里可以工作得很 好，但是在IE 5.X和IE 6上就不能正常工作（居左显示），幸运的是IE误解了text-align:center，它会将所有元素都居中而不只是文本，所以我们可以这样： 

body{text-align:center;}
#wrapper{ width:720px; margin:0 auto; border:5px #666 solid; text-align:center;}

这是一个hack的方法，这个fairly innocuouse（无害的）hack也不会对你的代码有不利的影响，现在在IE上可以居中显示了。

2. positioning 和负 margins 

如果你不想法用之前的方法，认为不必多加一个hack，那可以用下面这个方法，首先将div的左边居中，然后再将div的margin-left设置为它的宽度一半的负数，就这样的简单：

#wrapper { width: 720px; position: relative; left: 50%; margin-left:-360px; border:5px #666 solid;}

方便吧，快去用到你自己的设计中去吧。 


float-based layout

创建css为基础的layout，可以使用positioning和负margins，但是我发现用float-based layout方法更加容易。而使用float-base layout最重要是需要使用clear（清除）the floats。

两列floated layout：

要使用floats来布局两列的设计，你需要使用XHTML framework。下面的例子将包含有好几个区域，branding，content，navigation和footer，然后嵌套在div wrapper里，div wrapper将会使用水平居中。 

<div id=”wrapper”>
<div id=”branding”>
…
</div>
<div id=”content”>
…
</div>
<div id=”mainNav”>
…
</div>
<div id=”footer”>
…
</div>

主 导航会在左边，主内容将会在右边，通常，当人们创建float为基础的layout时，他们会float两列到左边（float:left），然后用 margin或者padding创建两列之间的间隙。用这种方法会导致这两列被紧紧地包在一个有限的空间里而没有气可喘。虽然很多浏览器运行时不会出现问 题，但是有些buggy（如IE）浏览器，两列会被迫互相挤压，导致layout被破坏。

为了预防这些现象发生，你需要避免将floated layout完满包含他们的元素中，不要使用水平的margin和padding来创建两列之间的空隙，你可以floating 一个元素在左边和floating一个元素在右边来创建间隙，实现的css很简单： 

#content { width: 520px; float: right; }
#mainNav { width: 180px; float: left; }

要确保div footer能正确地放置在上面两个div元素的下面，div footer需要被cleared：

#footer { clear:both; } 

下面设置一下div content和div mainNav周围的空隙，将它们可以有气可喘：
#mainNav { padding-top: 20px; padding-bottom: 20px; }
#mainNav li { padding-left: 20px; padding-right: 20px; }
#content h1, #content h2, #content p { padding-right: 20px; }

一个简单的两列布局就过完，快去实践一下吧。

三列floated layout： 

三列的布局（以下称三列）与两列的布局是非常类似的，不同的是三列需要增加两个新的div到div content里，一个mainContent作为主内容，另一个secContent作为第二内容，如下：

<div id=”content”>
<div id=”mainContent”>
…
</div>
<div id=”secContent”>
…
</div>
</div>

相同地，你可以在div content里将mainContent设置左浮动，设置secContent右浮动，这就创建了三列的效果。css代码也很简单： 

#mainContent { width: 320px; float: left; }
#secContent { width: 180px; float: right; }

删除之前content内元素设置的padding，然后用下面的设置代替：

#secondaryContent h1, #secondaryContent h2,#secondaryContent p { padding-left: 20px; padding-right: 20px;} 

一个完整三列布局出现在你的面前了，是否有点成就感了。


Fixed-width, liquid, and elastic layout

直 到现在为止，上面的所有例子都用了固定的像素来设置宽度，这就是fixed-width layout了，有时也叫“ice layout”，fixed-width layout的使用也比较普遍，然而，因为它固定了宽度，随着大屏幕的革命，为800*600的分辨率设计的布局会显得太小了，相反为1024*768分 辨率设计的布局在小屏幕下又会出现滚动条。另一个缺点就是当文本的字体变大的时候，elastic layout会变得比较浏览器窗口的宽度更易宽，从而被迫出现水平的滚动条，有一个解决方法就是设计body标签的max-width为100%，但是 max-width只在现在浏览器才技术，IE就不支持max-width，然而为了解决这此问题，你可以使用下面的两种布局来代替。 

Liquid layout(易变的layout)

liquid layout是将它的尺寸设置为百分比来代替用像素，它能根据浏览器窗口大小的改变来作出相应的放大与缩小，liquid layout的一个缺点就是当浏览器的窗口太大和太小都会影响用户的阅读，那么可以使用设置它的最大宽度和最小宽度来修正。现在你可以用这个技术来将 fixed -width 的三列布局用liquid的三列布局来实现，如下：

#wrapper { width: 85%; }
#mainNav { width: 23%; float: left; }
#content { width: 75%; float: right; } 

mainNav 与content留有2%的可视空间，然后你可以设置content里面两列的宽度，如果你想secContent的宽度与mainNav一样的话，那你 可以取23%，但在content就是75%中的23%，那应该是31%，为留出可视空间，你可以设置mainContent的width为66%，如 下：

#mainContent { width: 66%; float: left; }
#secContent { width: 31%; float: right; }

上面的liquid三列的布局在1024*768的分辨率是显示为最佳，但是比这更大或者更小的分辨率也能使用用户阅读得很舒服，最后最好设置一下wrapper的最小宽度（min-width:720px;），以防窗口变小的挤压得变形了。 

Elastic layout（弹性的layout）

liquid layout虽然能做到很好的显示效果，但是上面也说到了它的一些缺点，然而，Elastic layout能很好地解决liquid layout的缺点造成的问题。Elastic layout是用相关的字体的大小来设置元素的宽度，而不是用浏览器的宽度，用em来进行设置，这样你就可以确保你的字体变大的时候，整个布局也会随之自 动调整。还有，就是这样的布局能让文本的行高得到一个可读性好的大小，对减少用户视觉和感觉混乱都是很有帮助的。

像其它的布局技术一样， elastic layout也有它的缺点，它的缺点和fixed-width layout一样，就是当文本的字体变大的时候，elastic layout会变得比较浏览器窗口的宽度更易宽，从而被迫出现水平的滚动条，有一个解决方法就是设计body标签的max-width为100%，但是 max-width只在现在浏览器才技术，IE就不支持max-width。 

将fixed-width layout改为Elastic layout是非常简单的，窍门是在body中设置基本的字体大小，使得1em等10像素，因为在大部门浏览器默认的字体大小是16像素，所以设置字体等于默认字体的62.5%就等10像素了，如下：

body { font-size: 62.5%; }

然后将fixed-width layout中所有像素表示的宽度用em来代替，如下：
#wrapper { width: 72em; margin: 0 auto; text-align: left; }
#mainNav { width: 18em; float: left; }
#content { width: 52em; float: right; }
#mainContent { width: 32em; float: left; }
#secContent { width: 18em; float: right; } 

Fixed-width, liquid, and elastic layout都已经介绍完了，自己动手试一下吧。

Feed Me


转载文章请注明转载自：ThinkAgain - Let's Blog!

引用地址：http://www.thinkagain.cn/archives/60.html