防彈衣并不能100%保證不受傷害，但穿了總是比不穿好。這樣的規(guī)則同樣適用于Web設計。通過增加網(wǎng)頁的靈活性,以及采用必要的步驟來保證它在盡可能多的場景中都具備可讀性，我們就給自己的作品賦予了一些與眾不同的特色。這是一個循序漸進的過程，并且當采用HTML和CSS后，將能夠更加容易構建出賞心悅目并且具有良好適應能力的設計方案。

如何創(chuàng)建流動布局和彈性布局，為我們無懈可擊的設計方案增添一個工具。掌握如何恰當?shù)厥褂盟鼈?，將給網(wǎng)頁設計增加更多的靈活性。流動布局并不是只能由CSS實現(xiàn)的，它也可以通過表格來實現(xiàn)。文中您將會發(fā)現(xiàn)，把布局的細節(jié)放在樣式表中實現(xiàn)，還有許多其他好處。彈性布局中的列使用em作為長度單位，基于em的布局會隨著字體大小的變化而放大或縮小。

為什么這樣設計不是無懈可擊的？

一、常見的方法

多列布局并不是只能由CSS實現(xiàn)，也可以使用表格同樣實現(xiàn)能夠根據(jù)瀏覽器窗口的大小而自由縮放的(流動)布局。以前，設計者會考慮到使用列來實現(xiàn)，每一列都由一系列表格單元格來構造。圖中顯示了一個常用的布局結構，有一個頁頭橫跨頂部、兩列內(nèi)容以及一個橫跨底部的頁腳。

以前，我們似乎很自然地會使用表格來構建這種結構，用colspan這個特性使頁頭和頁腳橫跨于內(nèi)容列的上方與下方。大致的 HTML代碼如下所示：

<table>

<tr>

<td colspan=”2″>header</td>

</tr>

<tr>

<td>content</td>

<td>sidebar</td>

</tr>

<tr>

<td colspan=”2″>footer</td>

</tr>

</table>

但大多數(shù)的設計者和開發(fā)者不會就此罷休。構造好了基礎結構以后，會在這個結構中的每一個單元格中再嵌入表格，為布局創(chuàng)建邊界和像素級別精度的間距。最終，為了使構造的結構和頁面的樣式能夠更加變化靈活，會添加很多HTML代碼。

為了達到流動可變性，可將表單元格的寬度設成百分比形式，這使得布局可以完全擴展而不需要考慮瀏覽器窗口的大小。

<table width=”100%”>

<tr>

<td colspan=”2″>header</td>

</tr>

<tr>

<td width=”70%”>content</td>

<td width=”30%”>sidebar</td>

</tr>

<tr>

<td colspan=”2″>footer</td>

</tr>

</table>

整個表格被設置成100%的寬度，列可以根據(jù)任意需要的寬度進行拆分。如圖所示：左邊是一個寬一些的內(nèi)容欄，右邊是一個窄一些的側邊欄。當瀏覽器窗口擴展或收縮而使布局的大小發(fā)生變化時，各列寬度的比例將保持不變。

這表明了表格能夠用來構造布局，同時也表明了表格能夠用來構造隨瀏覽器窗口變化的流動布局。然而，還可以采用其他更完美的辦法做到這一點。

二、值得思考的問題：為什么這樣設計不是無懈可擊的？

表格布局最主要的問題之一，就是表示內(nèi)容與外觀的 HTML 代碼混在一起了。換句話說，邊框、空白GIF和圖片所用的代碼都嵌入在表示重要內(nèi)容的代碼中。這意味著只典型的桌面瀏覽器才能夠順利地閱讀這樣的網(wǎng)頁。而使用屏幕閱讀軟件、文本瀏覽器或在移動設備上閱讀軟件時，就可能遇到困難。

1.　大量的代碼

內(nèi)容與外觀的纏結還意味著代碼量的增大。使用嵌套表格來構造布局，所需要的代碼量有時候是相當驚人的。許多額外的表單元格被用來構造欄間空白、邊框和其他頁面視覺效果。如果使用 CSS，HTML 代碼就能夠減少到只保留它最本質(zhì)的部分，對外觀的設定可以移到樣式表中。這樣，網(wǎng)頁在非傳統(tǒng)瀏覽設備和瀏覽軟件中的可讀性就立刻提高了，對搜索引擎也更加友好(這是一個額外的、免費的好處)。

2.　噩夢般的維護工作

因為大量的嵌套表格造成糾纏在一起的大量代碼，這只能增加維護的工作量。對于基于表格布局的網(wǎng)頁，要改造它們的外觀，需要花費更大的力氣——檢查大量的單元格和額外的 H T M L 代碼。在這樣的情形下，修改的工作量會大得令人發(fā)狂，還不如推倒重來。

3.　并非最佳的內(nèi)容順序

使用基于表格的布局還存在一個缺點，即文本瀏覽器和屏幕閱讀器上所呈現(xiàn)出來的內(nèi)容有順序問題。例如，有一個三列的布局，我們知道，HTML 中的順序總是左列、中間列，然后右列。這是操作的表格方式。

在那些基于文本的瀏覽器或屏幕閱讀器中，通常只能按上面的這種順序?qū)?nèi)容進行解析。但最主要的內(nèi)容往往并不放在左列，而是放在中間列，這樣，它很有可能被埋沒在頁面代碼中。使用表格構造布局時，想要安排重要的內(nèi)容在其他瀏覽器或軟件中先被讀到是不可能實現(xiàn)的。對于所有瀏覽設備都只有一種順序，迫使用戶在使用文本和屏幕閱讀器時，想要得到重要內(nèi)容之前，就要先艱難地穿過那些無關緊要的代碼。

幸運的是，基于CSS的布局允許對內(nèi)容順序進行重排，這樣，可以使用 HTML ，采用最優(yōu)化的順序來編寫文件的源代碼，而以其他的樣式進行呈現(xiàn)。而且，所需的代碼量大大地減少了，還將內(nèi)容從表示層分離出來。那么，下面讓我們開始使用CSS來構建流動的多列布局吧！

為什么這樣設計是無懈可擊的？

一、無懈可擊的方法：

雖然在本文的無懈可擊例子中重點介紹的是如何創(chuàng)建靈活可變的布局，但還是應該注意到，固定寬度的基于CSS的布局也具有無寬度限制的布局的很多優(yōu)點。它們的主要區(qū)別是，可變的布局能夠隨著瀏覽器窗口的大小而伸縮，能夠給用戶更多的掌控能力。當屏幕尺寸可能存在明顯差別(例如移動設備)時，這種方法的效果更好。

我們將介紹利用CSS創(chuàng)建流動布局的必要步驟及其原理?，F(xiàn)在讓我們從最簡單的兩欄布局(具有頁頭和頁腳) 開始創(chuàng)建。

1. HTML 代碼結構

我們不再使用表格單元格來構造頁面的列結構，而使用簡單的<div>和其他HTML 5語

義元素將內(nèi)容劃分成塊。還要時刻記住，要使內(nèi)容有最佳的排列順序。

一個最基本的簡單兩欄布局可以用如下 HTML 代碼編寫：

<div id=”wrap”>

<header role=”banner”>

<h1>Header Goes Here</h1>

</header>

<div id=”content” role=”main”>

… content goes here …

</div>

<div id=”sidebar” role=”complementary”>

… sidebar goes here …

</div>

<footer role=”contentinfo”>

… footer goes here …

</footer>

</div> <!– end #wrap –>

代碼結構就應該這樣，很難再簡化了。這種排序方式最為合理：頁頭、內(nèi)容、側欄和頁腳。這是考慮了在沒有CSS的情況下頁面的布局。就這一點來說，到目前為止，一切都還不錯。

我在整個布局之外增加了一個<div>容器。<div>通?？梢栽诟鞣N目的的設計中派上用場。所以，每當使用CSS來構建布局時，都會從<div> 開始。

2．創(chuàng)建欄：浮動與定位

用CSS創(chuàng)建欄的方法之一就是絕對定位(absolute positioning)，所謂絕對定位，就是使用屏幕上的X和Y坐標將組件定位在特定的位置。但使用絕對定位最大的缺點是，不能使頁腳準確地定位于所有欄的下方。

在構建多列布局時，方法的不靈活導致CSS設計者通常使用 fl oat 屬性。因為浮動元素是可以被清除的，所以它是我們用來控制分欄布局的最好工具。CSS 3提供了創(chuàng)建模塊化布局的新語法，但是這些語法還沒有得到瀏覽器的廣泛支持。而沒有這些支持，是無法完成布局設計這類比較關鍵的任務的。因此我們?nèi)匀谎赜?#64258;oat屬性。

3．應用樣式

選擇用浮動作為創(chuàng)建欄的方法之后，我們再用百分比將網(wǎng)頁分為內(nèi)容欄和側邊欄兩部分。在本例中，比例為 7:3(70% 內(nèi)容欄，30% 側邊欄)。

第一步，要給頁頭、側邊欄和頁腳加上背景色，以便區(qū)分我們所要處理的這幾個部分。

header[role="banner"] {

background: #666;

}

#sidebar {

background: #999;

}

footer[role="contentinfo"] {

background: #DDD;

}

然后做兩件事。首先，設置內(nèi)容欄的寬度為 70%，側邊欄的寬度為 30%。然后，使內(nèi)容欄浮動在左邊，側邊欄浮動在右邊。這使得兩個欄的位置相對。

header[role="banner"] {

background: #666;

}

#content {

fl oat: left;

width: 70%;

}

#sidebar {

fl oat: right;

width: 30%;

background: #999;

}

footer[role="contentinfo"] {

background: #DDD;

}

4．Gutter

“gutter”這個術語已經(jīng)沿用了很多年了，指文本欄之間的間距。在處理流動布局的欄寬時，gutter 的設置就會變得非常困難。在一個固定欄寬的設計中，我們可將預計的寬度設置成像素大小，這樣就可以很容易地連同欄寬一并考慮 gutter的寬度。

但對于流動的欄寬，我們有兩種選擇：將gutter寬度設成百分比的形式，欄寬也如此；或者，添加一個額外的<div>元素來設定和欄寬分離的外邊距和內(nèi)邊距。后一種方法從 HTML 代碼的角度來看不是最佳的，但它確實提高了控制水平，這在復雜的設計中是必不可少的。稍后將再次討論這個問題。

為內(nèi)容欄與側邊欄之間的gutter設置百分比寬度，一種方法就是給內(nèi)容欄指定一個右外邊距，然后從內(nèi)容欄的寬度里減去它的值。當然百分比值的總和應該是100%。

header[role="banner"] {

background: #666;

}

#content {

fl oat: left;

width: 65%;

margin-right: 5%;

}

#sidebar {

fl oat: right;

width: 30%;

background: #999;

}

footer[role="contentinfo"] {

clear: both;

background: #DDD;

}

通過上面的設置，我們把內(nèi)容欄的寬度減少了5%，同時給內(nèi)容欄的右外邊距增加了同樣的寬度來設置欄間的 gutter。顯示結果，在內(nèi)容欄和側邊欄之間多了一條白色的間隔。

要記住，當給gutter賦百分比值時，欄間的間隔也會隨著窗口的寬度而改變。在窄的窗口中會更小，在寬的窗口中則會更大。對于某些設計需求，這或許是個問題。例如，往往要求欄的邊線或背景圖片在欄之間有一個固定的間隔。在這些情況下，給容器加上第二層<div>容器是最佳選擇了，這一點將在本章中繼續(xù)討論。但如果追求簡單化，那么給外邊距指定一個百分比值是最簡單的選擇。

5. 欄的內(nèi)邊距

如果欄的寬度設置使用百分比的方式，那么在指定其內(nèi)邊距時，也會出現(xiàn)相似的問題。這是內(nèi)邊距的計算方式造成的(在已聲明元素的寬度上為“增加”)。如果使用除百分比之外的值來設定欄的內(nèi)邊距，那么最后的總寬度很容易超過或小于預期的值。這會讓您輕易地放棄選擇用浮動來控制頁面布局。

例如，我們給側邊欄的內(nèi)邊距增加20個像素，使其顯得更寬松一些。

header[role="banner"] {

background: #666;

}

#content {

fl oat: left;

width: 65%;

margin-right: 5%;

}

#sidebar {

fl oat: right;

width: 30%;

padding: 20px;

background: #999;

}

footer[role="contentinfo"] {

clear: both;

background: #DDD;

}

在寬度固定的布局中，可以很容易地將列兩邊定義的寬度各減去20像素的內(nèi)邊距。但在流動寬度布局中，是使用百分比來定義寬度的，根本無法設定一個30%的寬度減去40像素的寬度。這會使側邊欄的寬度變得大于30%，無法再與內(nèi)容欄<div>并列，會被迫擠到

內(nèi)容欄下邊去。這可不是我們所希望的效果。

那么在這種情況下會有哪些解決方案可供選擇呢？

• 將內(nèi)邊距也設置為百分比，然后從列寬中減去它的值(就像前面我們增加一個 5%的列間 gutter 時所做的一樣)。
• 只在側邊欄內(nèi)部的元素中應用內(nèi)邊距。
• 增加一個額外的<div> ，可以使用任意值來分別為它們的內(nèi)邊距賦值。
• 使用中新增的極為方便的box-sizing屬性，可以改變?yōu)g覽器計算方框尺寸的方式(例如，在對象內(nèi)部應用內(nèi)邊距)。

6．設置寬度的最大值和最小值

構建流動布局時，設計者常常要面對的一個障礙就是行的長度。能夠隨心所欲地伸展布局，對用戶而言非常有益。但到了一定程度時，行的長度可能長到使內(nèi)容難以閱讀，也可能窄到破壞頁面上其他部分的外觀。

在這里，CSS的max-width和min-width屬性就派上用場了。給流動布局設置最大和最小寬度，可以防止欄被無限制地伸長或收縮。很遺憾，IE6 不支持這種功能。但對支持這種功能的瀏覽器來說，它會帶來很大的提高，而且添加起來十分便捷。

7. 滑動人造欄

如果您重新觀察這一整章中我們一直在用的兩欄布局，就會注意到，雖然我們給側邊欄設置了綠色的背景色，但這個背景只會往下擴展到剛好滿足所需的位置。所以，根據(jù)欄中所容納的內(nèi)容，側欄的高度與內(nèi)容欄會有所不同。

通常，人們希望所看到的欄的外觀是等高的，而且定義了一致的背景和邊框。但使用流動布局時，無法使一個欄的高與另一欄相一致。

使用這種技術，平鋪的圖片位于欄的后面，造成一種錯覺讓人以為兩欄一樣高。這種方法可以使背景色、樣式和邊框都位于布局的后邊，并一直延伸到頁面底部。然而，這種技術只能應用于寬度固定的布局，其中列寬預先確定好，然后被內(nèi)置到平鋪的圖片中。

Douglas Bowman(www.stopdesign.com/log/2004/09/03/liquid-bleach.html)和Eric Meyer(www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/)使這種思想更推進了一步，他們提出了“Sliding Faux Columns(滑動人造欄) ”方法，這樣，平鋪的圖片就可以在流動布局的后面滑動，既可以實現(xiàn)欄等高的效果，同時也保留了靈活性。

二、再次探討：為什么這樣設計是無懈可擊的？

第一個理由，代碼量更少。不必再用嵌套的表格在 HTML 代碼中實現(xiàn)邊框、背景和間隔，我們只要用幾個簡單的<div>，而不必再用CSS為每欄設置位置與樣式，就可以輕松地構造出一個多欄布局。即使在設計固定寬度的 gutter 和“滑動人造欄”(Sliding Faux Columns)時添加了額外(然而是必需)的<div>，HTML代碼量還是遠遠少于使用嵌套表格時的情形。

第二，有了更易于維護的基本代碼。因為外觀的細節(jié)都在樣式表中定義，HTML代碼變得更容易閱讀，要更改布局的外觀，只需更新幾個樣式規(guī)則即可。使用CSS的float屬性，在多欄布局中，可以給內(nèi)容安排最佳的順序，最重要的內(nèi)容可以安排在 HTML 代碼的最前面。這給使用屏幕閱讀器、文本瀏覽器和不支持CSS的其他設備進行瀏覽的用戶帶來了好處。

最后，當實現(xiàn)了一個靈活的、流動的布局時，就會賦予用戶一種控制能力。使他們能夠隨心所欲地擴展布局，也能在使用小屏幕時使窗口變窄。這種更高層次的控制能力，是證明設計方案無懈可擊的另外一種方式，使設計方案能適應盡可能多的環(huán)境。

固定布局、流動布局和彈性布局，哪種方法更好呢？在選擇采用何種布局時，需要記住最重要的一點是，每種方法都有它合適的位置。要通過試驗來搞清楚它們是如何運作的，以及在每個解決方案中它們的優(yōu)缺點

One point:選擇討論流動布局和彈性布局，不是因為我覺得它們在任何時候都優(yōu)于固定寬度的布局。更恰當?shù)卣f，每種布局都有它自己適合的場合，這主要取決于設計需求，因為對網(wǎng)頁設計者來說，設計需求并不總是能夠由自己作出決定的。

這就是說，如果您的設計方案中能加上流動布局或者彈性布局，那么就請為用戶能從中獲益而感到高興吧。流動邊距也為適應性Web設計(Responsive Web Design，RWD)打下了基礎，適應性Web設計是一種根據(jù)網(wǎng)格布局所在的瀏覽環(huán)境使它們進一步調(diào)整并適應環(huán)境的方法。

PS:小提示

當構建流動布局時，應當記住以下幾點：

• 使用 fl oat 屬性來構建多欄布局，可以清除掉浮動對象對頁腳所產(chǎn)生的影響。
• 從列寬中減去 gutter 的百分比寬度值，或者增加一個額外的<div>在列寬以外單獨設置內(nèi)邊距的值。
• 使用CSS 3的box-sizing:border-box;，在基于百分比的元素聲明的寬度內(nèi)設置內(nèi)邊距和邊框。這種方法不需要使用額外的<div>來控制gutter，但是需要注意，并不是所有的瀏覽器都支持box-sizing。
• 為流動布局設置min-width和max-width，防止布局尺寸過大或過小。不必在意IE6不支持這種功能。
• 嘗試用“滑動人造欄”(Sliding Faux  Columns)的方法，通過使邊框和背景一直延伸到頁腳，來實現(xiàn)等高欄(但很靈活)。
• 基于em的布局能提供另外一種靈活性。要記住，當把瀏覽器中的字體增大到某個值時，整個設計中的一部分就只能通過水平滾動條才看到(除非對布局設定了max-width)。

至此已經(jīng)介紹了創(chuàng)建一個靈活、流動、基于CSS的布局的基礎知識，接下來將把這本書中迄今討論過的方方面面綜合起來，從而構建一個完整的、單頁的無懈可擊的設計方案。

 

本文節(jié)選自《無懈可擊的web設計——使用HTML5和CSS提高網(wǎng)站的靈活性與適應性》一書，Dan Cederholm著，馬躍譯，由清華大學出版社出版。