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



共有38 条评论

  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

    不错的文章

  17. 17. 头像 枫子

    你好,font:13px/1.231这个要怎么理解呢?

  18. 18. 头像 怿飞

    @枫子 font:13px/1.231 表示 font-size:13px; line-height:1.231

  19. 19. 头像 胡戈戈

    niubility

  20. 20. Nature is the best » 如何快速定位页面中复杂 CSS BUG 问题 - Learn to enjoy your life

    [...] 无额外 HTML 标签的清除浮动的方法(尽量避免使用 overflow:hidden;zoom:1 [...]

  21. 21. 头像 Argoy

    从《如何快速定位页面中复杂 CSS BUG 问题 》一文跳过来的,这个清除浮动只是针对非IE浏览器,那IE浏览器咋办。。。

  22. 22. 头像 怿飞

    @Argoy IE只需要zoom:1就可以清除浮动,文章里也提及到了:“而对于 IE 浏览器,使用了 zoom:1 来触发 haslayout”。

  23. 23. 头像 ico

    学到一招,不过ie下解决清楚浮动还是需要zoom:1,这点不是很爽。。

  24. 24. 5个通用CSS Frameworks框架/工具/教程 - 菠菜博

    [...] YUI Grids CSS 解读 [...]

  25. 25. 头像 ygwool

    用了.yui-gf:after清除浮动会在页面底部产生空白!怎样解决呢?

  26. 26. 头像 shevchenko

    在定义文字大小和行距是到底是使用px pt em?

  27. 27. 头像 股吧

    老实讲,没太理解

  28. 28. 快速定位页面中复杂 CSS BUG - 米老虎的BLOG

    [...] 无额外 HTML 标签的清除浮动的方法(尽量避免使用 overflow:hidden;zoom:1 [...]

  29. 29. 头像 hemin

    路过,留名~

  30. 30. 头像 cssbox

    好东西…学习中…

  31. 31. 快速定位页面中复杂CSS BUG « 南阳冬冬

    [...] 无额外 HTML 标签的清除浮动的方法(尽量避免使用 overflow:hidden;zoom:1 [...]

  32. 32. 头像 stri

    用 13 像素来平分宽度(保留小数到千分位),而 IE 浏览器用 13.333 。

    有时候在IE和FF中都用12px的时候.看不出差别

  33. 33. 头像 stri

    @31的确!我情愿更加固定高宽.也不原用(特殊情况除外)

  34. 34. 头像 Y.Jiajia

    那个小数,应该是IE的舍入法,的算法不同吧,仅猜猜而以。

  35. 35. 头像 greengnn

    body 12px em用.75=1px 方便

  36. 36. 头像 加盟库

    额。。。。有点复杂。

  37. 37. 头像 css 小菜鸟

    哪个好心人有没有文档可以学习得啊 传一份给我好吗/ 不会用 .

  38. 38. 头像 jacker

    我有个关于yui css 的问题想问下,由于在一个项目中用到了yui css框架,并且越到了一个问题,就是yui 默认的Template Presets没有我想要的尺寸,我想要左边250px固定,右边自适应,所以就像看他的源代码并稍微修改下加个yui-t9,所以我就在css文件里找到以下的一些有关Template Presets的一些代码:
    #doc, #doc2, #doc3, #doc4, .yui-t1, .yui-t2, .yui-t3, .yui-t4, .yui-t5, .yui-t6, .yui-t7 {
    margin: auto;
    text-align: left;
    width: 57.69em;
    *width: 56.25em;
    }

    .yui-t1 #yui-main, .yui-t2 #yui-main, .yui-t3 #yui-main {
    float: right;
    margin-left: -25em;
    }

    .yui-t4 #yui-main, .yui-t5 #yui-main, .yui-t6 #yui-main {
    float: left;
    margin-right: -25em;
    }

    .yui-t1 .yui-b {
    float: left;
    width: 12.30769em;
    *width: 12.00em;
    }

    .yui-t1 #yui-main .yui-b {
    margin-left: 13.30769em;
    *margin-left: 13.05em;
    }

    .yui-t2 .yui-b {
    float: left;
    width: 13.8461em;
    *width: 13.50em;
    }

    .yui-t2 #yui-main .yui-b {
    margin-left: 14.8461em;
    *margin-left: 14.55em;
    }

    .yui-t3 .yui-b {
    float: left;
    width: 23.0769em;
    *width: 22.50em;
    }

    .yui-t3 #yui-main .yui-b {
    margin-left: 24.0769em;
    *margin-left: 23.62em;
    }

    .yui-t4 .yui-b {
    float: right;
    width: 13.8456em;
    *width: 13.50em;
    }

    .yui-t4 #yui-main .yui-b {
    margin-right: 14.8456em;
    *margin-right: 14.55em;
    }

    .yui-t5 .yui-b {
    float: right;
    width: 18.4615em;
    *width: 18.00em;
    }

    .yui-t5 #yui-main .yui-b {
    margin-right: 19.4615em;
    *margin-right: 19.125em;
    }

    .yui-t6 .yui-b {
    float: right;
    width: 23.0769em;
    *width: 22.50em;
    }

    .yui-t6 #yui-main .yui-b {
    margin-right: 24.0769em;
    *margin-right: 23.62em;
    }

    .yui-t7 #yui-main .yui-b {
    display: block;
    margin: 0 0 1em 0;
    }

    #yui-main .yui-b {
    float: none;
    width: auto;
    }
    我拿yui-t1来做例子说下:
    他先定义.yui-t1 下.yui-b 的宽度为12.30769em;因为160/13=12.30769em;而ie下为12.00em;
    因为160/13.3333=12.00;然后又定义.yui-t1 #yui-main .yui-b的 margin-left为13.30769em;
    通过观察可以发现是在12.30769上加1em;其他的yui-t2,yui-t3….都是这个规律.但为什么ie下 *margin-left会是13.05em呢?按道理应该是13.30769 * 13/13.3333=12.98,求高手解答,还有说下那个13.05是怎么算出来的

发表评论

(必填)

(必填,会为您保密)

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