為了相應(yīng)網(wǎng)頁的標(biāo)準(zhǔn)化進(jìn)程，最近開始學(xué)習(xí)div+css網(wǎng)頁布局了，感覺css確實(shí)不錯，現(xiàn)在發(fā)表出來，跟大家共享
一列固定寬度
<div id=”left” >一列固定寬度</div>
#left{
width:455px;
height:1000px;
background-color:#00FFFF;
border:1px solid #333333;
}
一列自適應(yīng)
<div id=”left” >一列自適應(yīng)</div>
#left{
width:80%;
height:1000px;
background-color:#00FFFF;
border:1px solid #333333;
}
一列寬度居中（auto讓瀏覽器自動判斷邊距，將當(dāng)前div但左右邊距設(shè)為auto，瀏覽器會將div但左右邊距設(shè)為相同）
<div id=”left” >一列固定寬度</div>
#left{
width:455px;height:1000px;background-color:#00FFFF;border:1px solid #333333; margin：opx auto；
}
二列固定寬度
<div id=”left” >左列</div>
<div id=”right” >右列</div>
#left {float:left;width:455px;height:1000px;background-color:#00FFFF;border:1px solid #333333;
}
#right{float:left;width:400px;height:1000px;background-color:#000000;border:1px solid #FF0000;
}
二列寬度自適應(yīng)（在算百分比時要考慮邊框大?。?BR> <div id=”left” >左列</div>
<div id=”right” >右列</div>
#left {float:left;width:20%;height:1000px;background-color:#00FFFF;border:1px solid #333333; }
#right{float:left;width:70%;height:1000px;background-color:#000000;border:1px solid #FF0000;
}
兩列右列寬度自適應(yīng)（左欄寬度為固定值，右欄寬度不設(shè)值且不浮動）
<div id=”left” >左列</div>
<div id=”right” >右列</div>
#left {float:left;width:455px;height:1000px;background-color:#00FFFF;border:1px solid #333333;
}
#right{height:1000px;background-color:#000000;border:1px solid #FF0000;
}
二列固定寬度居中（外層設(shè)左右邊距為auto,注意大盒子的固定寬度的算法）
<div id=”box”>
<div id=”left” >左列</div>
<div id=”right” >右列</div>
</div>
#box {margin:0px auto ;width:404px;
}
#left {float:left;width:200px;height:1000px;background-color:#00FFFF;border:1px solid #333333;
}
#right{float:left;width:200px;height:1000px;background-color:#000000;border:1px solid #FF0000;
}
三列寬度自適應(yīng)、浮動中間列（左右兩列絕對定位，中間邊距參照左右兩列）
<div id=”left” >左列</div>
<div id=”center” >中間</div>
<div id=”right” >右列</div>
#left {width:200px;height:1000px;background-color:#00FFFF;border:1px solid #333333; position:absolute;top:0px;left:0px;
}
#right{float:left;width:200px;height:1000px;background-color:#000000;border:1px solid #FF0000;position:absolute;top:0px;left:0px;
}
#center {height:1000px;background-color:#000000;border:1px solid #FF0000;margin-left:104px;maigin-right:104px;
}
高度自適應(yīng)（對象高度是否百分比顯示，取決于其父級對象。瀏覽器默認(rèn)情況下，body沒有高度屬性，直接設(shè)height:100%;時，不產(chǎn)生任何效果，但給body設(shè)定100%后，便發(fā)生作用了）
html,body{margin:opx;height:100%;
}
#left {float:left;width: 300px;height: 100%;background-color:#00FFFF;border:1px solid #333333;
}