【文章內(nèi)容簡介】 orderspacing:5px。}9. {borderspacing:10px 20px。}然后，在頁面的主體中添加如下代碼：1. table class=singleSpacing2. caption設置一個值/caption3. tr4. td第1行第1列/td5. td第1行第2列/td6. /tr7. tr8. td第2行第1列/td9. td第2行第2列/td10. /tr11. /table12. br /13. table class=doubleSpacing14. caption設置兩個值/caption15. tr16. td第1行第1列/td17. td第1行第2列/td18. /tr19. tr20. td第2行第1列/td21. td第2行第2列/td22. /tr23. /table上述代碼在瀏覽器中的顯示效果如圖8所示。圖8由圖8可以看出，第一個表的borderspacing 屬性只設置了一個值為5px，則單元格邊框之間的垂直和水平間隔均為5 像素；而第二個表的borderspacing 屬性設置了兩個值，則單元格邊框之間的水平間距為10 像素，而垂直間距較大，為20 像素。需要注意的是，為了盡量能夠在各瀏覽器中得到一致的顯示效果，最好為 table 元素設置borderspacing 屬性，而不是單元格等其他元素。3. 浮動定位. 定位概述. 定位概述CSS 為定位提供了一些屬性，利用這些屬性，可以建立列式布局，還可以將布局的一部分與另一部分重疊，這樣可以完成多年來通常需要使用多個表格才能完成的任務。定位的基本思想很簡單，即可以定義元素框相對于其正常位置應該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，而且各瀏覽器對 CSS2 中定位的支持遠勝于對其它方面的支持。CSS 有三種基本的定位機制：普通流定位、浮動和絕對定位。其中，使用position 屬性和偏移屬性可以實現(xiàn)普通流定位（包括相對定位）和絕對定位（包括固定定位）；使用float 屬性可以實現(xiàn)浮動定位。其他屬性為輔助屬性。在后面的章節(jié)中，我們會詳細講解普通流定位、相對定位、絕對定位和浮動。. 普通流定位默認情況下，通過使用稱為普通流的方式在頁面中布局元素。在普通流中定位，頁面中的塊級元素框從上到下一個接一個地排列，且每一個塊級元素都會出現(xiàn)在一個新行中（比如 p 元素、div 元素），元素框之間的垂直距離是由框的垂直外邊距計算出來的。內(nèi)聯(lián)元素將在一行中從左到右排列水平布置，不需要從新行開始。可以使用水平內(nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過，設置行高可以增加這個框的高度。為了更好的理解普通流定位模式，我們定義如下樣式規(guī)則：1. p {2. height:70px。3. border:1px solid gray。4. margintop:20px。5. paddingtop:10px。}6. div {7. height:70px。8. border:2px dashed black。9. margintop:20px。10. paddingtop:10px。}11. b {12. height:50px。13. border:2px dotted red。14. margintop:20px。15. paddingtop:10px。}然后在頁面的主體中添加如下代碼：1. divuThis/u is the ifirst/i bblock/b element./div2. divuThis/u is the isecond/i bblock/b element./div3. puThis/u is iparagraph/i bone/b./p上述代碼在瀏覽器中的顯示效果如圖9所示。圖9由圖－9可以看出，每個塊級元素（段落和 div 元素）按照在代碼中書寫的順序逐一出現(xiàn)在一個不同的行中，而 b、i 和 u 這些內(nèi)聯(lián)元素則位于塊級元素中的同一行，且按照從左到右的順序出現(xiàn)。對于塊級元素，可以設置邊框、高度、寬度、外邊距和內(nèi)邊距；而對于內(nèi)聯(lián)元素，即使設置高度和外邊距，也沒有實際效果，只能設置內(nèi)邊距（見 b 元素的顯示效果）。如果希望讓元素的位置與在普通流位置中出現(xiàn)的位置不同，則需要使用定位屬性來實現(xiàn)。使用position 屬性可以更改定位模式為相對定位、絕對定位和固定定位，還可以使用偏移屬性來實現(xiàn)元素框位置的偏移；或者使用float屬性來實現(xiàn)浮動定位。. 浮動定位. 浮動概述浮動定位是指將元素排除在普通流之外，并且將它放置在包含框的左邊或者右邊，但是依舊位于包含框之內(nèi)。也就是說，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。使用浮動可以修改元素原有的定位方式，尤其在一些需要設置多個塊級元素同行排列的情況下會非常有用。. 浮動定位由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。為了更好的理解浮動的作用，我們先用一些示意圖解釋浮動的效果，然后在使用float 屬性來實現(xiàn)這些效果。首先，請看圖－10。包含框中有三個元素框，如果把框 1 向右浮動，則它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：圖10然后，我們查看圖－11。圖11由圖－11可以看出，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失（如圖－11中的左圖所示）。而如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框（如圖－11中的右圖所示）。而如果包含框太窄或者浮動框的高度不同，會出現(xiàn)什么現(xiàn)象呢？我們查看圖－12。圖12由圖－12可以看出，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊會自動向下移動，直到有足夠的空間（如圖－12中的左圖所示）；而如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”（如圖－12中的右圖所示）。. float 屬性如果需要指示框浮動在包含框的左邊或者右邊，我們可以通過 float 屬性來實現(xiàn)。float 屬性定義元素在哪個方向浮動。float 屬性可能的取值如表－8 所示。表－8float屬性的取值比如，我們定義如下樣式規(guī)則：1. div {2. height:100px。3. backgroundcolor:f0f0f0。4. border:1px solid gray。5. margin:10px 0px 0px 10px。6. fontsize:24px。} 7. {float:right。}然后，在頁面的主體中添加如下代碼：1. div框1/div2. div class=float框2/div3. div框3/div上述代碼在瀏覽器中的顯示效果如圖13所示。圖13由圖－13可以看出，設置框 2 向右浮動后，它會停靠在頁面的右邊框，而框 3 位于框 2浮動前的位置，就像框 2 不存在一樣。但是因為沒有指定元素框的寬度，則浮動框會盡可能的窄，就如同框 2 的效果。因此，指定元素的 float 屬性后，最好設置元素的 width 屬性，用于指示浮動框占用包含框的寬度。我們修改 div 元素的樣式規(guī)則，為其加上寬度：1. div {2. width:100px。3. height:100px。4. backgroundcolor:f0f0f0。5. border:1px solid gray。6. margin:10px 0px 0px 10px。7. fontsize:24px。} 8. {float:right。}圖14給出了上述代碼在瀏覽器中的顯示效果。圖14. clear 屬性出現(xiàn)在其他元素中的圖形和文本元素稱為浮動元素，而 clear 屬性用于設置一個元素的側面是否允許其他的浮動元素。clear 屬性定義了元素的哪邊上不允許出現(xiàn)浮動元素。在 CSS1 和 CSS2 中，這是通過自動為清除元素（即設置了 clear 屬性的元素）增加上外邊距實現(xiàn)的。在 中，會在元素上外邊距之上增加清除空間，而外邊距本身并不改變。不論哪一種改變，最終結果都一樣。clear 屬性可能的取值如表－9 所示。表－9 clear屬性的取值其中，none 值為默認值，不進行清理，即會出現(xiàn)文本圍繞的效果；而如果聲明為左邊或右邊清除，表示框的哪些邊不應該挨著浮動框，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。比如，我們定義如下樣式規(guī)則（為兩個浮動元素框定義不同的高度）：1. p {2. height:200px。3. border:1px solid gray。4. margin:20px 0px 0px 20px。5. fontsize:24px。}6. div {