CSSFloatLayoutBasics-CSS浮動布局基礎(chǔ)_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　CSS Float Layout Basics - CSS浮動布局基礎(chǔ)：基于浮動的布局利用了float（浮動）屬性來并排定位元素，并在網(wǎng)頁上創(chuàng)建列�？梢岳眠@個屬性來創(chuàng)建一個環(huán)繞在四周的效果，例如環(huán)繞在照片四周，但是當(dāng)你把它應(yīng)用到一個<div>標(biāo)簽上時，浮動就變成了一個強大的網(wǎng)頁布局工具。float屬性把一個網(wǎng)頁元素移動到網(wǎng)頁（或者其他包含塊）的一邊。任何顯示在浮動元素下方的HTML都在網(wǎng)頁中上移，并環(huán)繞在浮動四周。

　　float屬性接受3種不同值之一：left（左）、right（右）和none（無）。要把一張圖片移到網(wǎng)頁的右邊，可以創(chuàng)建這個類樣式，并把它應(yīng)用到<img>標(biāo)簽上：

示例代碼 [www.hl5o.cn]

.floatRight { float: right; }

　　相同的屬性應(yīng)用到一個布滿內(nèi)容的<div>標(biāo)簽上也可以創(chuàng)建一個工具條：

示例代碼 [www.hl5o.cn]

#sidebar {
float: left;
width: 170px;}

　　圖11-3展示了這兩個樣式的作用。

　　注重：none值關(guān)閉了任何浮動，把元素像一個正常的沒有浮動的元素一樣定位。這只有已經(jīng)應(yīng)用到元素的浮動無效時才有用。你可能有一個應(yīng)用了特定類如“sidebar”的元素，這個元素浮動到右邊。但在網(wǎng)頁中，你可能要帶有這個類的元素不要浮動，但是又要放置在網(wǎng)頁流之內(nèi)，就如這個“注重”方框。通過用float: none創(chuàng)建一個更具體的CSS選擇器可以防止這個元素浮動。

　　如圖11-3的一個簡單的兩列設(shè)計只需要幾個步驟。

　　1. 把每一列都包圍在一個帶有ID或者class屬性的<div>標(biāo)簽里面。

　　在圖11-3中，列在左邊工具條中的新聞項目被包圍在一個<div>里面——<div id="news">，并且主內(nèi)容在另一個div里面——<div id="main">。

　　2. 把工具條<div>浮動到右邊或者左邊。

　　當(dāng)你使用浮動時，源順序（添加HTML到一個文件的順序）很重要。浮動元素的HTML必須顯示在要包圍它的元素的HTML前面。

　　圖11-4展示了3個兩列的設(shè)計。左邊的圖表展示了網(wǎng)頁HTML的源順序：給banner的一個<div>，后面跟著sidebar的<div>，最后是main content的<div>。在右邊，你可以看到實際的網(wǎng)頁布局。在HTML中sidebar在main content前面，因此它可以浮動到左邊（上圖，下圖）或者右邊（中圖）。

　　3. 給浮動的sidebar設(shè)定一個寬度。

　　除非你正浮動一張帶有預(yù)設(shè)寬度的圖片，否則你應(yīng)該始終給浮動設(shè)定一個寬度。這樣，給浮動元素創(chuàng)建一個固定的尺寸，使瀏覽器給其他內(nèi)容騰出了包圍該位置的空間。
　　這個寬度可能是一個固定的尺寸比如170px或者10em。你也可以對基于瀏覽器窗口寬度的彈性設(shè)計使用百分比。假如sidebar是20%寬，瀏覽器窗口是700px寬，那么sidebar將是140px寬。但是假如訪問者調(diào)整窗口尺寸為1000px，那么sidebar也增大為200px。固定寬度的sidebar更輕易設(shè)計，因為你不必考慮sidebar伸展時的所有不同寬度。然而，百分比讓你在兩列之間保持相同的比例，可以使其更好看。
　　注重：當(dāng)整體的網(wǎng)頁設(shè)計是一個固定寬度時，sidebar的百分比寬度值也取決于包含元素的固定寬度。這個寬度不取決于窗口尺寸，當(dāng)瀏覽器窗口改變尺寸時它不會發(fā)生改變。

　　4. 給main content添加一個左邊距。

　　假如sidebar比網(wǎng)頁上的其他內(nèi)容更短，來自主列的文本包圍sidebar的下方，破壞了兩個并排列的展現(xiàn)效果。添加一個左邊距等于或者大于縮進網(wǎng)頁主要內(nèi)容的sidebar寬度，產(chǎn)生一個第二列的幻覺效果：

示例代碼 [www.hl5o.cn]

#main { margin-left: 180px ; }

　　順便說一下，使左邊距比sidebar的寬度略大通常是個好主意：這樣產(chǎn)生了一些空的空間——一個白色的——在兩個元素之間。因此，當(dāng)利用百分比來設(shè)定sidebar的寬度時，給左邊距設(shè)定一個稍微大一些的百分比值。

　　沒有必要去避免給main content的div設(shè)計寬度，因為瀏覽器只要擴大到適合現(xiàn)有的空間。即使要一個固定寬度的設(shè)計，也不必給主內(nèi)容的div設(shè)計寬度，就如你將在下一節(jié)中所看到的。
　　