上篇讲的布局(切割)方法相信大家己经掌握，其特点是用固定宽度(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. 实现如下效果效果(点击看大图)：

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

精彩在留言，请读者踊跃解答，参与讨论关于布局的任何问题，Jorux将在留言中响应大家的提问或是解答。

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]