YUI 中的 Grids CSS值得关注和学习的

YUI中的Grids CSS系统涵盖了三个值得深入学习和理解的关键部分：

一、布局理念：负边距技术（Negative Margins）

在创建流动性布局时，负边距技术发挥了至关重要的作用。详细的学习资料可以参考《Creating Liquid Layouts with Negative Margins》一文。通过巧妙地运用负边距，我们可以实现灵活且响应式的网页设计。

二、使用em单位实现自适应布局

在YUI的Grids CSS系统中，em单位被广泛应用。当用户在浏览器中改变字体大小时，使用em作为单位的元素宽度也会随之改变，从而实现更为灵活的布局设计。一个关键的技巧是使用13像素来平分宽度，同时考虑到IE浏览器的特殊性，使用13.333作为基数进行计算。

关于如何在YUI Grids中使用em单位设置页面宽度，有一个重要的注意事项。在IE浏览器中，em的计算方式是宽度除以13，然后再乘以0.9759。这也就是为什么在当前的YUI源码中，IE下750px的宽度被设置为56.301em。在新的YUI版本中，将采用新的计算方法，IE浏览器将使用13.333作为基数。

三、清除布局浮动

在CSS布局中，浮动的元素可能会影响到周围的元素。为了解决这个问题，YUI Grids CSS系统提供了一种清除浮动的方法。对于非IE浏览器，使用“.yui-gf:after”选择器来清除浮动。而对于IE浏览器，则使用zoom:1属性来触发hasLayout。关于使用zoom属性的争议，虽然它不是一个标准的CSS属性，会在验证时产生警告，但很多人认为这是一个可接受的权衡。个人而言，我也持相同的看法。

YUI中的Grids CSS系统是一个强大且灵活的工具，通过深入了解其背后的原理和技巧，我们可以更好地运用它来创建出优秀的网页设计。希望这篇文章能够帮助大家更好地理解和学习YUI中的Grids CSS系统。