DIV的佈局是挺基礎,也挺重要的知識,有幾個關鍵字:width、height、margin和float,用幾個例子進行最簡單的說明:css
每一個DIV獨佔一行的佈局html
先看一個很常見的例子:設計網頁時,每每能夠將頁面分紅top、center和bottom三個區域瀏覽器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <style type="text/css"> #top { background-color: #666666; height: 50px; width: 480px; margin: 5px auto; } #center { background-color: #CCCCCC; height: 200px; width: 480px; margin: 5px auto; } #bottom { background-color: #666666; height: 50px; width: 480px; margin: 5px auto; } </style> </head> <body> <div id="top"> </div> <div id="center"> </div> <div id="bottom"> </div> </body> </html>
說明幾點,而後再看下IE下執行的效果:佈局
一、每一個div元素默認佔據一行學習
二、#top、#center和#bottom三個css樣式中的margin屬性,都定義成」margin: 5px auto「,其中,5px是爲了在div之間產生一個小小的隔斷;特別說明的是將margin設置了auto,在IE6以上的瀏覽器,這能讓元素居中,要記下來。ui
三、div元素間,我加了一個」 「,這是由於,若是你不加任何內容在裏面,瀏覽器會忽略div的呈現,我在IE和Chrom上都嘗試過。別拿空格不當內容。spa
多個DIV排排站的佈局設計
因爲默認狀況下,每一個div元素獨佔一行,而常見的一種佈局是兩個或多個div並列排排站,好比左側的導航區域和右側的內容區域並列顯示,這時就須要經過css的樣式定義來達到這個目的。其中最重要的是對float屬性的設置,即css浮動的概念。code
浮動的div比如漂浮在水面的一片紙,能夠自由的向左或向右移動,直到其外邊框碰到兄弟div或父親div(即包含其的div)的外邊框爲止。要特別注意的是,浮動的div不佔據文檔的普通流。啥意思呢?就是說,其餘不浮動的div,好像不知道這個div的存在。用兩個圖直觀的說明一下(圖片來自w3school):xml
沒有設置浮動樣式的三個框的相對位置如左圖所示,各自佔據一行。一旦div1設置成向右浮動(float:right),它在文檔普通流中的位置就好像消失了,div2和div3自動上移,而div1則漂到了右邊,直到外邊框碰到父親框。爲了更直觀的說明浮動屬性,看下面的代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <style type="text/css"> #top { background-color: #666666; height: 50px; width: 480px; margin: 5px auto; } #center { background-color: #CCCCCC; height: 200px; width: 480px; margin: 5px auto; } #bottom { background-color: #666666; height: 50px; width: 480px; margin: 5px auto; } #center_left { background-color: #66FF66; width: 180px; height: 200px; float: left; } #center_right { background-color:#FFFF99; width: 300px; height: 200px; float: left; } </style> </head> <body> <div id="top"> </div> <div id="center"> <div id="center_left"> </div> <div id="center_right"> </div> </div> <div id="bottom"> </div> </body> </html>
#center_left和#center_right中都有浮動的設置(float: left)。id爲center_left和id爲center_right的兩個div互爲兄弟,共同被id爲center的div所包含,即父親。因而左側div向左「漂浮」,直到左邊框碰到父親div的左邊框;而右側div則在同一行向左「漂浮」(思考:爲什麼是同一行?),直到其左邊框碰到左側div的右邊框。夠繞。看看效果:
左右兩個div排排站了。爲了說明左右浮動的概念,我稍微修改一下#center_right的樣式,將width減小20元素,並將float設置成右浮動:
#center_right { background-color:#FFFF99; width: 280px; height: 200px; float: right; }
能夠看到,因爲左右兩個div的寬度加在一塊兒不足父親div的總寬度,所以中間出現了20px的空隙。
喜歡動手的我,又稍微修改了一下#center_left和#center_right兩個樣式,請細細觀察:
#center_left { background-color: #66FF66; width: 180px; height: 200px; float: left; } #center_right { background-color:#FFFF99; width: 300px; height: 200px; }
這是說明浮動不佔據文檔流的絕佳例子!因爲左側div設置成向左浮動的樣式,所以對於沒有設置浮動樣式的右側div,即文檔的一個普通流,會默認靠左停靠在父親div中,因而便被浮動的左側div遮擋住了180px。
嗯,上面這兩個小小的章節,是div佈局最簡單的例子,可以看出,對佈局樣式的稍稍變更,就能產生靈活多變的外觀。但這只是最最基礎的東西,多多實驗,從實際效果中領會。好比如何讓div隨着窗口的伸縮而進行浮動?
第二篇筆記就到這裏了。明日我去參加今年最後一場足球賽,生命不息,踢球不止。
繼續學習,繼續筆記……