當(dāng)我們使用鉛筆和紙畫出第一個(gè)布局塊時(shí)，我們是在“容器”塊中設(shè)計(jì)外部的矩形

。在打印設(shè)計(jì)中，“容器”塊本身就是一個(gè)類似商務(wù)名片或廣告牌的實(shí)體。

 

在網(wǎng)絡(luò)上

，我們的“容器”就是瀏覽器的窗口。這種設(shè)計(jì)是應(yīng)該填滿瀏覽器的窗口，還是應(yīng)當(dāng)有設(shè)定的寬度？這個(gè)決定已經(jīng)困擾了網(wǎng)絡(luò)設(shè)計(jì)人員數(shù)百年--甚至可以說是數(shù)千年--當(dāng)使用表格和spacer.gif文件為我們的網(wǎng)頁內(nèi)容安排布局時(shí)，這個(gè)問題就在困擾我們了。好，也可能不是數(shù)千年以前，但這毫無疑問確實(shí)是一個(gè)存在了很久的問題。

 

固定寬度

 

如果使用960網(wǎng)格系統(tǒng)開始設(shè)計(jì)你的布局

，你會(huì)有機(jī)會(huì)設(shè)計(jì)出一個(gè)固定寬度的布局。這些設(shè)計(jì)是使用a div包裝的，a div可以給出一種基于像素的寬度，而主體標(biāo)記的中心應(yīng)當(dāng)使用margin:0 auto;如果瀏覽器窗口的寬度超過960像素，將會(huì)看到一個(gè)水平滾動(dòng)條。固定寬度的布局很容易設(shè)計(jì)和維護(hù)--因?yàn)槟慊旧暇褪窃跇?gòu)建你在photoshop里設(shè)計(jì)的東西。

 

流動(dòng)寬度

 

流動(dòng)的布局是使用基于百分百的寬度設(shè)計(jì)的，這樣“容器”就會(huì)在你改變?yōu)g覽器窗口的尺寸時(shí)伸縮

。在規(guī)劃這些時(shí)需要考慮更多問題，因?yàn)槟阋A(yù)見到每一個(gè)可能的寬度上可能出現(xiàn)的問題。有時(shí)像素--寬度攔與基于百分比的欄會(huì)在流動(dòng)布局中混合起來，但是這種思想會(huì)讓用戶看到在屏幕上充斥著大量水平展現(xiàn)的內(nèi)容。通常來說，流動(dòng)寬度利用了CSS的中間寬度和最大寬度的特性，這可以確?div id="d48novz" class="flower left">