盒子的浮動與定位

1、 盒子的浮動盒子的浮動3.1盒子的定位盒子的定位3.2盒子的盒子的display屬性屬性3.3圖文混排圖文混排3.4 前面學(xué)習(xí)了獨立的盒子模型，以及在前面學(xué)習(xí)了獨立的盒子模型，以及在標(biāo)準(zhǔn)流情況下的盒子的相互關(guān)系。標(biāo)準(zhǔn)流情況下的盒子的相互關(guān)系。 如果僅僅按照標(biāo)準(zhǔn)流的方式進行排版，如果僅僅按照標(biāo)準(zhǔn)流的方式進行排版，就只能按照僅有的幾種可能性進行排版，就只能按照僅有的幾種可能性進行排版，限制太大。限制太大。 CSS CSS的制定者也想到了排版限制的問題，的制定者也想到了排版限制的問題，因此又給出了若干不同的手段以實現(xiàn)各種因此又給出了若干不同的手段以實現(xiàn)各種排版需要，從而可以靈活地實現(xiàn)各種形式排版需要

2、，從而可以靈活地實現(xiàn)各種形式的排版要求。的排版要求。 本章介紹本章介紹CSSCSS中中floatfloat和和positionposition這兩這兩個重要屬性的應(yīng)用。個重要屬性的應(yīng)用。3.1 3.1 盒子的浮動盒子的浮動 在標(biāo)準(zhǔn)流中，一個塊級元素在水平方在標(biāo)準(zhǔn)流中，一個塊級元素在水平方向會自動伸展，直到包含它的元素的邊界；向會自動伸展，直到包含它的元素的邊界；而在豎直方向和兄弟元素依次排列，不能而在豎直方向和兄弟元素依次排列，不能并排。并排。 使用使用“浮動浮動”方式后，塊級元素的表方式后，塊級元素的表現(xiàn)就會有所不同?，F(xiàn)就會有所不同。 CSS CSS中有一個中有一個floatfloat屬性，

3、默認(rèn)為屬性，默認(rèn)為nonenone，也就是標(biāo)準(zhǔn)流通常的情況。也就是標(biāo)準(zhǔn)流通常的情況。 如果將如果將floatfloat屬性的值設(shè)置為屬性的值設(shè)置為leftleft或或rightright，元素就會向其父元素的左側(cè)或右側(cè)，元素就會向其父元素的左側(cè)或右側(cè)靠近，同時默認(rèn)情況下，盒子的寬度不再靠近，同時默認(rèn)情況下，盒子的寬度不再伸展，而是收縮，根據(jù)盒子里面的內(nèi)容的伸展，而是收縮，根據(jù)盒子里面的內(nèi)容的寬度來確定。寬度來確定。3.1.1 3.1.1 制作基礎(chǔ)頁面制作基礎(chǔ)頁面 例例1 1： 浮動的性質(zhì)比較復(fù)雜，這里先制作一浮動的性質(zhì)比較復(fù)雜，這里先制作一個基礎(chǔ)的頁面，文件為個基礎(chǔ)的頁面，文件為 “03-01

4、.html”03-01.html”。 3.1.1 3.1.1 制作基礎(chǔ)頁面制作基礎(chǔ)頁面例例2 2 設(shè)置第設(shè)置第1 1個浮動的個浮動的divdiv 將第一個盒子的將第一個盒子的floatfloat設(shè)置為設(shè)置為leftleft，可以看到，標(biāo)準(zhǔn)流中的，可以看到，標(biāo)準(zhǔn)流中的box-2box-2的文的文字在圍繞著字在圍繞著box-1box-1排列，而此時排列，而此時box-1box-1的寬度不再伸展，而是能容納下的寬度不再伸展，而是能容納下內(nèi)容的最小寬度。內(nèi)容的最小寬度。03-02.html03-02.html。注意注意：Box-2Box-2的左邊框和的左邊框和Box-1Box-1最左邊的邊框重合。最左

5、邊的邊框重合。 3.1.3 3.1.3 設(shè)置第設(shè)置第2 2個浮動的個浮動的divdiv圖圖3.3 設(shè)置前兩個設(shè)置前兩個div浮動時的效果浮動時的效果例3 設(shè)置第2個浮動的div將第二個盒子的float也設(shè)置為left，可以看到，標(biāo)準(zhǔn)流中的box-2也變?yōu)楦鶕?jù)內(nèi)容確定寬度，并使box-3的文字圍繞box-2排列。03-03.html。注意：本例驗證了Box-3的左邊框和Box-1的左邊框重合。不然Box-1和Box-2之間的邊框不會是紫色， Box-1和Box-2之間的空余部分是由二者的margin構(gòu)成的。3.1.4 3.1.4 設(shè)置第設(shè)置第3 3個浮動的個浮動的divdiv例4 設(shè)置第3個浮動

6、的div將第三個盒子的float也設(shè)置為left，03-04.html。可以看到，文字會圍繞浮動的盒子排列。中間的空白是由各自的margin構(gòu)成的。注意：float元素不占任何正常文檔流空間， 但float的特性是普通的塊級元素處在浮動元素下層，如上面例2,3，但它內(nèi)部的文字（以及行內(nèi)元素）會環(huán)繞浮動元素，如本例4。3.1.8 3.1.8 使用使用clearclear屬性清除浮動的影響屬性清除浮動的影響 圖圖3.11 設(shè)置浮動后文字環(huán)繞的效果設(shè)置浮動后文字環(huán)繞的效果 例5 將第3個盒子增加3行，向右浮動。 效果：使得文字的左右兩側(cè)同時圍繞著浮動的盒子。 03-07-1.html。3.1.8 3

7、.1.8 使用使用clearclear屬性清除浮動的影響屬性清除浮動的影響 圖圖5.11 設(shè)置浮動后文字環(huán)繞的效果設(shè)置浮動后文字環(huán)繞的效果 例6 如果不希望文字圍繞浮動的盒子，可以設(shè)置clear屬性，清除浮動對文字的影響。03-07.html。注意：這時段落的上邊界向下移動，直到文字不受左邊的兩個盒子影響為止，但仍然受Box-03的影響。5.1.8 5.1.8 使用使用clearclear屬性清除浮動的影響屬性清除浮動的影響 圖圖5.11 設(shè)置浮動后文字環(huán)繞的效果設(shè)置浮動后文字環(huán)繞的效果 例7 將clear屬性設(shè)置為right，由于Box-3比較高，因此清除了右邊的影響，自然左邊就更不會受影響

8、了。03-07-2.html。5.1.8 5.1.8 使用使用clearclear屬性清除浮動的影響屬性清除浮動的影響Clear屬性小結(jié)：1.clear屬性除了可以設(shè)置為left或者right外，還可以設(shè)置為both，表示同時消除左右兩側(cè)的影響。2.特別注意：對clear屬性的設(shè)置要放到文字所在的盒子里。如本例是設(shè)置p的clear屬性，而不是box的clear屬性。經(jīng)常有初學(xué)者沒有搞懂原理，誤以為在某個盒子里設(shè)置了clear屬性，就消除了它對外面文字的影響。3. 浮動默認(rèn)會對最后一個div有影響。如下例：Div和和css基礎(chǔ)基礎(chǔ)加一個div清除對后續(xù)div 的影響3.1.9 3.1.9 擴展盒

9、子的高度擴展盒子的高度1.將上例所在的段落刪除，這時在父div里面只有3個浮動的盒子，他們都不在標(biāo)準(zhǔn)流中，03-08.html。效果如圖：2.可以看到，文字段落被刪除后，父div的范圍縮成一條，是由本身的padding和border構(gòu)成的。也就是說，一個div的范圍是由它里面的標(biāo)準(zhǔn)流內(nèi)容決定的，與里面的浮動內(nèi)容無關(guān)。如果要使得父DIV的范圍包含著3個浮動盒子，需要使用clear的另一個特性。3.在3個div 的后面再增加一個div，并且設(shè)置其css代碼如下： 03-08-1.html3.1.9 3.1.9 擴展盒子的高度擴展盒子的高度注意：第二段代碼必須指定其父div。源碼見03-08-1.h

10、tml。 positionposition屬性可以設(shè)置為以下屬性可以設(shè)置為以下4 4個屬性值之一。個屬性值之一。（1 1）staticstatic：這是默認(rèn)的屬性值，也就是該盒：這是默認(rèn)的屬性值，也就是該盒子按照標(biāo)準(zhǔn)流進行布局。子按照標(biāo)準(zhǔn)流進行布局。3.2 3.2 盒子的定位盒子的定位 relative: relative: 1. 1. 相對定位的偏移基準(zhǔn)：以盒子本身在標(biāo)準(zhǔn)流中或者浮動時原本的相對定位的偏移基準(zhǔn)：以盒子本身在標(biāo)準(zhǔn)流中或者浮動時原本的位置作為偏移基準(zhǔn)的。位置作為偏移基準(zhǔn)的。2. 2. 使用相對定位的盒子，會相對于它在原本的位置，通過偏移指定使用相對定位的盒子，會相對于它在原本的位

11、置，通過偏移指定的距離，到達(dá)新位置。的距離，到達(dá)新位置。3. 3. 使用相對定位的盒子仍然在標(biāo)準(zhǔn)流中，它對父塊和兄弟盒子沒有使用相對定位的盒子仍然在標(biāo)準(zhǔn)流中，它對父塊和兄弟盒子沒有任何影響。任何影響。 absolute: absolute: 1. 1. 有意思的是絕對定位也是有意思的是絕對定位也是“相對相對”的。它的坐標(biāo)是相對其容器來說的。的。它的坐標(biāo)是相對其容器來說的。 2. 2.容器又是什么呢，容器就是離元素容器又是什么呢，容器就是離元素最近的最近的一個一個已經(jīng)定位已經(jīng)定位好的好的“祖先祖先”，定，定位好的意思就是其位好的意思就是其positionposition是是absoluteabs

12、olute或或fixedfixed或或relativerelative，注意不是默，注意不是默認(rèn)的認(rèn)的staticstatic。3. 3. 如果沒有這個容器，那就以瀏覽器窗口為基準(zhǔn)開始定位。如果沒有這個容器，那就以瀏覽器窗口為基準(zhǔn)開始定位。4. absolute4. absolute屬性的對象脫離文檔流。屬性的對象脫離文檔流。 fixed fixed：稱為固定定位，它和絕對定位類稱為固定定位，它和絕對定位類似，只是以瀏覽器窗口為基準(zhǔn)進行定位，似，只是以瀏覽器窗口為基準(zhǔn)進行定位，也就是當(dāng)拖動瀏覽器窗口的滾動條時，依也就是當(dāng)拖動瀏覽器窗口的滾動條時，依然保持對象位置不變。然保持對象位置不變。3.2

13、.1 3.2.1 靜態(tài)定位靜態(tài)定位 靜態(tài)定位表示塊保持在原本應(yīng)該在的位置上，即該值靜態(tài)定位表示塊保持在原本應(yīng)該在的位置上，即該值沒有任何移動的效果。文件沒有任何移動的效果。文件03-09.html03-09.html。這是一個很簡單。這是一個很簡單的標(biāo)準(zhǔn)流方式的兩層盒子。的標(biāo)準(zhǔn)流方式的兩層盒子。3.2.2 3.2.2 相對定位相對定位1 1移動一個子塊的情況：移動一個子塊的情況： 在上例基礎(chǔ)上添加如下代碼：在上例基礎(chǔ)上添加如下代碼： 03-10.html 03-10.html。 結(jié)論：結(jié)論：（1 1）使用相對定位的盒子，會相對于它原本的位置，通過偏使用相對定位的盒子，會相對于它原本的位置，通過

14、偏移指定的距離，到達(dá)新的位置。移指定的距離，到達(dá)新的位置。（2 2）使用相對定位的盒子仍然在標(biāo)準(zhǔn)流中，對父塊沒有影響。）使用相對定位的盒子仍然在標(biāo)準(zhǔn)流中，對父塊沒有影響。2 2兩個子塊的情況兩個子塊的情況2 2移動兩個子塊的情況，在父移動兩個子塊的情況，在父divdiv中放入兩個中放入兩個divdiv，首先不設(shè)置，首先不設(shè)置任何偏移：任何偏移：03-11.html03-11.html。效果如下：。效果如下：2 2兩個子塊的情況兩個子塊的情況在上例中添加如下代碼：文件在上例中添加如下代碼：文件03-11-1.html03-11-1.html。2 2兩個子塊的情況兩個子塊的情況再添加如下代碼：文件

15、再添加如下代碼：文件03-11-2.html03-11-2.html。3 3結(jié)論結(jié)論 得出下面兩條關(guān)于得出下面兩條關(guān)于“相對定位相對定位”的定位的定位原則。原則。 （1 1）使用相對定位的盒子，會相對于它在原本的位置，）使用相對定位的盒子，會相對于它在原本的位置，通過偏移指定的距離，到達(dá)新的位置。通過偏移指定的距離，到達(dá)新的位置。 （2 2）使用相對定位的盒子仍在標(biāo)準(zhǔn)流中，它對父塊和）使用相對定位的盒子仍在標(biāo)準(zhǔn)流中，它對父塊和兄弟盒子沒有任何影響。兄弟盒子沒有任何影響。 （3 3）上面例題是針對標(biāo)題流方式進行的，實際上，對）上面例題是針對標(biāo)題流方式進行的，實際上，對浮動的盒子使用相對定位也是一

16、樣的。浮動的盒子使用相對定位也是一樣的。3.2.3 3.2.3 絕對定位絕對定位 下面介紹絕對定位（下面介紹絕對定位（absoluteabsolute）。）。 通過上述講解，可以了解到各種通過上述講解，可以了解到各種positionposition屬性都需要通過配合偏移一定的屬性都需要通過配合偏移一定的距離來實現(xiàn)定位，而其中核心的問題就是距離來實現(xiàn)定位，而其中核心的問題就是以什么作為偏移的基準(zhǔn)。以什么作為偏移的基準(zhǔn)。 1 1創(chuàng)建基礎(chǔ)頁面創(chuàng)建基礎(chǔ)頁面 創(chuàng)建如圖基礎(chǔ)頁面，一個父創(chuàng)建如圖基礎(chǔ)頁面，一個父divdiv里面有里面有3 3個個divdiv，都是標(biāo)準(zhǔn)流，都是標(biāo)準(zhǔn)流方式排列，文件方式排列，文件

17、03-14-1.html03-14-1.html。 2 2使用絕對定位使用絕對定位 在上例中添加如下代碼，對在上例中添加如下代碼，對Box-2Box-2的定的定位方式從默認(rèn)的位方式從默認(rèn)的staticstatic改為改為absoluteabsolute，此時將以瀏覽器窗口作為基準(zhǔn)，并且該此時將以瀏覽器窗口作為基準(zhǔn)，并且該divdiv會徹底脫離標(biāo)準(zhǔn)流，會徹底脫離標(biāo)準(zhǔn)流，Box-3Box-3會緊貼會緊貼Box-1Box-1，就好像，就好像Box-2Box-2這個這個divdiv不存在一不存在一樣。文件樣。文件03-13.html03-13.html。 3 3使用絕對定位使用絕對定位思考：如果以父思

18、考：如果以父divdiv的右上角為基準(zhǔn)，向下和向左各偏移的右上角為基準(zhǔn)，向下和向左各偏移3030個像素，應(yīng)該如何修改代碼？文件個像素，應(yīng)該如何修改代碼？文件3-14.html3-14.html。 3.2.4 3.2.4 固定定位固定定位容器固定定位后，該容器不會隨著滾動條的拖動而變化位置；固定定位容器固定定位后，該容器不會隨著滾動條的拖動而變化位置；固定定位可以把一些特殊效果固定在瀏覽器的視線位置；可以把一些特殊效果固定在瀏覽器的視線位置；固定定位的參照位置只是瀏覽器窗口，使用固定定位的元素可以脫離頁固定定位的參照位置只是瀏覽器窗口，使用固定定位的元素可以脫離頁面，無論頁面如何滾動，始終處在頁

19、面的同一個位置上；面，無論頁面如何滾動，始終處在頁面的同一個位置上；3.2.4 3.2.4 固定定位固定定位打開源文件：打開源文件：fix.htmlfix.html，在瀏覽器中預(yù)覽該頁面，發(fā)現(xiàn)頁面的頂部部分，在瀏覽器中預(yù)覽該頁面，發(fā)現(xiàn)頁面的頂部部分會隨著滾動條一起滾動：會隨著滾動條一起滾動：3.2.4 3.2.4 固定定位固定定位 在瀏覽器中預(yù)覽頁面，拖動瀏覽器滾動條，發(fā)現(xiàn)頂部部分始在瀏覽器中預(yù)覽頁面，拖動瀏覽器滾動條，發(fā)現(xiàn)頂部部分始終固定在瀏覽器頂部不動。終固定在瀏覽器頂部不動。5 5結(jié)論結(jié)論 得出關(guān)于得出關(guān)于“絕對定位絕對定位”的定位原則。的定位原則。1. 1. 絕對定位的參照物是相對其容

20、器來說的。絕對定位的參照物是相對其容器來說的。2.2. 容器就是離元素容器就是離元素最近的最近的一個一個已經(jīng)定位已經(jīng)定位好的好的“祖先祖先”，定位，定位好的意思就是其好的意思就是其positionposition是是absoluteabsolute或或fixedfixed或或relativerelative，注意不是默認(rèn)的注意不是默認(rèn)的staticstatic。3. 3. 如果沒有這個容器，那就以瀏覽器窗口如果沒有這個容器，那就以瀏覽器窗口為基準(zhǔn)開始定位。為基準(zhǔn)開始定位。4. absolute4. absolute屬性的對象脫離文檔流。屬性的對象脫離文檔流。 盒子有兩種類型：盒子有兩種類型：1.是div這樣的塊級元素2.是span這樣的行內(nèi)元素 事實上，對于盒子有一個專門的屬性事實上，對于盒子有一個專門的屬性displaydisplay，用來確定，用來確定盒子的類型。盒子的類型。3.3 3.3 盒子的盒子的displaydisplay屬性屬性 有如下有如下HTMLHTML結(jié)構(gòu)，運行效果如右圖：結(jié)構(gòu)，運行效