CSS+DIV第三天

昨天前天複習了css的基礎知識，昨天又學了一些布局的知識，今天是第三天，駝駝開始自己動手製作css+div排版的頁面。駝駝的第一個頁面製作的過程非常鬱悶，中間出了無數的錯誤。不過，正是這些錯誤讓駝駝看到了理論知識和實踐的不同。so,駝駝總結了自己犯的錯誤們,雖然比較嗷嗷幼稚,總是個成長滴過程~0~,還是值得紀念的.

首先看偶寫的三個css

#left{ FLOAT: left;

BACKGROUND-COLOR:#CCCCCC;
WIDTH:100px;
HEIGHT:100px;
text-align:center;
line-height:1.8em;
border-top:3px groove #ff6600;
border-left:#ff6600  dashed 3px;
border-right:#ff6600 3px solid;
border-bottom:#ff6600 3px solid;

/*margin:20px,20px,20px,20px;*/
/*word-break:break-all;*/
/*PADDING:10px,10px,10px,10px;*/
}

#center{ FLOAT: left;
width:500px;
background-color:#ff0000;
border-top:dashed 4px #ff6600;
border-left:double 3px #ff6600;
border-right:solid 3px #ff6600;
border-bottom:solid 3px #ff6600;
text-align:left;
}

#right{ FLOAT: right;
width:200px;
background-color:#ff0000;
border-top:dashed 4px #ff6600;
border-left:double 3px #ff6600;
border-right:solid 3px #ff6600;
border-bottom:solid 3px #ff6600;
text-align:left;
}

#box{
BORDER-TOP: #cccccc 2px solid;
BORDER-RIGHT: #cccccc 2px solid;
BORDER-BOTTOM: #cccccc 2px solid;
BORDER-LEFT: #cccccc 2px solid;
width:100%;
}

#fix{
width:100%;
text-align:center;
}

前台調用時的代碼是這個樣子滴

<div id="sample">jfskldjg</div>
<div id="box">
<div id="fix">此處示範一個相對定位的層</div>
<div id="right">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div>
<div id="left">faintshit</div>
<div id="center"></div>
</div>

如果我把#center的FLOAT: left;的left改為right  則效果就成了

yes！float是傳說中的相對定位。它的參數： right|left|none  none不用說了 就是不用定位。rigth和left只是針對它上面的一個層來說的。所以才會出現上面這種情況

當然，css定位中還涉及到用position來定位。如果是平面設計的話  一般用float就好，了不起第一個div會用到position來定位，以確定初始位置，因為用float的時候我們不用用left來定義其拒頁面左側的邊距  而用position的時候，則涉及到每個層都要用用left，top來定義該div與頁面左側和上側的邊距。

如果設計不僅僅局限於一個平面，也就是說我們需要立體結構的時候，就需要用到position絕對位置。

這個情況的出現是 偶把#center的width:500px;改為了width:900px;因為我們沒有設定z-index，且用的是相對定位，所以出現了的情況，也就是說層與層之間的關係並不像表格一樣，層與層之間關係是獨立的。