[让CSS更规范]弹性布局

摘自《精通CSS:高级Web标准解决方案》

弹性布局相对于字号（而不是浏览器宽度）来设置元素的宽度。通过以em为单位设置宽度，可以确保在字号增加时整个布局随之扩大。这可以将行长保持在可阅读的范围，对于视力弱或有认知障碍的人尤其有用。

与其他布局技术一样，弹性布局也有自己的问题。弹性布局的一些问题与固定宽度布局相同，比如不能充分利用空间。另外，因为在文本字号增加时整个布局会加大，所以弹性布局会变得比浏览器窗口宽，导致水平滚动条出现。为了防止这种情况，可能需要在主体标签上添加100%的max-width。IE6和更低版本当前不支持max-width，但是Safari和Firefox等符合标准的浏览器支持它。

创建弹性布局比创建流体布局容易得多，因为所有HTML元素基本上一直出现在相同的相对位置上，它们仅仅是同时随文本字号而增大。将固定宽度布局转换为弹性布局是非常简单的任条。技巧是要设置基字号，让1em大致相当于10像素。

大多数浏览器上的默认字号是16像素，10像素大约是16像素的62.5%，所以在主体上将字号设置为62.5%：

body {
  font-size: 62.5%;
  }

因为在使用默认字号时1em现在相当于10像素，所以可以将所有像素宽度换为em宽度，从而将固定宽度布局转换为弹性布局：

#wrapper {
  width: 72em;
  margin: 0 auto;
  text-align: left;
  }

#mainNav {
  width: 52em;
  float: right;
  }

#mainContent {
  width: 32em;
  float: left;
  }

#secondaryContent {
  width: 18em;
  float: right;
  }

在使用常规文本字号时，这些代码产生的布局与固定宽度布局看起来一样（见下图），

但是它会随着文本字号的增加而漂亮地增大（如图）。

注：本例中的HTML代码与《流体布局》中的相同。