DIV CSS布局

　　用CSS 來布局很輕易。假如你已經(jīng)習慣用表格布局的話，起先會感覺比較困難。其實不難，只不過動機不同，并且在實踐中更有意義。

　　你可以把這一頁面的各個部分當作獨立的版塊來看待，無論你選擇哪一塊。你可以絕對或相對地用彼塊取代此塊。

　　定位

　　定位屬性position用于定義一個元素是否absolute(絕對)，relative(相對)，static(靜態(tài))，或者fixed(固定)。

　　static值是元素的默認值，它會按照普通順序生成，就如它們在HTML的出現(xiàn)一般。

　　relative很像static，但可用top、right、bottom和left屬性來偏移原始位置。

　　absolute使元素從HTML普通流中分離出來，并把它送到一個完全屬于自己的定位世界。在這個稍微瘋狂的世界，這個絕對的元素可以放置到任何地方，只要設置了top、right、bottom和left的值。

　　fixed的行為也很像absolute，但參考于瀏覽器窗口相對于頁面而放置絕對的元素，所以，理論上，當頁面滾動的時候，固定元素完全保持在瀏覽器視區(qū)中。為什么說理論上的?不為別的，在Mozilla和Opera中工作得很好，但IE不會。

　　用絕對定位布局




　　你可以用絕對定位來創(chuàng)建一個傳統(tǒng)兩列布局，只要在HTML中使用如下面的類似規(guī)則:

　　并且應用如下的CSS:

　　#navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 10em; }

　　你將看到，長度為10em的導航條被設置在左邊。因為導航是絕對定位的，對頁面的其他部分的流動不會有任何影響，所以所需要做的只是把內(nèi)容區(qū)域的左邊界寬度設置為與導航條寬度一樣就可以了。

　　實在是太輕易了!然而你并不受這個兩列方法的限制。用精明的定位，你可以布置你所如你所需的更多的塊。比如，你需要增加第三列，你可以為HTML增加“navigation2”塊并且應用如下CSS:

　　#navigation { position: absolute; top: 0; left: 0; width: 10em; } #navigation2 { position: absolute; top: 0; right: 0; width: 10em; } #content { margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */ }

　　絕對定位元素的唯一副作用是，因為它們生活自己的世界里，沒有辦法精確決定它們在哪兒結束。假如你使用上面的例子在一個少導航和多內(nèi)容區(qū)域，沒有什么問題，但是，非凡是使用長度和寬度的相對值時，你經(jīng)常得放棄在下面放置任何事物如腳注的希望。假如你真的要做，與其絕對定位它們，不如浮動它們。

　　浮動

　　浮動將移動一個元素到同一線上的左邊或者右邊，而四周也會有內(nèi)容浮動。

　　浮動經(jīng)常用在定位一個頁面內(nèi)的小型的元素(在本站的原始默認CSS中HTML初級指南和CSS初級指南的“下一頁”連接就是浮動到右邊的。同樣參閱偽元素中的:first-letter例子)，但同樣可以用在更大的塊中，比如導航列。

　　拿下面的HTML例子，你可以應用隨后的CSS:

　　#navigation { float: left; width: 10em; }

　　#navigation2 { float: right; width: 10em; }

　　#content { margin: 0 10em; }

　　假如你不希望下一個元素環(huán)繞浮動對象，你可以使用clear(清除)屬性。clear: left將清除左邊元素，clear: right將清除右邊元素，而clear: both會清除左邊和右邊。所以，舉個例子，你需要一個頁面腳注，你可以用id“footer”為HTML增加一個塊，然后使用如下的CSS:

　　#footer { clear: both; }
　　嗯，你已經(jīng)搞定了。一個腳注會出現(xiàn)在所有列的下邊，不管任何一個列有多長。

　　注重

　　我們已經(jīng)大體上介紹了地位和浮動，著重強調(diào)了頁面的“大”塊，但請記住，這些方法也可以用在這些塊內(nèi)的任何元素。綜合定位、浮動、邊界、補白和邊框，你可以再現(xiàn)任何的版式設計，在布局方面，沒有CSS完成不了表格所能完成的的事情。

　　使用表格布局的唯一理由是你試圖適應古老的瀏覽器。這也是CSS實際上顯示其先進的地方──在文件大小上，高易用性的頁面只相當基于表格的頁面的一小部分。