第5章盒子的浮動(dòng)與定位.

1、CSS+DIVCSS+DIV網(wǎng)頁(yè)樣式與布局網(wǎng)頁(yè)樣式與布局第第1 1部分部分 CSSCSS核心原理核心原理 盒子的浮動(dòng)盒子的浮動(dòng)5.1盒子的定位盒子的定位5.2 第第4 4章介紹了獨(dú)立的盒子模型，以及在章介紹了獨(dú)立的盒子模型，以及在標(biāo)準(zhǔn)流情況下的盒子的相互關(guān)系。標(biāo)準(zhǔn)流情況下的盒子的相互關(guān)系。 如果僅僅按照標(biāo)準(zhǔn)流的方式進(jìn)行排版，如果僅僅按照標(biāo)準(zhǔn)流的方式進(jìn)行排版，就只能按照僅有的幾種可能性進(jìn)行排版，就只能按照僅有的幾種可能性進(jìn)行排版，限制太大。限制太大。 CSS CSS的制定者也想到了排版限制的問(wèn)題，的制定者也想到了排版限制的問(wèn)題，因此又給出了若干不同的手段以實(shí)現(xiàn)各種因此又給出了若干不同的手段以實(shí)現(xiàn)

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

3、CSS中有一個(gè)中有一個(gè)floatfloat屬性，默認(rèn)為屬性，默認(rèn)為nonenone，也就是標(biāo)準(zhǔn)流通常的情況。也就是標(biāo)準(zhǔn)流通常的情況。 如果將如果將floatfloat屬性的值設(shè)置為屬性的值設(shè)置為leftleft或或rightright，元素就會(huì)向其父元素的左側(cè)或右側(cè)，元素就會(huì)向其父元素的左側(cè)或右側(cè)靠緊，同時(shí)默認(rèn)情況下，盒子的寬度不再靠緊，同時(shí)默認(rèn)情況下，盒子的寬度不再伸展，而是收縮，根據(jù)盒子里面的內(nèi)容的伸展，而是收縮，根據(jù)盒子里面的內(nèi)容的寬度來(lái)確定。寬度來(lái)確定。5.1.1 5.1.1 制作基礎(chǔ)頁(yè)面制作基礎(chǔ)頁(yè)面 浮動(dòng)的性質(zhì)比較復(fù)雜，這里先制作一浮動(dòng)的性質(zhì)比較復(fù)雜，這里先制作一個(gè)基礎(chǔ)的頁(yè)面，代碼如

4、下，文件為個(gè)基礎(chǔ)的頁(yè)面，代碼如下，文件為“05-05-01.html”01.html”。 后面講解將基于這個(gè)文件進(jìn)行。后面講解將基于這個(gè)文件進(jìn)行。5.1.2 5.1.2 設(shè)置第設(shè)置第1 1個(gè)浮動(dòng)的個(gè)浮動(dòng)的divdiv 在上面的代碼中找到：在上面的代碼中找到： .son1.son1 / /* * 這里設(shè)置這里設(shè)置son1son1的浮動(dòng)方式的浮動(dòng)方式* */ / 將將.son1.son1盒子設(shè)置為向左浮動(dòng)，代碼為：盒子設(shè)置為向左浮動(dòng)，代碼為： .son1.son1 / /* * 這里設(shè)置這里設(shè)置son1son1的浮動(dòng)方式的浮動(dòng)方式* */ / float:left; float:left; 圖圖5

5、.2 設(shè)置第設(shè)置第1個(gè)個(gè)div浮動(dòng)時(shí)的效果浮動(dòng)時(shí)的效果5.1.3 5.1.3 設(shè)置第設(shè)置第2 2個(gè)浮動(dòng)的個(gè)浮動(dòng)的divdiv圖圖5.3 設(shè)置前兩個(gè)設(shè)置前兩個(gè)div浮動(dòng)時(shí)的效果浮動(dòng)時(shí)的效果5.1.4 5.1.4 設(shè)置第設(shè)置第3 3個(gè)浮動(dòng)的個(gè)浮動(dòng)的divdiv圖圖5.4 設(shè)置第設(shè)置第3個(gè)個(gè)div浮動(dòng)時(shí)的效果浮動(dòng)時(shí)的效果5.1.5 5.1.5 改變浮動(dòng)的方向改變浮動(dòng)的方向 圖圖5.5 改變浮動(dòng)方向后的效果改變浮動(dòng)方向后的效果 圖圖5.6 div被擠到下一行時(shí)的效果被擠到下一行時(shí)的效果 5.1.6 5.1.6 再次改變浮動(dòng)的方向再次改變浮動(dòng)的方向圖圖5.7 交換交換div位置時(shí)的效果位置時(shí)的效果 圖圖

6、5.8 div被擠到下一行的效果被擠到下一行的效果5.1.7 5.1.7 全部向左浮動(dòng)全部向左浮動(dòng) 圖圖5.9 設(shè)置設(shè)置3個(gè)個(gè)div浮動(dòng)時(shí)的效果浮動(dòng)時(shí)的效果 圖圖5.10 div擠倒下一行被卡住時(shí)的效果擠倒下一行被卡住時(shí)的效果5.1.8 5.1.8 使用使用clearclear屬性清除浮動(dòng)的影響屬性清除浮動(dòng)的影響 圖圖5.11 設(shè)置浮動(dòng)后文字環(huán)繞的效果設(shè)置浮動(dòng)后文字環(huán)繞的效果 圖圖5.12 清除浮動(dòng)對(duì)左側(cè)影響后的效果清除浮動(dòng)對(duì)左側(cè)影響后的效果 圖圖5.13 清除浮動(dòng)對(duì)右側(cè)影響后的效果清除浮動(dòng)對(duì)右側(cè)影響后的效果5.1.9 5.1.9 擴(kuò)展盒子的高度擴(kuò)展盒子的高度 圖圖5.14 包含浮動(dòng)包含浮動(dòng)d

7、iv的容器將不會(huì)適應(yīng)高度的容器將不會(huì)適應(yīng)高度 圖圖5.15 希望實(shí)現(xiàn)的效果希望實(shí)現(xiàn)的效果5.2 5.2 盒子的定位盒子的定位 廣義的廣義的“定位定位”：要將某個(gè)元素放到：要將某個(gè)元素放到某個(gè)位置的時(shí)候，這個(gè)動(dòng)作可以稱(chēng)為定位某個(gè)位置的時(shí)候，這個(gè)動(dòng)作可以稱(chēng)為定位操作，可以使用任何操作，可以使用任何CSSCSS規(guī)則來(lái)實(shí)現(xiàn)，這就規(guī)則來(lái)實(shí)現(xiàn)，這就是泛指的一個(gè)網(wǎng)頁(yè)排版中的定位操作，使是泛指的一個(gè)網(wǎng)頁(yè)排版中的定位操作，使用傳統(tǒng)的表格排版時(shí)，同樣存在定位的問(wèn)用傳統(tǒng)的表格排版時(shí)，同樣存在定位的問(wèn)題。題。 狹義的狹義的“定位定位”：在：在CSSCSS中有一個(gè)非常中有一個(gè)非常重要的屬性重要的屬性positionpo

8、sition，這個(gè)單詞翻譯為中，這個(gè)單詞翻譯為中文也是定位的意思。文也是定位的意思。 然而要使用然而要使用CSSCSS進(jìn)行定位操作并不僅僅進(jìn)行定位操作并不僅僅通過(guò)這個(gè)屬性來(lái)實(shí)現(xiàn)，因此不要把二者混通過(guò)這個(gè)屬性來(lái)實(shí)現(xiàn)，因此不要把二者混淆。淆。 首先，對(duì)首先，對(duì)positionposition屬性的使用方法做屬性的使用方法做一個(gè)概述，后面再具體舉例子說(shuō)明。一個(gè)概述，后面再具體舉例子說(shuō)明。 positionposition屬性可以設(shè)置為以下屬性可以設(shè)置為以下4 4個(gè)屬性個(gè)屬性值之一。值之一。 （1 1）staticstatic：這是默認(rèn)的屬性值，也：這是默認(rèn)的屬性值，也就是該盒子按照標(biāo)準(zhǔn)流（包括浮動(dòng)方

9、式）就是該盒子按照標(biāo)準(zhǔn)流（包括浮動(dòng)方式）進(jìn)行布局。進(jìn)行布局。 （2 2）relativerelative：稱(chēng)為相對(duì)定位，使用：稱(chēng)為相對(duì)定位，使用相對(duì)定位的盒子的位置常以標(biāo)準(zhǔn)流的排版相對(duì)定位的盒子的位置常以標(biāo)準(zhǔn)流的排版方式為基礎(chǔ)，然后使盒子相對(duì)于它在原本方式為基礎(chǔ)，然后使盒子相對(duì)于它在原本的標(biāo)準(zhǔn)位置偏移指定的距離。的標(biāo)準(zhǔn)位置偏移指定的距離。 相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它后相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對(duì)待它。面的盒子仍以標(biāo)準(zhǔn)流方式對(duì)待它。 （3 3）absoluteabsolute：絕對(duì)定位，盒子的位：絕對(duì)定位，盒子的位置以它的包含框?yàn)榛鶞?zhǔn)進(jìn)行偏移。置以它的包含框?yàn)榛鶞?zhǔn)

10、進(jìn)行偏移。 絕對(duì)定位的盒子從標(biāo)準(zhǔn)流中脫離。絕對(duì)定位的盒子從標(biāo)準(zhǔn)流中脫離。 這意味著它們對(duì)其后的兄弟盒子的定位這意味著它們對(duì)其后的兄弟盒子的定位沒(méi)有影響，其他的盒子就好像這個(gè)盒子不沒(méi)有影響，其他的盒子就好像這個(gè)盒子不存在一樣。存在一樣。 （4 4）fixedfixed：稱(chēng)為固定定位，它和絕對(duì)：稱(chēng)為固定定位，它和絕對(duì)定位類(lèi)似，只是以瀏覽器窗口為基準(zhǔn)進(jìn)行定位類(lèi)似，只是以瀏覽器窗口為基準(zhǔn)進(jìn)行定位，也就是當(dāng)拖動(dòng)瀏覽器窗口的滾動(dòng)條定位，也就是當(dāng)拖動(dòng)瀏覽器窗口的滾動(dòng)條時(shí)，依然保持對(duì)象位置不變。時(shí)，依然保持對(duì)象位置不變。5.2.1 5.2.1 靜態(tài)定位靜態(tài)定位圖圖5.16 沒(méi)有設(shè)置沒(méi)有設(shè)置position屬性

11、時(shí)的狀態(tài)屬性時(shí)的狀態(tài)5.2.2 5.2.2 相對(duì)定位相對(duì)定位1 1一個(gè)子塊的情況一個(gè)子塊的情況 圖圖5.17 一個(gè)一個(gè)div設(shè)置為相對(duì)定定位后的效果設(shè)置為相對(duì)定定位后的效果 圖圖5.18 以右側(cè)和下側(cè)為基準(zhǔn)設(shè)置相對(duì)定定位以右側(cè)和下側(cè)為基準(zhǔn)設(shè)置相對(duì)定定位 2 2兩個(gè)子塊的情況兩個(gè)子塊的情況 圖圖5.19 設(shè)置為相對(duì)定位前的效果設(shè)置為相對(duì)定位前的效果 圖圖5.20 兩個(gè)兄弟兩個(gè)兄弟div的情況下，的情況下，其中一個(gè)設(shè)置為相對(duì)定位后的效果其中一個(gè)設(shè)置為相對(duì)定位后的效果3 3結(jié)論結(jié)論 得出下面兩條關(guān)于得出下面兩條關(guān)于“相對(duì)定位相對(duì)定位”的定位的定位原則。原則。 （1 1）使用相對(duì)定位的盒子，會(huì)相對(duì)于）

12、使用相對(duì)定位的盒子，會(huì)相對(duì)于它在原本的位置，通過(guò)偏移指定的距離，它在原本的位置，通過(guò)偏移指定的距離，到達(dá)新的位置。到達(dá)新的位置。 （2 2）使用相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流）使用相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它對(duì)父塊和兄弟盒子沒(méi)有任何影響。中，它對(duì)父塊和兄弟盒子沒(méi)有任何影響。 圖圖5.21 兩個(gè)兄弟兩個(gè)兄弟div都設(shè)置為相對(duì)定位后的效果都設(shè)置為相對(duì)定位后的效果 圖圖5.22 在浮動(dòng)方式下，使用相對(duì)定位在浮動(dòng)方式下，使用相對(duì)定位 5.2.3 5.2.3 絕對(duì)定位絕對(duì)定位 介紹了相對(duì)定位以后，下面介紹絕對(duì)介紹了相對(duì)定位以后，下面介紹絕對(duì)定位（定位（absoluteabsolute）。）。 通過(guò)上述講解，可以了解到各種通過(guò)上述講解，可以了解到各種positionposition屬性都需要通過(guò)配合偏移一定的屬性都需要通過(guò)配合偏移一定的距離來(lái)實(shí)現(xiàn)定位，而其中核心的問(wèn)題就是距離來(lái)實(shí)現(xiàn)定位，而其中核心的問(wèn)題就是以什么作為偏移的基準(zhǔn)。以什么作為偏移的基準(zhǔn)。 1 1創(chuàng)建基礎(chǔ)頁(yè)面