网页的三种布局(固定宽度式,流体式,弹性式)

浏览数：20 / 时间：2015年06月09日

对于前端的同学来说，网页布局就是其基本功，不会页面布局就不是一个合格的网页重构师。在我们的日常工作中，我使用的最多的布局方式莫过于固定宽度式布局。反正，我所工作过的公司基本上都是使用固定式页面布局。为什么固定宽度式布局使用最广泛，原因很简单，因为简单粗暴上手简单。流体式及弹性布局比较多的使用在论坛网站，或者个人博客中。

刚才我也说到固定宽度式布局是目前国内最常用的布局方法，优点就是固定宽度使得其布局最简便，使得开发人员对布局和定位有更大的控制能力。但是，固定宽度的布局也有缺点，因为它的宽度是固定的，无论窗口尺寸有多大，它的尺寸总是不变，所以无法充分利用可用空间。因此，它们也常常被认为是糟糕的权宜之计。

多说无益，先看个固定宽度的布局的示例，这个大家都是拿手布局方法。html代码：

<div class="content">
            <div class="primary">
                <div class="primary"></div>
                <div class="secondary"></div>
            </div>
            <div class="secondary"></div>
        </div>
    </div>

css样式代码：

.wrapper {
  width: 920px; 
  margin: 0 auto; 
}

.content {
    overflow: hidden;
}

.content .primary { 
  width: 670px;
  float: right;
}

.content .secondary { 
  width: 230px;
  float: left; 
} 

.content .primary .primary {
    width: 400px;
    float: left;
}

.content .primary .secondary {
    width: 230px;
    padding-right: 20px;
    float: right;
}

以上就是我们经常在工作中应用到的固定宽度布局。

下面我们接着看流体式布局，与固定宽度布局有什么不一样的地方，在使用流体式布局时，尺寸是使用百分数而不是像素设置的，这使得流体式布局相对于浏览器窗口进行伸缩。随着窗口变大，列宽也会变宽。反之，随着窗口变小，列的宽度也变小。流体式布局可以非常高效的使用空间。但是，流体式布局必然也有其问题，在窗口宽度较小的时候，行变的非常窄，很阅读。因此，有必要添加以像素或em为单位的min-width，从而防止布局变得太窄。但是，如果min-width设置的太大也会遇到与固定宽度布局相同的限制。

首先，将容器宽度设置为窗口总宽度的百分数，接着以容器宽度的白分数形式设置主内容和次要内容区域的宽度。

页面的布局和固定宽度的html代码一致。

css代码如下：

.wrapper {
  width: 76.8%; 
  margin: 0 auto; 
  max-width: 125em;
  min-width: 76em;
}

.content {
    overflow: hidden;
}

.content .primary { 
  width: 72.82%;
  float: right;
}

.content .secondary { 
  width: 25%;
  float: left; 
} 

.content .primary .primary {
    width: 59.7%;
    float: left;
}

.content .primary .secondary {
    width: 34.33%;
    padding-right: 2.63%;
    float: right;
}

这个流体式布局现在就可以根据窗口变动而变化。

上面谈到流体式布局可以充分利用空间，但是在大分辨率显示器上，行仍然会过长，让那个用户不舒服。相反，在窄窗口中或者在增加文本字号时，行会变得非常短，内容很零碎。对于这个问题，或许下面的弹性布局是一种解决方案。

弹性布局相对于字号(而不是浏览器的宽度)来设置元素的宽度，以em为单位设置宽度。可以确保在字号增加时整个布局随之扩大。这样就可以将行保持在可阅读的范围。当然啦，于其他布局一样，弹性布局也有一些问题与固定宽度布局相同，不能充分利用可用空间。另外，因为在文本字号增加时整个布局会加大，所以弹性布局会变得比浏览器窗口宽，导致水平滚动条出现。为了，防止这种情况，可能需要在容器div上加上max-width为100%，ie6不支持max-width，如果确实要兼容IE6，就必须使用javascript。

弹性布局的关键技巧在于设置基字号，让1em大致相当于10像素。我们知道大多数浏览器的默认字号是16像素，10像素大约是16像素的62.5%，所以在主体将字号设置为62.5%就可以了。

布局代码还是一样，主要css不一样：

body {
  font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, 

sans-serif;
  background-color:#D4D4D4;
}

.wrapper {
  width: 92em;
  max-width: 95%;
  margin: 0 auto; 
}

.content {
  overflow: hidden;
}

.content .primary { 
  width: 72.82%;
  float: right;
}

.content .secondary { 
  width: 25%;
  float: left; 
} 

.content .primary .primary {
    width: 59.7%;
    float: left;
}

.content .primary .secondary {
    width: 34.33%;
    padding-right: 2em;
    float: right;
}