WEB標準佈局(DIV+CSS)學習筆記(二)--DIV的佈局基礎

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">&nbsp;</div>
  <div id="center">&nbsp;</div>
  <div id="bottom">&nbsp;</div>
</body>
</html>

說明幾點,而後再看下IE下執行的效果:佈局

一、每一個div元素默認佔據一行學習

二、#top、#center和#bottom三個css樣式中的margin屬性,都定義成」margin: 5px auto「,其中,5px是爲了在div之間產生一個小小的隔斷;特別說明的是將margin設置了auto,在IE6以上的瀏覽器,這能讓元素居中,要記下來。ui

三、div元素間,我加了一個」&nbsp;「,這是由於,若是你不加任何內容在裏面,瀏覽器會忽略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">&nbsp;</div>
  <div id="center">
      <div id="center_left">&nbsp;</div>
      <div id="center_right">&nbsp;</div>
  </div>
  <div id="bottom">&nbsp;</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隨着窗口的伸縮而進行浮動?


第二篇筆記就到這裏了。明日我去參加今年最後一場足球賽,生命不息,踢球不止。


繼續學習,繼續筆記……

相關文章
相關標籤/搜索