DIV+CSS學習筆記(三)
一、盒子的浮動
從這個例子開始學習：
<style type="text/css">
body{margin:50px;font-family:Arial; font-size:12px; }
.father{background-color:#ffff99;border:1px solid #111111;padding:5px;}
.father div{padding:10px;margin:15px;border:1px dashed #111111;background-color:#90baff;}
.father p{border:1px dashed #111111;background-color:#ff90ba;}
.son1{/* 這里設置son1的浮動方式*/}
.son2{/*這里設置son2的浮動方式*/}
.son3{/*這里設置son3的浮動方式*/}
</style>
<body>
<div class="father">
<div class="son1">盒子-1</div>
<div class="son2">盒子-2</div>
<div class="son3">盒子-3</div>
<p>這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字. 這里是浮動框外圍的文字.</p>
</div>
</body>
一）設置第1個浮動的div
.son1{float:left ;height:10px;}/*盒子1浮動，且高度稍微縮小以便看出盒子2的狀態*/
看看效果，如圖：
說明：盒子2占據原來盒子1的位置，此時盒子1的寬度不再伸展，而是能容下最小寬度。盒子2的左邊在原來盒子1的位置，因為此時盒子1己經脫離標准流，標准流中的盒子2會頂到原來盒子1的位置，而文字會圍繞着盒子1排列。
二）設置第二個浮動的div
.son2{float:left;height:8px;}
說明：盒子3頂到原來盒子1的位置，但字符圍繞着盒子1和盒子2排列。
三）設置第3個浮動的div
.son3{float:left;height:5px;}
說明：盒子1-3都浮動了，就象不存在了，最后的文字盒子占據第一個位置，但量，文字會圍繞浮動的盒子排列。
四）改變浮動方向（將盒子3改為向右浮動）
.son3{float:right;height:5px;}
說明：盒子3向左浮動后，文字被擠在盒子2和3之間。
擠小瀏覽器窗口時如圖：
再擠小瀏覽器窗口時如圖：
擠到不能再小時，如圖：
注意：並不一定都是盒子3被擠到下邊，被擠到下邊的盒子是越寫在后邊的盒子，越最先被擠到下邊。
五）全部都向左浮動時：
當盒子1比較高時，縮小瀏覽器，誰會被擠到什么位置呢？擠到盒子1的下邊還是盒子2的下邊呢？這個很有趣：
.son1{float:left ;height:30px;}
.son2{float:left;height:8px;}
.son3{float:left;height:5px;}
<div class="father">
<div class="son1">盒子-1<br/>盒-1a</div>
<div class="son2">盒子-2</div>
<div class="son3">盒子-3</div>
<p>…… </p>
</div>
說明：盒子3被擠到下一行，並向左移動，到了這個拐角的地方就會被卡住，而停留在盒子2的下邊。
六）使用clear屬性清除浮動的影響
clear 屬性可以設置為left,right,或者both;特別注意：對clear屬性的設置要放到文字所在的盒子里，例如一個p段落的CSS設置中，而不要放到對浮動盒子的設置里面。經常有人誤以為在對某個盒子設置了float屬性后，要消除它對外面的文字的影響，就要在它的CSS樣式中增加一條clear,其實是沒有用的。
.father p{border:1px dashed #111111;background-color:#ff90ba;clear:left;}
說明：這是清除左邊，因為左邊比較高，沒看出右邊的影響，意思是如果右邊很高，清除左邊，右邊也可能會蓋住文字的。
七）擴展盒子的高度
如果將文字所在的段落刪除，這里在父div里面只有3個浮動的盒子，它們都不在標准流中，這時觀察瀏覽器的效果如圖：
父div縮成一條，是由padding和border構成的，也就是說一個div的范圍是由它里面的標准流內容決定的，與里面的浮動內容無關，如果要使父div的范圍包含這3個浮動盒子，有一個不算很理想的辦法：
.father .clear{margin:0;padding:0;border:0;clear:both;}
<body>
<div class="father">
<div class="son1">盒子-1<br/>盒子-1a</div>
<div class="son2">盒子-2</div>
<div class="son3">盒子-3</div>
<div class ="clear "></div>
</div>
</body>
二、盒子的定位
一）static靜態定位
默認的就是靜態定位，表示塊在原來應該在的位置上，即該值沒有任何移動的效果。下邊以這個靜態例子作為試驗講解：
CSS代碼如下：
<style type="text/css">
body{
margin:20px;
font :Arial 12px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
}
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
}
</style>
BODY代碼如下：
<body>
<div id="father">
<div id="block1">Box-1</div>
</div>
</body>
二）相對定位position:relative;
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative; /* relative相對定位 */
left:30px;
top:30px;
}
說明：這里不是左邊30，上邊30像素，而是相對原來的位置（或應該在的位置），左邊加30，上邊加30像素的移動。還要記住：相對定位的盒子仍在標准流中，它對父塊沒有任何影響。
詳細的比較，可以多設置幾個子塊來進行實驗，總之相對偏移后，其它的子塊會“以為”它還在原來的位置。
對於相對定位，就是以盒子本身在標准流中或者浮動時原本的位置作為偏移基准的。
三）絕對定位position:absolute;
以下邊這個例子作為分析對象：
body{
margin:20px;
font-family:Arial;
font-size:12px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
}
#father div{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
}
#block2{
}
<body>
<div id="father">
<div >Box-1</div>
<div id="block2">Box-2</div>
<div >Box-3</div>
</div>
1、使用絕對定位測試
#block2{
position:absolute;
top:0px;
right:0px;}
說明盒子3緊貼盒子1，仿佛盒子2不存在一樣，盒子2脫離標准流。絕對定位是以瀏覽器窗口為基准來定位的。
2、改一下代碼，為父div增加一個相對定位：
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
position:relative; /*相對定位*/
}
這時，父div是相對定位，盒子2就以父窗口為基准定位了。
四）固定定位fixed
固定定位跟絕對定位相似，區別在於定位的基准不是祖先元素，而是瀏覽器窗口。
三、z-index空間位置
想象頁面為x-y軸，垂直於面面的方向為z軸，z-index整數值的大小決定大的顯示在前。
四、盒子的display屬性
這個屬性很重要，將在很多地方發揮巨大的作用：
例：
<body>
<div >Box-1</div>
<div >Box-2</div>
<div >Box-3</div>
<span >Box-4</span>
<span >Box-5</span>
<span >Box-6</span>
<div >Box-7</div>
<span >Box-8</span>
</body>
原圖如上，沒有什么特殊效果，塊級元素和行內元素，就應該是上邊的效果，下邊來做一個實驗：
<body>
<div style="display:inline">Box-1</div>
<div style="display:inline">Box-2</div>
<div style="display:inline">Box-3</div>
<span style="display:block">Box-4</span>
<span style="display:block">Box-5</span>
<span style="display:block">Box-6</span>
<div style="display:none">Box-7</div>
<span style="display:none">Box-8</span>
</body>
顯示的效果如下：
分析一下：
原來應該是塊級元素的div變成了行內元素，原來是行內元素的span變成了塊級元素，設置為none的兩個盒子消失了。
可見：display屬性可以將某個標記本來的元素類型改變或隱藏，呵呵，這個可以增加很大很大的靈活性。