2014/06/12
XHTML CSS基礎(chǔ)知識(shí)
CSS盒子模型
我們可以把它想像成現(xiàn)實(shí)中上方開(kāi)口的盒子，然后從正上往下俯視，邊框相當(dāng)于盒子的厚度，內(nèi)容相對(duì)于盒子中所裝物體的空間，而填充呢，相當(dāng)于為防震而在盒子內(nèi)填充的泡沫，邊界呢相當(dāng)于在這個(gè)盒子周圍要留出一定的空間，方便取出。是不是這樣就很容易理解盒模型了。
這里的邊界我們也稱之為：外邊距、外補(bǔ)丁；填充也叫：內(nèi)邊距、內(nèi)補(bǔ)丁。
一列布局
- 列固定寬度
- 列固定寬度居中 （margin為atuo）
- 列自適應(yīng)寬度（width為空則拉伸屏幕，如需鋪滿則將body的margin設(shè)為0）
- 列自適應(yīng)寬度居中 （width為80%，如果比例就為自適性）
- 列二至多塊布局
<!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" />
<style type="text/css">
body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}
</style>
</head></p>
<p><body>
<div id="header">此處顯示 id "header" 的內(nèi)容</div>
<div id="main">此處顯示 id "main" 的內(nèi)容</div>
<div id="footer">此處顯示 id "footer" 的內(nèi)容</div>
</body>
</html>
注意
用css手冊(cè)中的話說(shuō)：塊級(jí)元素的垂直相鄰?fù)膺吘鄷?huì)合并，而行內(nèi)元素實(shí)際上不占上下外邊距。行內(nèi)元素的的左右外邊距不會(huì)合并。同樣地，浮動(dòng)元素的外邊距也不會(huì)合并。允許指定負(fù)的外邊距值，不過(guò)使用時(shí)要小心
2014/06/14
二列布局
二列布局
float屬性為以靠左布局和靠右布局，在right和left屬性的div必須布局在float為flase的前面，作為中間元素。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
</style>
</head></p>
<p><body>
<div id="content">
<div id="side">此處顯示 id "side" 的內(nèi)容</div>
<div id="main">此處顯示 id "main" 的內(nèi)容</div>
</div>
</body>
</html>
二列布局（含圖片）和三列布局
同上
IE6的3像素bug
3像素bug
從截圖中明顯看出，IE6會(huì)在兩個(gè)div中間加上3px的空隙，那么要解決這個(gè)問(wèn)題，請(qǐng)?jiān)?side上加上
_margin-right:-3px記住，前邊加上一下劃線，這樣這個(gè)樣式專門(mén)針對(duì)IE6生效。IE7和FF下還會(huì)正常顯示。
解決方法如下
body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;}
#main { background: #99FFFF; height: 300px; }
```
>但它不能通過(guò)W3C驗(yàn)證。當(dāng)兩列固定寬度時(shí)，最好把#main也固定寬度且向右浮動(dòng)，這樣就可以避免IE6的3像素bug了。