5-浮動與定位

1、浮動與定位 盒子的浮動盒子的浮動1盒子的定位盒子的定位2 上節(jié)課介紹了獨立的盒子模型，以及在標準流情況下的盒子的相互關(guān)系。 如果僅僅按照標準流的方式進行排版，就只能按照僅有的幾種可能性進行排版，限制太大。 CSS的制定者也想到了排版限制的問題，因此又給出了若干不同的手段以實現(xiàn)各種排版需要，從而可以靈活地實現(xiàn)各種形式的排版要求。 本章介紹CSS中float和position這兩個重要屬性的應(yīng)用。5.1 盒子的浮動 在標準流中，一個塊級元素在水平方向會自動伸展，直到包含它的元素的邊界；而在豎直方向和兄弟元素依次排列，不能并排。 使用“浮動”方式后，塊級元素的表現(xiàn)就會有所不同。 CSS中有一個flo

2、at屬性，默認為none，也就是標準流通常的情況。 如果將float屬性的值設(shè)置為left或right，元素就會向其父元素的左側(cè)或右側(cè)靠緊，同時默認情況下，盒子的寬度不再伸展，而是收縮，根據(jù)盒子里面的內(nèi)容的寬度來確定。5.1.1 制作基礎(chǔ)頁面 浮動的性質(zhì)比較復(fù)雜，這里先制作一個基礎(chǔ)的頁面，代碼如下，文件為“05-01.html”。 后面講解將基于這個文件進行。5.1.2 設(shè)置第1個浮動的div 在上面的代碼中找到： .son1 /* 這里設(shè)置son1的浮動方式*/ 將.son1盒子設(shè)置為向左浮動，代碼為： .son1 /* 這里設(shè)置son1的浮動方式*/ float:left; 圖圖5.2 設(shè)

3、置第設(shè)置第1個個div浮動時的效果浮動時的效果5.1.3 設(shè)置第2個浮動的div圖圖5.3 設(shè)置前兩個設(shè)置前兩個div浮動時的效果浮動時的效果5.1.4 設(shè)置第3個浮動的div圖圖5.4 設(shè)置第設(shè)置第3個個div浮動時的效果浮動時的效果5.1.5 改變浮動的方向 圖圖5.5 改變浮動方向后的效果改變浮動方向后的效果 圖圖5.6 div被擠到下一行時的效果被擠到下一行時的效果 5.1.6 再次改變浮動的方向圖圖5.7 交換交換div位置時的效果位置時的效果 圖圖5.8 div被擠到下一行的效果被擠到下一行的效果5.1.7 全部向左浮動 圖圖5.9 設(shè)置設(shè)置3個個div浮動時的效果浮動時的效果 圖

4、圖5.10 div擠倒下一行被卡住時的效果擠倒下一行被卡住時的效果5.1.8 使用clear屬性清除浮動的影響 圖圖5.11 設(shè)置浮動后文字環(huán)繞的效果設(shè)置浮動后文字環(huán)繞的效果 圖圖5.12 清除浮動對左側(cè)影響后的效果清除浮動對左側(cè)影響后的效果 圖圖5.13 清除浮動對右側(cè)影響后的效果清除浮動對右側(cè)影響后的效果5.1.9 擴展盒子的高度 圖圖5.14 包含浮動包含浮動div的容器將不會適應(yīng)高度的容器將不會適應(yīng)高度 圖圖5.15 希望實現(xiàn)的效果希望實現(xiàn)的效果5.2 盒子的定位 廣義的“定位”：要將某個元素放到某個位置的時候，這個動作可以稱為定位操作，可以使用任何CSS規(guī)則來實現(xiàn)，這就是泛指的一個網(wǎng)

5、頁排版中的定位操作，使用傳統(tǒng)的表格排版時，同樣存在定位的問題。 狹義的“定位”：在CSS中有一個非常重要的屬性position，這個單詞翻譯為中文也是定位的意思。 然而要使用CSS進行定位操作并不僅僅通過這個屬性來實現(xiàn)，因此不要把二者混淆。 首先，對position屬性的使用方法做一個概述，后面再具體舉例子說明。 position屬性可以設(shè)置為以下4個屬性值之一。 （1）static：這是默認的屬性值，也就是該盒子按照標準流（包括浮動方式）進行布局。 （2）relative：稱為相對定位，使用相對定位的盒子的位置常以標準流的排版方式為基礎(chǔ)，然后使盒子相對于它在原本的標準位置偏移指定的距離。 相

6、對定位的盒子仍在標準流中，它后面的盒子仍以標準流方式對待它。 （3）absolute：絕對定位，盒子的位置以它的包含框為基準進行偏移。 絕對定位的盒子從標準流中脫離。 這意味著它們對其后的兄弟盒子的定位沒有影響，其他的盒子就好像這個盒子不存在一樣。 （4）fixed：稱為固定定位，它和絕對定位類似，只是以瀏覽器窗口為基準進行定位，也就是當(dāng)拖動瀏覽器窗口的滾動條時，依然保持對象位置不變。5.2.1 靜態(tài)定位圖圖5.16 沒有設(shè)置沒有設(shè)置position屬性時的狀態(tài)屬性時的狀態(tài)5.2.2 相對定位1一個子塊的情況 圖圖5.17 一個一個div設(shè)置為相對定定位后的效果設(shè)置為相對定定位后的效果 圖圖5

7、.18 以右側(cè)和下側(cè)為基準設(shè)置相對定定位以右側(cè)和下側(cè)為基準設(shè)置相對定定位 2兩個子塊的情況 圖圖5.19 設(shè)置為相對定位前的效果設(shè)置為相對定位前的效果 圖圖5.20 兩個兄弟兩個兄弟div的情況下，的情況下，其中一個設(shè)置為相對定位后的效果其中一個設(shè)置為相對定位后的效果3結(jié)論 得出下面兩條關(guān)于“相對定位”的定位原則。 （1）使用相對定位的盒子，會相對于它在原本的位置，通過偏移指定的距離，到達新的位置。 （2）使用相對定位的盒子仍在標準流中，它對父塊和兄弟盒子沒有任何影響。 圖圖5.21 兩個兄弟兩個兄弟div都設(shè)置為相對定位后的效果都設(shè)置為相對定位后的效果 圖圖5.22 在浮動方式下，使用相對定位在浮動方式下，使用相對定位 5.2.3 絕對定位 介紹了相對定位以后，下面介紹絕對定位（absolute）。 通過上述講解，可以了解到各種position屬性都需要通過配合偏移一定的距離來實現(xiàn)定位，而其中核心的問題就是以什么作為偏移的基準。 1創(chuàng)建基礎(chǔ)頁面2使用絕對定位3瀏覽器的Bug與Hack 圖圖5.23 設(shè)置絕對