2008-5-4 下午 - HTML/CSS/XML/XSL - -   

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，已被 17437 人阅读。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论， 也可以发表您的评论，或者在您自己的网站中 引用（trackback） 该篇日志。



共有38 条评论

  1. 1. 头像 怿飞 2008年5月4日 下午 9:40 ₪

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

  2. 2. 头像 怿飞 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;}

  3. 3. 头像 正淳 2008年5月5日 上午 10:27 ₪

    你太无聊啦

  4. 4. 头像 pandas 2008年5月5日 下午 12:26 ₪

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

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

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

  6. 6. 头像 怿飞 2008年5月5日 下午 1:14 ₪

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

  7. 7. 头像 MacJi 2008年5月5日 下午 10:51 ₪

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

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

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

  9. 9. 头像 怿飞 2008年5月6日 上午 11:59 ₪

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

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

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

  11. 11. 头像 Ghost 2008年5月9日 下午 9:37 ₪

    果然研究起了YUI…

  12. 12. 头像 堂主 2008年5月11日 下午 3:40 ₪

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

  13. 13. 头像 堂主 2008年5月11日 下午 3:46 ₪

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

  14. 14. 头像 堂主 2008年5月11日 下午 3:47 ₪

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

  15. 15. 头像 怿飞 2008年5月11日 下午 5:20 ₪

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

  16. 16. 头像 xunleikk 2008年6月12日 下午 8:04 ₪

    不错的文章

  17. 17. 头像 枫子 2008年9月7日 下午 1:39 ₪

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

  18. 18. 头像 怿飞 2008年9月7日 下午 6:30 ₪

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

  19. 19. 头像 胡戈戈 2008年10月31日 下午 6:17 ₪

    niubility

  20. 20. Nature is the best » 如何快速定位页面中复杂 CSS BUG 问题 - Learn to enjoy your life 2009年1月14日 下午 10:35 ₪

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

  21. 21. 头像 Argoy 2009年1月15日 上午 12:25 ₪

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

  22. 22. 头像 怿飞 2009年1月15日 上午 9:19 ₪

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

  23. 23. 头像 ico 2009年1月15日 下午 12:21 ₪

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

  24. 24. 5个通用CSS Frameworks框架/工具/教程 - 菠菜博 2009年2月3日 上午 8:52 ₪

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

  25. 25. 头像 ygwool 2009年3月5日 下午 5:17 ₪

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

  26. 26. 头像 shevchenko 2009年3月27日 下午 9:33 ₪

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

  27. 27. 头像 股吧 2009年4月11日 上午 12:37 ₪

    老实讲，没太理解

  28. 28. 快速定位页面中复杂 CSS BUG - 米老虎的BLOG 2009年5月17日 下午 11:57 ₪

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

  29. 29. 头像 hemin 2009年8月4日 下午 9:53 ₪

    路过，留名~

  30. 30. 头像 cssbox 2009年8月20日 上午 10:54 ₪

    好东西…学习中…

  31. 31. 快速定位页面中复杂CSS BUG « 南阳冬冬 2009年8月27日 下午 11:02 ₪

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

  32. 32. 头像 stri 2009年9月12日 上午 11:08 ₪

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

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

  33. 33. 头像 stri 2009年9月12日 上午 11:10 ₪

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

  34. 34. 头像 Y.Jiajia 2009年9月13日 下午 2:05 ₪

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

  35. 35. 头像 greengnn 2009年12月9日 上午 12:35 ₪

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

  36. 36. 头像 加盟库 2009年12月10日 上午 5:31 ₪

    额。。。。有点复杂。

  37. 37. 头像 css 小菜鸟 2010年3月12日 下午 10:21 ₪

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

  38. 38. 头像 jacker 2010年6月25日 上午 10:41 ₪

    我有个关于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”几个简单的标签