渐进增强式布局探讨（上）

来看一个经典的三栏布局：

从内容出发（渐进增强 的核心思想），一份合理的HTML结构如下：

<div id="page">
    <div id="hd"></div>
    <div id="bd">
        <div class="main"></div>
        <div class="sub"></div>
        <div class="extra"></div>
    </div>
   <div id="ft"></div>
</div>

main 是主要内容，sub 是辅助内容，比如导航、相关文章等，extra 是额外信息，比如广告等，具体含义根据实际情况来定。书写HTML文档有个非常重要的原则是：重要的内容放前面 。这能让文档更富语义，能提高可访问性，对SEO也更友善。

写好上面的代码后，我们来看看如何实现三栏布局  。（书写HTML时，尽量以内容为向导，要避免一上来就考虑布局，这体现的是内容与表现的分离，同时也是渐进增强 思想在工作流程中的体现。）

Table布局

经典得一塌糊涂的表格布局，在渐进增强面前落花流水——表格布局要求书写HTML代码时，首先考虑布局，而不是内容。不啰嗦，直接枪毙。

Float布局

浮动布局满天飞：

优点是简单，缺点呢？在One True Layout 这篇文章中有详细的探讨。或者看我收集的一些Float引发的Bugs .

考虑到IE的庞大市场，目前只好将浮动布局关禁闭了。

绝对定位布局

绝对定位非常简单，非常精准。但面对不可预料的高度时，绝对定位就死翘翘了。可以看看这篇文章 ，还有一个不错的例子：Flanking Menus .

废话不多说，也关禁闭。

负边距布局

Ryan Brill在2004写了一篇文章：Creating Liquid Layouts with Negative Margins . 文中的“发现”立刻让布局世界迎来了“负来负去”的新时代。对于上面的三栏布局，需要先调整DOM结构：

<div id="hd"></div>
<div id="bd">
    <div class="content">
        <div class="sub"></div>
        <div class="main"></div>
    </div>
    <div class="extra"></div>
</div>
<div id="ft"></div>

最终的CSS实现请看这里 。请仔细阅读Ryan的原文，可以发现负边距能解决两栏布局中文档结构的问题（main 可以放在sub 前面）。但对于三栏布局，Ryan给出的解决方案需要添加额外的包裹层，对DOM结构也依旧存在依赖关系。

这个方法的最大价值是：开启了负边距的神奇大门，让布局的实现思路立刻活跃了起来。

圣杯布局

2006年，Matthew Levine开始寻找布局圣杯：In Search of the Holy Grail . 这是一篇让人赞叹振奋的文章。Matthew灵活运用容器的内边距、浮动元素的负边距和相对定位，接近完美的实现了三栏布局。DOM结构也很好，无需额外标签。但是，我们来看看多达27页的评论吧。圣杯布局最令人头疼的是：在IE6下，左栏经常会神奇消失！！！ （比如将IE6的窗口高度拖小点）评论中还反馈在IE7下也存在不少问题（我测试后，发现在IE7正式版下没问题，评论中的IE7可能是beta版）。另外在Chrome下表现也有点诡异，需要小小hack. 还有那繁琐的padding, margin, left, right 计算，时刻需要一颗清晰的大脑，喝点小酒就彻底晕了……

这里还有篇文章专门分析了圣杯布局在IE6下的Bug: Jump on hover in Ala’s Holy Grail layout .（万恶的IE6啊，浪费了我们多少宝贵的时间）

2008年11月4日补充：这里有一个改进版的圣杯布局 ，解决了所有问题，缺点是包裹层太多，唉。

总之：这是一个很美妙的布局，但在IE6尚未退出历史舞台的当今，圣杯布局可能并不是我们真正要找的圣杯。

伪绝对定位布局

聪明的同行们对完美布局的追求孜孜不倦。2008年我们迎来了奥运。Eric Sol 给奥运的献礼是一个聪明的布局尝试：Faux Absolute Positioning .

这个布局思路很简单：先相对定位到最右边，再用margin-left 移过来。关于这个布局，曾经引发了淘宝UED内部的热烈讨论 。若干月后，我和明城 在不同的项目中采用了这一方法，结果发现在ie下，某些页面会闪屏（页面加载时能看见左移）。当时项目紧，没细究，上周想重现却怎么也重现不了（明城说页面非常复杂的时候会闪屏，但具体原因没找出来）。今天看原文的评论，有人指出在IE6下，设置背景图会导致这个布局彻底完蛋 。

仔细想来，这个布局最让人担心的是：为什么一开始要将所有item 都left: 100% ? 这个太邪恶了，让人不放心。

“借尸还魂”的Table布局

乍一看，这个布局很雷人：基于display:table的CSS布局 。作者作了解释：在css里使用table-cell 之类的声明，仅是声明渲染方式，并不影响HTML文档中的语义。从这个角度讲，这种布局方式的确不错，而且很容易就可以做到等高，也不用考虑清除浮动等扰人的问题。

但是，又是IE成了绊脚石。在IE中，这个布局需要IE8才支持。不过，即便所有浏览器都支持了，我为什么老觉得有点“借尸还魂”的感觉？

更多

布局世界精彩纷呈，下面这些文章也非常有影响力：

• Eric的Any-Order Columns , 对于固定宽度的三栏布局，Eric的方案非常优秀。
• 大名鼎鼎的One True Layout , 里面很多总结性质的研究，非常值得一读。

小结

可以看出，有不少布局（比如圣杯布局、伪绝对定位布局、One True Layout等）都符合渐进增强的工作流程。圣杯布局和One True Layout里，都把negative margin 发挥到了极致（让我对浮动元素的负边距有了彻底的了解）。伪绝对定位布局则让人很不放心left: 100% ，用来解决原文中的问题感觉不错，但如果用来作为整个页面的布局，则有点邪恶。

 

转自岁月如歌：http://lifesinger.org/blog/2008/11/pe-layout-1/