1.CSS布局常用的方法：
float : none | left | right
取值：
none : 預設值。對象不飄浮
left : 文字資料流向對象的右邊
right : 文字資料流向對象的左邊
它是怎樣工作的，看個一行兩列的例子
xhtml:
<div id="wrap"><div id="column1">這裡是第一列</div><div id="column2">這裡是第二列</div><div class="clear"></div>/*這是違背web標準意圖的，只是想說明在它下面的元素需要清除浮動*/</div>
CSS:
#wrap{ width:100%; height:auto;}#column1{ float:left; width:40%;}#column2{ float:right; width:60%;}.clear{ clear:both;}
position : static | absolute | fixed | relative
取值：
static : 預設值。無特殊定位，對象遵循HTML定位規則
absolute : 將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對於其最接近的一個最有定位設定的父物件進行絕對位置。如果不存在這樣的父物件，則依據 body 對象。而其層疊通過 z-index 屬性定義
fixed : 未支援。對象定位遵從絕對(absolute)方式。但是要遵守一些規範
relative : 對象不可層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文檔流中位移位置
它來實現一行兩列的例子
xhtml:
<div id="wrap"><div id="column1">這裡是第一列</div><div id="column2">這裡是第二列</div></div>
CSS:
#wrap{ position:relative;/*相對定位*/width:770px;}#column1{ position:absolute; top:0; left:0; width:300px;}#column2{position:absolute; top:0; right:0; width:470px;}
他們的區別在哪?
顯然，float是相對定位的，會隨著瀏覽器的大小和解析度的變化而改變，而position就不行了，所以一般情況下還是float布局！
2.CSS常用布局執行個體
一列
單行一列
body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; margin-right:auto; width: 400px; }
兩行一列
body { margin: 0px; padding: 0px; text-align: center;}#content-top { margin-left:auto; margin-right:auto; width: 400px; }#content-end {margin-left:auto; margin-right:auto; width: 400px; }
三行一列
body { margin: 0px; padding: 0px; text-align: center; }#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }#content-mid { margin-left:auto; margin-right:auto; width: 400px; }#content-end { margin-left:auto; margin-right:auto; width: 400px; }
兩列
單行兩列
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }#bodycenter #dv1 {float: left;width: 280px;}#bodycenter #dv2 {float: right;width: 420px;}
兩行兩列
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }#bodycenter #dv1 { float: left; width: 280px;}#bodycenter #dv2 { float: right;width: 420px;}
三行兩列
#header{ width: 700px;margin-right: auto; margin-left: auto; }#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }#bodycenter #dv1 { float: left;width: 280px;}#bodycenter #dv2 { float: right; width: 420px;}#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; clear:both; }
三列
單行三列
絕對位置
#left { position: absolute; top: 0px; left: 0px; width: 120px; }#middle {margin: 0px 190px 0px 190px; }#right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位
xhtml:
<div id="wrap"><div id="column"><div id="column1">這裡是第一列</div><div id="column2">這裡是第二列</div><div class="clear"></div>/*用法web標準不建議，但是記住下面元素需要清除浮動*/</div><div id="column3">這裡是第三列</div><div class="clear"></div>/*用法web標準不建議，但是記住下面元素需要清除浮動*/</div>
CSS:
#wrap{ width:100%; height:auto;}#column{ float:left; width:60%;}#column1{ float:left; width:30%;}#column2{ float:right; width:30%;}#column3{ float:right; width:40%;}.clear{ clear:both;}
float定位二
xhtml
<div id="center" class="column"><h1>This is the main content.</h1></div><div id="left" class="column"><h2>This is the left sidebar.</h2></div><div id="right" class="column"><h2>This is the right sidebar.</h2></div>
CSS
body {margin: 0;padding-left: 200px; /* LC fullwidth */padding-right: 190px; /* RC fullwidth + CC padding */min-width: 200px; /* LC fullwidth + CC padding */}.column {position: relative;float: left;}#center {width: 100%;}#left {width: 200px; /* LC width */right: 200px; /* LC fullwidth */margin-left: -100%;}#right {width: 190px; /* RC width */margin-right: -100%;}/*** IE Fix ***/* html #left {left: 190px; /* RC fullwidth */}
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /><title>The Holy Grail of Layouts: Example #4: A List Apart</title><br /><style type="text/css"></p><p>/*** The Essential Code ***/</p><p>body {<br />margin: 0;<br />padding-left: 200px; /* LC fullwidth */<br />padding-right: 190px; /* RC fullwidth + CC padding */<br />min-width: 200px; /* LC fullwidth + CC padding */<br />}</p><p>#header, #footer {<br />margin-left: -200px; /* LC fullwidth */<br />margin-right: -190px; /* RC fullwidth + CC padding */<br />}</p><p>.column {<br />position: relative;<br />float: left;<br />}</p><p>#center {<br />width: 100%;<br />}</p><p>#left {<br />width: 200px; /* LC width */<br />right: 200px; /* LC fullwidth */<br />margin-left: -100%;<br />}</p><p>#right {<br />width: 190px; /* RC width */<br />margin-right: -100%;<br />}</p><p>#footer {<br />clear: both;<br />}</p><p>/*** IE Fix ***/<br />* html #left {<br />left: 190px; /* RC fullwidth */<br />}<br />/*** Just for Looks ***/</p><p>body {<br />background: #FFF;<br />}</p><p>#header, #footer {<br />font-size: large;<br />text-align: center;<br />padding: 0.3em 0;<br />background: #999;<br />}</p><p>#left {<br />background: #66F;<br />}</p><p>#center {<br />background: #DDD;<br />}</p><p>#right {<br />background: #F66;<br />}</p><p>.column {<br />padding-top: 1em;<br />text-align: justify;<br />}</p><p></style><br /></head></p><p><body></p><p><div id="header">This is the header.</div></p><p><div id="center" class="column"><br /><h1>This is the main content.</h1><br /><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p><br /><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p><br /></div></p><p><div id="left" class="column"></p><p><h2>This is the left sidebar.</h2><br /><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p><br /></div></p><p><div id="right" class="column"><br /><h2>This is the right sidebar.</h2><br /><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p></p><p></div></p><p><div id="footer">This is the footer.</div></p><p></body></p><p></html></p><p>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
兩行三列
xhtml:
<div id="header">這裡是頂行</div><div id="warp"><div id="column"><div id="column1">這裡是第一列</div><div id="column2">這裡是第二列</div><div class="clear"></div></div><div id="column3">這裡是第三列</div><div class="clear"></div></div>
CSS:
#header{width:100%; height:auto;}#wrap{ width:100%; height:auto;}#column{ float:left; width:60%;}#column1{ float:left; width:30%;}#column2{ float:right; width:30%;}#column3{ float:right; width:40%;}.clear{ clear:both;}
三行三列
xhtml:
<div id="header">這裡是頂行</div><div id="wrap"><div id="column"><div id="column1">這裡是第一列</div><div id="column2">這裡是第二列</div><div class="clear"></div></div><div id="column3">這裡是第三列</div><div class="clear"></div></div><div id="footer">這裡是底部一行</div>
CSS:
#header{width:100%; height:auto;}#wrap{ width:100%; height:auto;}#column{ float:left; width:60%;}#column1{ float:left; width:30%;}#column2{ float:right; width:30%;}#column3{ float:right; width:40%;}.clear{ clear:both;} #footer{width:100%; height:auto;}
PS:這裡列出的是常用的例子，而非研究之用，對一每個盒子，我都沒有設定margin,padding,boeder等屬性，是因為我個人覺得，含有寬度定位的時候，最好不好用到他們，除非必不得已，因為如果不是這樣的話，解決瀏覽器安全色問題，會讓你頭疼，而且產生一系列CSS代碼，我覺得這樣的效率和效果都不好！
3.CSS布局進階技巧
margin和padding總是有可能要用到，而產生的問題如何解決呢？由於瀏覽器解釋容器寬度的方法不同：
IE 6.0 Firefox Opera等是
真實寬度=width+padding+border+margin
IE5.X
真實寬度=width-padding-border-margin
IE中有浮動物件的雙倍距離之BUG（IE Doubled Float-Margin Bug ）, 這裡還需要具體問題具體解決，下面是解決辦法
www.forest53.com/tutorials/tutorials_show.asp?id=31
很明顯，第一種下很完美的布局在第二種情況下後果是很淒慘的！
解決的方法是hack
div.content { width:400px; //這個是錯誤的width，所有瀏覽器都讀到了voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""後的內容voice-family:inherit;width:300px; //包括IE6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的} html>body .content { //html>body是CSS2的寫法width:300px; //支援CSS2該寫法的瀏覽器(非IE5)有幸讀到了這一句} div.content { width:300px !important; //這個是正確的width，大部分支援!important標記的瀏覽器使用這裡的數值width(空格)/**/:400px; //IE6/win不解析這句，所以IE6/win仍然認為width的值是300px；而IE5.X/win讀到這句，新的數值(400px)覆蓋掉了舊的，因為!important標記對他們不起作用} html>body .content { //html>body是CSS2的寫法width:300px; //支援CSS2該寫法的瀏覽器有幸讀到了這一句}
具體解釋點擊下面連結查看
www.blueidea.com/tech/site/2006/3170.asp
www.jluvip.com/blog/article.asp?id=114
列等高技巧
n行n列布局，每列高度（事先並不能確定哪列的高度）的相同，是每個設計師追求的目標，做法有：背景圖填充、加JS指令碼的
方法和容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法。
背景圖填充法：
xhtml:
<div id="wrap"><div id="column1">這是第一列</div><div id="column1">這是第二列</div><div class="clear"></div></div>
css:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}#column1{ float:left; width:300px;}#column2{ float:right; width:476px;}.clear{ clear:both;}
就是將一個npx寬的一張圖片在外部容器縱向重複，定位到兩列交錯的位置縱向重複，在視覺上產生了兩列高度一樣的錯覺
JS指令碼法：
www.blueidea.com/bbs/NewsDetail.asp?id=2453983
代碼的原理基本就是這樣，讀取高度，判斷高度，高度相等
容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法
這篇文章說的很詳細了
www.blueidea.com/tech/web/2006/3210.asp
還有
www.jluvip.com/blog/article.asp?id=151
滿屏高度布局（最窄770px最寬1024px經典布局）
www.blueidea.com/tech/web/2005/3124.asp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
