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

共有16 条评论

  1. 1. 我的头像最帅! 怿飞

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

  2. 2. 我的头像最帅! 怿飞

    谢谢 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;}

  3. 3. 我的头像最帅! 正淳

    你太无聊啦

  4. 4. 我的头像最帅! pandas

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

  5. 5. 我的头像最帅! 记得分

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

  6. 6. 我的头像最帅! 怿飞

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

  7. 7. 我的头像最帅! MacJi

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

  8. 8. 我的头像最帅! Tom.Wu

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

  9. 9. 我的头像最帅! 怿飞

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

  10. 10. 我的头像最帅! Tom.Wu

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

  11. 11. 我的头像最帅! Ghost

    果然研究起了YUI…

  12. 12. 我的头像最帅! 堂主

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

  13. 13. 我的头像最帅! 堂主

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

  14. 14. 我的头像最帅! 堂主

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

  15. 15. 我的头像最帅! 怿飞

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

  16. 16. 我的头像最帅! xunleikk

    不错的文章

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签