div+css 技巧摘錄

盒子理論學習：
[url]http://www.chinaui.com/school/schoolView.aspx?ARTICLE_ID=297[/url]

十步學DIV+CSS建站：
[url]http://jorux.com/archives/10steps-built-web-with-css/[/url]

技巧摘錄：
一、並排排列　　like this: [url]http://www.blueidea.com/articleimg/2007/03/4545/css1.html[/url]
<style type="text/css">
<!--
.mainBox {
 float: left;/*這個很重要哦！*/
/*還有不少其餘標籤，省略*/

 

}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文內容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文內容 </p>
</div>
<div class="mainBox">
<h3>轉變思想</h3>
<p>正文內容 </p>
</div>
<div class="mainBox">
<h3>熟悉步驟</h3>
<p>正文內容 </p>
</div>

二、通配符使用：
* {
margin: 0px;
padding: 0px;
}
這是用了通配符初始化各標籤邊界和填充，（由於有部分標籤默認會有必定的邊界，如Form標籤）那麼接下來就不用對每一個標籤再加以這樣的控制，這能夠在必定程度上簡化代碼。

三、當兩個並排內容須要其中一個靠右的話，須要使用到浮動向右：
#right {
float: right;
width: 280px;
background: darkgreen;
}
由於向右浮動，能夠理解爲浮動於整個盒子之上向右，它的下面仍是能夠讓#left_content 填東西的，因此須要：
#left_content {
margin-right: 280px;
background: green;
}
這樣就不會#right的內容和#left_content 的內容重疊了。

四、clear:both的使用:
若出現這種狀況：
表現以下：


怎麼讓Footer像這樣呢?
那就須要用到 #footer { clear: both; }