手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >YUI 中的 Grids CSS值得关注和学习的
YUI 中的 Grids CSS值得关注和学习的
摘要:YUI中的GridsCSS主要有三个部分值得大家关注和学习:1、布局的思想:使用“负margin(NegativeMargins...

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。

【YUI 中的 Grids CSS值得关注和学习的】相关文章:

DIV+CSS标准化网页设计常用学习方法与技巧

三个很特别的CSS小技巧分享

CSS兼容的技巧

CSS实现让同一行文字和输入框对齐的方法

CSS之overflow属性用法

CSS控制ul缩进间距和去掉li点的方法

CSS垂直居中和水平居中方法总结

css body背景图全屏不论分辨率大小

CSS学习中的一些技巧

css3进行截取替代js的substring

精品推荐
分类导航