1、CSS之盒子的浮動與定位,一、盒子的浮動,在標(biāo)準(zhǔn)流中，一個(gè)塊級元素會自動伸展，直到包含它的元素的邊界。 CSS中有一個(gè)float屬性，默認(rèn)為none，即標(biāo)準(zhǔn)流通常的情況。 如果將float屬性設(shè)置為left或right，元素就會向其父元素的左側(cè)或右側(cè)靠緊，同時(shí)，盒子的寬度不再伸展，而是根據(jù)盒子里內(nèi)容的寬度來決定。,準(zhǔn)備代碼,先制作一個(gè)基礎(chǔ)的頁面，來演示浮動的效果。 實(shí)例：float01.html,實(shí)驗(yàn)一 設(shè)置第1個(gè)浮動的div,實(shí)例：float_son1.html 觀察結(jié)果 注意：box-2的左邊框與box-1的左邊框是重合的，而box-2中的文字會圍繞著box-1排列。,實(shí)驗(yàn)二 設(shè)置第2個(gè)浮

2、動的div,實(shí)例：float_son2.html 觀察結(jié)果 注意：box-3的左邊框與box-1的左邊框是重合的。,實(shí)驗(yàn)三 設(shè)置第3個(gè)浮動的div,實(shí)例：float_son3.html 觀察結(jié)果,實(shí)驗(yàn)四 改變浮動的方法,實(shí)例：float_right.html 觀察結(jié)果,實(shí)驗(yàn)五 再次改變浮動的方向,實(shí)例：float_right_left.html 觀察結(jié)果 提示：通過CSS布局，可以在HTML不做任何改變的情況下，調(diào)換盒子的顯示位置。,實(shí)驗(yàn)六 全部向左浮動,實(shí)例：float_all_left.html（在BOX-1中增加一行） 觀察結(jié)果,實(shí)驗(yàn)七 使用clear屬性清除浮動的影響,實(shí)例：float

3、_clear_left.html 實(shí)例： float_clear_right.html 觀察結(jié)果 注意：對clear屬性的設(shè)置要放在文字所在的盒子里，而不要放到對浮動盒子的設(shè)置里面。,實(shí)驗(yàn)八 擴(kuò)展盒子的高度,實(shí)例：float_box_height.html 觀察結(jié)果 說明：包含浮動DIV的容器不會適應(yīng)高度。一個(gè)DIV盒子的高度是由它里面的標(biāo)準(zhǔn)流內(nèi)容決定的，與里面的浮動內(nèi)容無關(guān)。 改進(jìn)：float_box_height_new.html,一、浮動,浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個(gè)浮動框的邊框?yàn)橹埂?由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框

4、不存在一樣。,二、盒子的定位,定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。 通過使用 position 屬性，我們可以選擇 4 種不同類型的定位 ： Static、relative、absolute、fixed,2.1 static靜態(tài)定位,元素框正常生成。塊級元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。 實(shí)例：（兩個(gè)沒有設(shè)置Position屬性的盒子）no_position.html,2.2 relative相對定位,relative：元素框偏移某個(gè)距離。元素仍保持其

5、未定位前的形狀，它原本所占的空間仍保留。 說明：通過left或right屬性指定其水平偏移量，通過top或bottom屬性指定其垂直偏移量。通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對于”它的起點(diǎn)進(jìn)行移動。 實(shí)例：relative_position.html 說明：當(dāng)子塊使用相對定位以后，即使移動到了父盒子的外面，父盒子也不會變大。,2.2 relative相對定位,2.2 relative相對定位,結(jié)論： 使用相對定位的盒子，會相對于它原本的位置，通過偏移指定的距離，到達(dá)新的位置。 使用相對定位的盒子仍在標(biāo)準(zhǔn)流中，它對父親和兄弟盒子都沒有任何影響。 即使對浮動的盒子使用相對定位，作用也和上面描述

6、的一致。,2.3 絕對定位absolute,設(shè)置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像該元素原來不存在一樣。元素定位后生成一個(gè)塊級框，而不論原來它在正常流中生成何種類型的框。,2.3 絕對定位absolute,準(zhǔn)備實(shí)例：absolute_position.html 絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對定位不同，相對定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬τ谒谄胀髦械奈恢谩?2.3 絕對定位absolute,2.3 絕對定位absolu

7、te,實(shí)例：absolute_position_1.html 說明： 使用絕對定位的盒子是以它的最近的一個(gè)已經(jīng)定位的祖先元素為基準(zhǔn)進(jìn)行偏移。 如果沒有已經(jīng)定位（只要該盒子的position屬性不是static，并且已經(jīng)被設(shè)置）的祖先元素，則以瀏覽器窗口為基準(zhǔn)進(jìn)行定位。,2.3 絕對定位absolute,實(shí)例：absolute_position_2.html 觀察結(jié)果：將父塊的定位設(shè)置為relative; 說明：絕對定位的框從標(biāo)準(zhǔn)流中脫離，它對其后的兄弟盒子的定位沒有影響。,2.3 絕對定位absolute,特殊性質(zhì)：如果絕對定位的盒子沒有設(shè)置某個(gè)偏移量，則該方向坐標(biāo)保持不變。即維持原來的位置。

8、利用這個(gè)性質(zhì)，可使某個(gè)盒子脫離標(biāo)準(zhǔn)流，但仍保持在原來的位置。 實(shí)例：absolute_position_3.html,2.4 z-index空間位置,z-index屬性用于調(diào)整定位時(shí)重疊塊的上下位置。 z-index值大的頁面位于值小的上方。 z-index的值為整數(shù)，可正可負(fù)。默認(rèn)的z-index為0。 當(dāng)兩個(gè)塊的z-index值一樣時(shí)，保持原有的高低覆蓋關(guān)系。,設(shè)置圖像的 z-index： img position:absolute; left:0px; top:0px; z-index:-1; , img.x position:absolute; left:0px; top:0px; z-index:-1 這是一個(gè)標(biāo)題 默認(rèn)的 z-index 是 0。Z-index -1 擁有更低的優(yōu)先級。 ,三、盒子的display屬性,可以使用 display 屬性