之前對div的css布局一直有點半知半解，只其然卻不知其所以然，到網上下載了“十天學會DIV+CSS(WEB標准)”的chm電子版，然后跟着練習了一下，特在此記錄，備忘。
<!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> <title>div+css布局練習</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body{padding:0px;margin:0px;} #main {margin:auto;padding:0;background: yellow;width:90%;} #layout { height: 300px; width: 80%; background: #99FFcc; margin:auto; height:50px;} #content { width:80%; margin:0 auto;min-width:700px;} #side { background: #99FF99; height: 60px; width: 50%; float: left; } #main1 { background: #99FFFF; height: 60px; width: 50%; float: left;} #waibian2 {width:80%; margin:0 auto;clear:both;} #side2 {float:left;width:205px;} #waibian3 {width:80%; margin:0 auto;clear:both;} #side3 {float:left;width:205px;} #main3 {margin-left:210px;} #waibian4 {width:90%;background:#CCFFCC;margin:auto;text-align:center;} #libian1 {width:150px; height:80px;background:#FFFF66;float:left;} #libian2 {width:200px; height:80px;background:#FFFF33;float:right} #libian3 {height:80px;background:#FFCCFF;} </style> </head> <body> <!-- 設置居中 --> <div id="main"> <div id="layout">此處顯示 id "layout" 的內容</div> </div> <!-- 設置外層的寬度為80%,並設置一個最新寬度值，里面的div按百分比自適宜 --> <div id="content"> <div id="side">此處顯示 id "side" 的內容</div> <div id="main1">此處顯示 id "main" 的內容</div> </div> <!--圖片跟文字一行，並且文字在超出圖片的高度后自動從圖片的下面換行 --> <div id="waibian2"> <div id="side2"> <img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="80" /> </div> <div id="main2"> Javascript[1] 是一種由Netscape的LiveScript發展而來的原型化繼承的基於對象的動態類型的區分大小寫的客戶端腳本語言，主要目的是為了解決服務器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。當時服務端需要對數據進行驗證，由於網絡速度相當緩慢，只有28.8kbps，驗證步驟浪費的時間太多。於是Netscape的瀏覽器Navigator加入了Javascript，提供了數據驗證的基本功能，js的作用也主要在實現網頁的一些特效，css難以實現的特效，通常和Jquery，Ajax,聯合使用. </div> </div> <!--圖片跟文字一行，並且文字在超出圖片的高度后還是在同一列 --> <div id="waibian3"> <div id="side3"> <img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="80" /> </div> <div id="main3"> Javascript[1] 是一種由Netscape的LiveScript發展而來的原型化繼承的基於對象的動態類型的區分大小寫的客戶端腳本語言，主要目的是為了解決服務器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。當時服務端需要對數據進行驗證，由於網絡速度相當緩慢，只有28.8kbps，驗證步驟浪費的時間太多。於是Netscape的瀏覽器Navigator加入了Javascript，提供了數據驗證的基本功能，js的作用也主要在實現網頁的一些特效，css難以實現的特效，通常和Jquery，Ajax,聯合使用. </div> </div> <!--左右div固定寬度，中間自適應，外邊div寬度百分比並居中 --> <div id="waibian4"> <div id="libian1">這是左邊的DIV固定寬度</div> <div id="libian2">這是右邊的DIV固定寬度</div> <div id="libian3">這是中間的DIV，自動適應</div> </div> </body> </html>
運行效果圖：
布局主要影響因素圖解：
margin和padding的順序是：上、右、下、左。
如果提供全部四個參數值，將按上－右－下－左的順序作用於四邊。如果只提供一個，將用於全部的四條邊。如果提供兩個，第一個用於上－下，第二個用於左－右。如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
注意：
當一個容器內元素都浮動后，它將高度將不會隨着內部元素高度的增加而增加，所以造成內容元素的顯示超出了容器，這時需要加如下CSS解決這個問題：
overflow:auto; zoom:1; /** overflow:auto;是讓高度自適應， zoom:1;是為了兼容IE6而寫（此樣式不能通過W3C驗證）。 **/