YUI Grids CSS 解读 _ PlanABC

YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习：

1、布局的思想：使用 “负 margin（Negative Margins）” 技术

详细可参阅：《Creating Liquid Layouts with Negative Margins》

2、使用 em ：当用户改变字体大小时，宽度同时改变。

技巧：用 13 像素来平分宽度（保留小数到千分位），而 IE 浏览器用 13.333 。

/* 750 centered, and backward compatibility */
#doc {
	width:57.69em;
	*width:56.251em;
	min-width:750px;
}

57.69 = 750 / 13
56.251 = 750 / 13.333

注：《Setting Page Width with YUI Grids》一文中提到：IE 下的 em 是宽度除以 13 ，再乘以 .9759 得到。同解于为什么现在的 YUI 源码中 IE 下 750px 的宽度是：56.301em（750 / 13 * 0.9759）。

此算法将在 YUI 的下个版本中换为上面的新算法（IE 浏览器用 13.333 ）。

3、清除布局的浮动

针对非 IE 浏览器：

.yui-gf:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

而对于 IE 浏览器，使用了 zoom:1 来触发 haslayout。不过对于此 Nate Koechley 这样解释的：

Zoom is a non-valid attribute and so you’ll see warnings when you validate your CSS. I’m aware of that and think it is an acceptable tradeoff.

个人比较赞成他的想法：I think it is an acceptable tradeoff。

这篇文章发表2008年5月4日下午 21:26，并被分类于HTML/CSS/XML/XSL，已被 17434 人阅读。您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论，也可以发表您的评论，或者在您自己的网站中引用（trackback）该篇日志。

共有36 条评论

怿飞 2008年5月4日下午 9:40 ₪

不过对于 Nate Koechley 为什么在 YUI 中选用 13px 字体大小和为什么在 IE 下使用 13.333 这个系数，自己还没弄清楚。

怿飞 2008年5月4日下午 9:58 ₪

谢谢 realazy 的提醒: IE 中的字体 small 就是 13px，用 small 是为了解决IE下字体的缩放，因为 px 在 IE 下是不可缩放。原系数 0.9759, 是解决 IE 与其它浏览器 em 换算差异化的（原因 YUI 也没说）。

在看下 YUI 中 font 的定义：
/**
* Percents could work for IE, but for backCompat purposes, we are using keywords.
* x-small is for IE6/7 quirks mode.
*/
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}

正淳 2008年5月5日上午 10:27 ₪

你太无聊啦

pandas 2008年5月5日下午 12:26 ₪

很不错的文章，我最近也在研究YUI，不过偏向js，对他的css倒看的少，看完你这文章，倒是应该先研究研究yui的Grids CSS 了

记得分 2008年5月5日下午 12:57 ₪

小数字体？有必要考虑那么细吗？13号字体不适合中文！

怿飞 2008年5月5日下午 1:14 ₪

@记得分 13对中文的确不适合，有时候看的是一种思想，另国外人对于任何事情都是精益求精，这也是值得我们学习的地方。

MacJi 2008年5月5日下午 10:51 ₪

今天好像听到你在说“负 margin”，原来指的是这个。

Tom.Wu 2008年5月6日上午 10:05 ₪

此源已更改为 Internet Explorer 无法更新的格式。
———————————————–
IE7 无法订阅，想问下出了什么问题？

怿飞 2008年5月6日上午 11:59 ₪

@Tom.Wu IE7可以订阅的呀，刚测试了下，订阅地址为：http://www.planabc.net/feed/

10.

Tom.Wu 2008年5月6日下午 4:25 ₪

重新摆弄了下IE7，又可以订阅了，thx~

11.

Ghost 2008年5月9日下午 9:37 ₪

果然研究起了YUI…

12.

堂主 2008年5月11日下午 3:40 ₪

采用负margin来创建自适应的流体布局，国外貌似已经应用许久了，国内还暂时难以见到。再者，与之类似的是，国外对于定位布局的应用成熟的很多，国内目前来看几乎全是float

13.

堂主 2008年5月11日下午 3:46 ₪

负边距的自适应流体布局，采用定位、浮动结合的布局，国外已经熟练应用多年了，国内现在还尚少。情况会越来越好。再者，大部分老外工程师的概念是：Code is art，而大部分国内工程师的概念是：Code is job 。观念上的差距势必产生行动上的差距。都说老外的东西做的惊喜，创意足，那是啊，要是国内的也能各各拿Code当作Art当作Game,那我们也肯定能做的非常好

14.

堂主 2008年5月11日下午 3:47 ₪

enjoy the code 是一种很美妙的状态

15.

怿飞 2008年5月11日下午 5:20 ₪

ark or job 其实有时候更多的是氛围所触发。

16.