DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> YUI 中的 Grids CSS值得關注和學習的
YUI 中的 Grids CSS值得關注和學習的
編輯:CSS詳解     

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved