关于CSS的几种界面布局

使用CSS技术的四种可选择的界面布局类型：

固定宽度布局；

自适应布局；

弹性布局；

混合布局。



固定宽度布局：

以像素为单位，宽度固定的静态布局。外层宽度固定，内部宽度可以使用百分比也可以使用像素固定。可以确保在不同分辨率下设计效果保持一致，测试环境更简单，缩短了开发时间。

目前，大多数用户已经使用了1024*768或更高分辨率的显示器，所以通常可以选择960像素作为固定宽度布局的宽度。这个宽度可以避免水平滚动条的出现。

固定宽度布局的缺点是没有充分利用用户的全部浏览区域。（当然，屏幕的分辨率不一定和浏览器的分辨率相同，因为很多屏幕不会最大化浏览器窗口。）例如，如果用户有一个很大的宽屏显示器，分辨率为1900*1200，浏览器的分辨率为1500像素，这时浏览一个750像素宽的固定布局，空白的区域会很大。

推荐使用一个居中的div来维护固定宽度设计中的平衡感：

#wrapper{ margin:0 auto; }

这段代码可以确保大分辨率屏幕的用户可以看到居中显示的页面，而不是藏在屏幕左上角的页面。

为网站固定宽度布局找一个最佳平衡点通常需要对网站平均用户资料进行深入的研究。通常的做法是评定访问者的浏览偏好，然后相应的调整设计。常用方法是分析网站的统计数据，找到使用最多的分辨率，并分析有多少用户使用较低的分辨率。我们必须为用户而不是我们自己创建合适的布局。

创建一个两栏固定宽度布局：

<div id="Container">

    <div id="header">

        <!-- logo Nav -->

    </div>

    <div id="content">

        <!-- main content -->

    </div>

    <div id="sidebar">

        <!-- sidebar -->

    </div>

    <div id="footer">

        <!-- some info -->

    </div>

</div>

CSS部分写法如下：

#Container { margin:0 auto; width:960px; }

#header { width:100%; }

#content { width:600px; float:left; display:inline;(这句话是为了消除IE5/6中浮动元素边距加倍的bug) }

#sidebar { width:330px; float:right; display:inline; }

#footer { width:100%; clear:both; }



自适应布局（流式布局）：

自适应布局的网页会根据浏览器窗口的大小相应的调整自己的宽度。容器中的主体部分的宽度以当前浏览器窗口宽度为基准，按照一定的百分比进行定义。当浏览器尺寸发生变化，布局也发生变化。

这类布局中，元素的宽度是以父元素的百分比设置的。因此需要设计师对布局的结构有深刻的理解，虽然设计过程痛苦，但成功的设计会让网站更加灵活的面对不同的终端用户。

流式布局最显著的特点是内容区过宽，因此宽屏用户会发现每一行如此的长，以至于阅读起来很不舒服。为了获得最佳的阅读效果（每行47-86个字母），通常可以为内容区#content-block设置在此基础上加10%的宽度。

在CSS中，使用CSS属性“max-width”来定义布局的最大宽度。除了IE5/6之外，几乎所有的主流浏览器都支持这个属性。

现在使用上面固定宽度布局的HTML结构来实现一个简单、纯粹的两栏自适应布局。记得测试多浏览器的兼容性。

CSS文件如下：

#Container { margin:0 auto; width:75%; }

#header { width:100%; }

#content { width:60%; float:left; display:inline; }

#sidebar { width:40%; float:right; display:inline; }

#footer { width:100%; clear:both; }

动态样式属性允许我们使用类似Javascript中的结构控制和数学计算的语法，来解决IE浏览器中最大宽度的问题。例如这段代码：

#content { max-width:30em;

           width: expression_r(

                  document.body.clientWidth > (500/12) *

                       parseInt(document.body.currentStyle.fontSize)?"30em":"auto"); }

代码检查用户相对浏览器宽度的字体尺寸设置（以pt为单位）。使用默认12pt字体时，500像素要比30em宽，所以上述代码中使用了30em作为布局的宽度。

如果内容部分的宽度大于500像素与12的比值乘以用户字体的设置，就将宽度设置为30em，反之，如果不大于，则让宽度保持自动（auto）。



适应性流式布局：

尽管自适应的流式布局可以适应很多种不同的分辨率，但是在分辨率过低（比如手机或者PDA设备）或者分辨率过高的情况下，页面会显得非常可笑和糟糕。为了解决这个问题，可以使用“适应性流式布局”来定制布局。