以em为单位来布局页面的设置

      花了一天时间看完《无懈可击的web设计》（第2版），薄薄的一本书，后来看了下价格，竟然要55大洋，当时就懵了，就这内容，顶多10块钱算了（当然，书是彩印的，工本费可能贵点）。没讲什么太新鲜的技巧，当然也有可能是书中的一些思想偶还领悟不到，唯一感兴趣的是讲到的灵活布局网页那里，记得有一次笔试的时候碰到过类似的问题，就是页面宽度、字体自适应浏览器窗口的问题，当时没注意，简单的用了百分比宽度，现在想想，百分比宽度可能问题更大，对于里面的元素宽度是很难把握的。

      好了，废话不说，切入正题。我们的目标也很简单，就是当用户改变文字大小时（比如按住Ctrl+鼠标滚轮上下滚动），字体能够随着变化而布局不被破坏。而这篇文章的主要目的，是学习如何设置各模块宽度、行高、字体的问题。

      为此，我给出如下的结构：

<div class="wrap">
        <div class="header"></div>
        <div class="body">
                <div class="main"></div>
                <div class="sider"></div>
        </div>
        <div class="footer"></div>
</div>

      然后，一步步来设置尺寸：

1、首先，因为各浏览器默认的字体大小是16px，为了方便后续的设置，我们把它统一为10px（比如我们要设置某处字体为13px，只要指定为1.3em即可，16/13=0.8125，每次都要计算，挺麻烦的），因10px/16px=0.625，所以，body字体大小设为62.5%（这个想必很多人都知道了，不多解释了）。

body {
    ...
    font-size: 62.5%;/* 此时，1em就相当于10px */
}

2、然后，我给最外层包裹的div设置样式：

.wrap {
        font-size: 1.6em;/* 16px */
        line-/* 16px*2em=32px */
}

这里直接又把字体改回16px了，实际操作中可能不这样也说不定。

3、接下来设置一下头部和底部：

.header {
        ...
        line-/* 5em*16px=80px */
        ...
}
.footer {
        ...
        line-/* 3em*16px=48px */
        ...
}

4、最后，按照实际所需的页面宽度设置内容区的宽度，我以1000px为例，因1000/16=0.625，所以内容区的宽度设为62.5em即可，里面的main和sider模块按照实际所需的宽度，计算一下比例即可，我这里主要内容区设为790px，侧栏为200px，中间有10px的空隙，样式如下：

.body {
        width: 62.5em;/* 62.5em*16px=1000px */
        /*min-width: 800px;
        max-width: 1000px;*/
        margin: 0 auto;
        overflow: hidden;
        zoom: 1;
}
.body .main {
        ...
        float: left;
        width: 79%;/* 790px */
}
.body .sider {
        ...
        float: right;
        width: 20%;/* 200px */
}

      最后，当打开页面，放大或缩小页面时，字体跟着变化，同时浮动的布局也没有被破坏。

      接下来，请单击查看Demo，可以放大或缩小页面试试~~

      最后的最后，算是一点点小技巧，就是页面中那张图是1280px宽的，默认插进来时是图片本来的宽度，会超出main区，当设置width为100%后，图片充满父元素可见区域，且宽高比和图片本来的宽高比相同。