css基础教程目录索引：《css基础教程》

上篇讲的布局(切割)方法相信大家己经掌握，其特点是用固定宽度(fixed-width)来实现页面内各个元素的显示效果，简单实用，易于掌握。本篇将讲述其他相对高级的布局方法。

布局的分类,根据对元素宽度的定义不同，布局可分为以下几种：

1. 固定宽度(fixed-width)布局：
即上一篇所用到的布局方法，其特点是主要DIV的宽度都是用固定大小的px值定义的，其宽度不随浏览器及字体大小的影响。多以px作为宽度单位。
优点：宽度固定，最为保真地表现作者的设计意图；简单易学。
缺点：它是这几种布局方法中最为“自私”的，因为其不考虑访客的浏览设备及设置。比方说，在1024宽的浏览器表现良好的布局，到了1600以上的宽屏浏览器就显得较为局限，其可能缩于屏幕一侧或是中央。
现状：由于其简单易用，且基本满足大部分访客的需求，仍是主要的布局方法，尤其在大陆。
趋势：随着液晶屏幕的发展和普及，成本的下降，市面上宽屏显示器已经开始大量涌现，尤其在西方发达国家，1600的宽屏显示器渐成主流，所以在800或是1024下显示良好的，使用固定宽度的布局方法已经开始被边缘化。
站点举例：网易 蓝色理想

2. 自适应(liquid)布局：
即根据用户浏览器的宽度，自动调整宽度显示的布局方法。以%作为宽度单位。
优点：自动适应各种屏幕宽度，轻松实现满屏显示。
缺点：如果屏幕过宽，而内容有不多的情况下，文字可能拉伸得很长，影响美观。而当屏幕过窄时，内容又会被压缩得很窄，可读性下降。
现状：目前很多的web2.0站点使用%来实现布局，即自适应访客的屏幕宽度。
趋势：就目前的情况看来，没有哪一个屏幕分辨率能够统一整个市场，所以800，1028，1280，1600等各种宽度的浏览器会各据一方，并且只会越来越宽，liquid布局以其良好的自适应能力将成为主要的布局方法。
站点举例：Google Cssliquid

3. 弹性（elastic）布局：
所谓弹性，是针对字体大小而言的，当用户调整字体大小时，宽度会随字体大小的变化而变化。以字体高em作为宽度单位。
优点：满足了视力下降人士的需求，不管用户如何调整字体大小，页面布局都不会被打乱；
缺点：当用户不调整字体大小时，其效果和固定宽度布局的效果其实是一样的，即不会随屏幕的大小的变化而自适应；对于初学者不易掌握。
现状：弹性布局方法是目前较为少用的一种。
趋势：由于其能自动适应字体大小，且在用户不调整字体大小时，有固定的宽度，所以它将是固定宽度布局的不错的替代方法。
站点举例：BlueAnvil Designbit(可能需要代理浏览)

4. 混合布局：
即在一个页面内用两种以上的布局方法。比方说对于内容DIV使用%，而在边框DIV则使用em作为宽度单位。

如何选择适合你的布局方法：
在选择布局方法时，你需要考虑以下两个方面：
1.你的原始设计：
当你的原始设计的宽度固定，或是宽度过大会影响美观的话，Jorux建议你使用弹性布局。
2.用户群的分布：
如果你的用户群数量巨大，也就是说使用各种屏幕分辨率的用户都会达到一个可观的数量，那么你在布局时就应该考虑使用自适应的方法布局。并且在设计时考虑到这点，设计出在各种宽度下拉伸都基本保持美观的作品。

你可以看到，固定宽度的布局方法已经不是Jorux的推荐方法。这也是Jorux写这篇文章的原因，大家应该秉持以用户为中心的设计理念，更好地适应各种客户端及其设置。本站也会很快改写CSS。

怎样使用弹性布局的方法实现布局篇(1)中的效果：
1. 在body中设置font-size:62.5%，使得1em=10px；
2. 避免在任何DIV中声明字体大小，这是为了避免em的值因继承父级元素的字体高而不断变化，而在DIV的子元素中声明字体大小。如在p,h1等选择器中声明。
3. 用em作为宽度和高度单位，例如你想设置DIV宽度为760px，那么你需要将其设置为76em。
那么css代码可以为(仅供参考)：

* {
margin: 0;
padding: 0;
}
body{
font-size:62.5%;
background-color:#444;
}
#AllWrap {
float:left;
width: 76em;
background-color: white;
}
#Header {
height: 8em;
background-color: red;
}
#MidWrap {
}
#Content {
float:left;
width:56em;
height:40em;
background-color: white;
}
#Sidebar {
float:left;
width:20em;
height:40em;
background-color: green;
}
#Footer {
clear:both;
width:76em;
height: 8em;
background-color: blue;
}

你可以尝试调整浏览器的字体大小，可以看到各个DIV也随之变化。

如何用%实现自适应的布局方法：
满足以下条件：
1.满屏显示，及Header，(Content+Sidebar),Footer的宽度均自动适应屏幕宽度，并占满整个屏幕宽度；
2.Content占70%屏幕宽，Sidebar占30%，高度均为400px；
3.Header和Footer的高度均为为80px；
4. 实现如下效果效果(点击看大图)：

读者能在留言中给出你的答案吗？

参考答案：

红鼻子 Says:

Jorux/Bluecssr Says:

Important reference:
1. Going elastic with ems, layout techniques
2. Fixed vs Liquid vs Elastic
3. Create a simple liquid layout
4. Elastic Design
[END]

来自：http://jorux.com/archives/layout-2-if-you-love-css/

分类： 网页设计 站长经验 Web开发 交互设计 艺术设计