网页栅格系统研究（4）：技术实现（2）

YUI的实现

接着来看大名鼎鼎的YUI Grids CSS. YUI的CSS框架由三个文件组成：

reset.css - 样式重置 fonts.css - 版式字体控制 grids.css - 栅格系统

我们从demo开始：

注意，demo链接中的宽度是750的，但我们只要将<div id="doc"></div>中的id改为doc2, 页面宽度就自动变为950宽了（YUI非常强大^o^）。来看下dom结构：

采用的也是浮动布局，简化后的CSS代码为：

<style type="text/css"> .doc2 { margin: auto; width: 73.076em } .yui-u { float: left; margin-left: 1.99％; width: 32％ } div.first { margin-left: 0 } #ft { clear: both } </style>

YUI的特点是：

1. 依旧是采用浮动布局，槽（Gutter）宽通过margin-left来控制（Blueprint采用右边距，960.gs采用均分，这三个框架对槽的处理实在有意思）

2. 总宽度采用em, 这样可以用在弹性布局上

3. 栏的布局用的是百分比，采用了流体布局

YUI的好处是能用来做自适应布局，在这前面两个框架里是没有的。但普通的定宽布局，YUI则显得有点麻烦，比如我们要实现四栏布局，dom得这样写：

先来两个两栏布局，再细分为四栏布局，清晰度上欠佳。