YUI 中的 Grids CSS值得關(guān)注和學(xué)習(xí)的
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:23:20 作者:佚名
我要評(píng)論

YUI 中的 Grids CSS 主要有三個(gè)部分值得大家關(guān)注和學(xué)習(xí):
1、布局的思想:使用 “負(fù) margin(Negative Margins)” 技術(shù)
詳細(xì)可參閱:《Creating Liquid Layouts with Negative Margins》
2、使用 em :當(dāng)用戶改變字體大小時(shí),寬度同時(shí)改變。
技巧:
YUI 中的 Grids CSS 主要有三個(gè)部分值得大家關(guān)注和學(xué)習(xí):
1、布局的思想:使用 “負(fù) margin(Negative Margins)” 技術(shù)
詳細(xì)可參閱:《Creating Liquid Layouts with Negative Margins》
2、使用 em :當(dāng)用戶改變字體大小時(shí),寬度同時(shí)改變。
技巧:用 13 像素來平分寬度(保留小數(shù)到千分位),而 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 得到。同解于為什么現(xiàn)在的 YUI 源碼中 IE 下 750px 的寬度是:56.301em(750 / 13 * 0.9759)。
此算法將在 YUI 的下個(gè)版本中換為上面的新算法(IE 瀏覽器用 13.333 )。
3、清除布局的浮動(dòng)
針對(duì)非 IE 瀏覽器:
.yui-gf:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
而對(duì)于 IE 瀏覽器,使用了 zoom:1 來觸發(fā) haslayout。不過對(duì)于此 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.
個(gè)人比較贊成他的想法:I think it is an acceptable tradeoff。
相關(guān)文章
- 本文通過各種實(shí)例向大家闡述CSS Grid布局,讓我們一起領(lǐng)略其強(qiáng)大的魅力,需要的朋友可以參考下2014-12-30
CSS Grid布局教程之瀏覽器開啟CSS Grid Layout匯總
在這篇文章中,主要向大家介紹如何讓自己的瀏覽器支持CSS Grid Layout模塊功能,需要的朋友可以參考下2014-12-30- 在這篇文章中簡(jiǎn)單的介紹了CSS Grid Layout,以及為什么要使用他,并且介紹了其一些術(shù)語:網(wǎng)格線、網(wǎng)格軌道、網(wǎng)格單元格、網(wǎng)格區(qū)域和網(wǎng)格容器等,為后面如何學(xué)習(xí)和使用CSS G2014-12-30
使用CSS Grid布局實(shí)現(xiàn)網(wǎng)格的流動(dòng)
這篇文章主要介紹了使用CSS Grid布局實(shí)現(xiàn)網(wǎng)格的流動(dòng),需要的朋友可以參考下2014-12-30- 采用如下的樣式 [code] margin:auto; width:98%; overflow:scroll; _height:expression(this.scrollHeight>365?"365px":"auto"); [/code]2009-06-05
- 這篇文章主要介紹了5分鐘教你學(xué)會(huì) CSS Grid 布局的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-04