布局

　　CSS至關(guān)重要的作用,輛國 CSS的設計初衷.

　　CSS布局和(hé)幾年前table橫行時的布局又不太一樣些上, 在結構化語義化的HTML文(wén)檔後面, CSS在格式化務很文(wén)檔的渲染效果, 把結構化文(wén)檔用表現化語言姐從來描述. 簡而言之, 就是CSS不需要表現性标簽!

　　CSS布局技術(shù)依賴于三個(雜遠gè)基本概念: 定位, 浮動(dòng), margin操縱. 布局技術(s鐘到hù)之間沒有本質的區别, 相同一種布局議她讓100個(gè)前端開發工程師(shī)來做, 可(kě)能就有100種方法報南.

　　居中(zhōng)

　　在table時代, align和(hé)Valign相當短樹的好用, 而在CSS中(zhōng)卻沒有簡單實現的方法們身,所以在标準化剛剛開始推廣的時候, 很多重構項目中(zhōng)居的謝中(zhōng)問(wèn)題變成了阻礙标準化進步人務的絆腳石.

　　1. 自動(dòng)外補丁水平居中(zhōng)

　　一般情況下(xià)水平居中(zhōng)比較容易實現, 隻需要給做但要居中(zhōng)的容器(qì)設定寬度, 以及自動(dòng)水平外補丁就麗鄉可(kě)以了.網頁教學網

　　比如(rú)HTML如(rú)下(xià):

　　CSS如(rú)下(xià): 網頁教學網

　　body{}

　　.wrapper{width:760px;margin:0 a中師uto;}

　　很簡單不是嗎? 但是有點小問(wèn)題.分金.. 我們親愛的IE家族裡, IE5.x和(hé器數)IE 6不支持自動(dòng)外補丁, 但是同樣幸運的是, IE将 text山商-align:center 理解為所有東西居中一媽(zhōng), 而不隻是文(wén)本.西到 哈哈, 可(kě)以利用這個(gè)Bug.

　　将CSS改為:

　　body{text-align:center;}

　　.wrapper{width:760px;margin下舞:0 auto;text-align:left;}

　　這裡就用到了一種Hack,不過不會做從影響其他浏覽器(qì)的Hack就是好Hack,呵呵, 就先銀懂這麼用着吧~

　　等等, 好像Netscape那邊也出問(wèn)題了, 間南用Netscape 6将窗口縮小到小于容話看器(qì)寬度時, 容器(qì)的左邊就會跑到屏幕外邊靜相去了, 而且還不會有滾動(dòng)條...萬惡的浏覽器(qì)大戰啊.報對..

　　再來改改我們的CSS:

　　body{min-width:760px;text-alig短子n:center;}

　　.wrapper{width:760px;margin:0 地廠auto;text-align:left;}

　　這樣就基本上ok了. 網頁教學網

　　2. 定位法水平居中(zhōng)

　　我們也可(kě)以稍稍複雜的用定位法花廠來完成這個(gè)工作. 所謂的定位法是用 position 屬性來定金聽義容器(qì)位置.網頁教學網

　　同樣用上面一例的HTML代碼,

　　我們用定位法的CSS如(rú)下(x算工ià):

　　body{margin:0;padding:0;}

　　.wrapper{position:relative身快;left:50%;width:760px;margin-l煙書eft:-380px;}

　　為什麼用相對定位( relative )呢(ne)? 能少好用絕對定位( absolute )嗎?

　　絕對定位當然也可(kě)以, 但是絕對定位會訊刀将容器(qì)提出文(wén)檔流, 讓後面的文(wén熱北)檔流到定位容器(qì)的位置去了, 稍不注頻化意就會被定為的容器(qì)遮蓋住後面的内電爸容, 而relative不會将容器(qì)提出文(wén)檔流, 開暗後面的文(wén)檔流會給定位的容器(qì)留下(xià)它應有的空間.

　　3. 垂直居中(zhōng)

　　CSS中(zhōng)比較大的問(wèn)題出現了, CSS較畫謝難使用簡單的方法來完成垂直居中(zhōng). 網頁教學網

　　在容器(qì)中(zhōng)要使文(w些那én)字垂直居中(zhōng), 那可(kě)以将容器(qì)的li又師ne-height設置的和(hé)height一樣來完成這個(gè)工多兵作,

　　但是要使容器(qì)垂直居中(zhōng)的話, 那就比較複雜兵微了.

　　HTML如(rú)下(xià):

　　123

　　CSS如(rú)下(xià):

　　body{margin:0;padding:0;height:厭新100%;}

　　.wrapper{display:table-cell;ver可件tical-align:middle;width:60城道0px;height:400px;border區雜:solid 1px red;}

　　#box{width:200px;margin:auto;麗店vertical-align:middle筆日;border:solid 1px blue;}

　　按理說這樣就可(kě)以了呀, 但是IE下(空樹xià)面一點效果都沒有...那是因為IE的display屬性隻喝笑接收:block, inline, inli子如ne-block, none, inherit民美, 不接收table, table-cell, tabl筆輛e-row, 那就頭痛了呀.

　　唔, 其實思路(lù)有很多, 我提供其中(zhō能裡ng)一種:

　　CSS如(rú)下(xià):

　　body{margin:0;paddi呢就ng:0;height:100%;}

　　.wrapper{width:600px;height:400px做月;border:solid 1px red;}

　　#box{width:200px;height什秒:200px;position:relative;top:50%;left:5服呢0%;margin-top:-100px;margin-le都黑ft:-100px;border:sol去輛id 1px green;}

　　局限性非常大, 必須要已知高度...

　　更可(kě)以對IE浏覽器(qì)進行filter之後hac姐道k它. 使用ie獨有的expression, 雖然在大型腳本上e電銀xpression表現的相當差, 但是簡單的計算offsetH生藍eight還是不太會影響性能, 再怎麼說M$也針對ex離算pression進行過優化.

　　所以垂直居中(zhōng)還是要看場黃校合自行挑選合适的方案來解決.

　　浮動(dòng)布局

　　現在大家都熟知浮動(dòng)布看坐局了, 不多說, 這個(gè)是CSS布局的基礎...主要是float和暗路(hé)margin的合理應用.

　　Faux Columns:

　　偉大的Dan的另一項發明, 呵呵煙國, 其實很簡單, 用垂直平鋪背景圖來做出視覺上多欄布局等煙玩高的效果. 但是很實用, 不是嗎?

　　Equal height boxes with CSS:購報

　　在标準推行過程中(zhōng)比較有名的文(wén)我醫章之一, 介紹像table一樣進行CSS布局, 但是不适用于IE...唉

　　彈性布局

　　很不錯的理念, 原理其實也不難,工影 就是用em來标注尺寸, 這樣就可(kě)以讓浏覽器(q南水ì)自行放大或縮小任何的容器(qì)或是元素了.