1、讓IT教學更簡單，讓IT學習更有效讓IT教學更簡單，讓IT學習更有效讓IT教學更簡單，讓IT學習更有效第七章 浮動與定位元素的浮動常見的幾種定位模式清除浮動的方法讓IT教學更簡單，讓IT學習更有效7 7.2 .2【案例20】：商品專欄7 7.1 .1【案例19】：世界杯夢幻陣容7 7.3 .3【案例21】：移動端電商界面目錄7.47.4【案例22】：違停查詢讓IT教學更簡單，讓IT學習更有效7.1 【案例19】世界杯夢幻陣容初學者在設計一個頁面時，將頁面中的元素從上到下一一羅列，如下圖（左）所示。這種布局制作出來的頁面看起來呆板、不美觀。本節將運用CSS中的浮動屬性對其重新進行布局，制作一個美

2、觀、整齊的“世界杯夢幻陣容”主題頁面，如下圖（右）所示。案例引入（左）（右）讓IT教學更簡單，讓IT學習更有效7.1 【案例19】知識引入1 1元素的浮動屬性元素的浮動屬性float知識引入讓IT教學更簡單，讓IT學習更有效7.1 【案例19】知識點講解浮動屬性作為CSS的重要屬性，被頻繁地應用在網頁制作中。所謂元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，移動到其父元素中相應位置的過程。在CSS中，通過float屬性來定義浮動，其基本語法格式如下：1、元素的浮動屬性元素的浮動屬性float選擇器float:屬性值;讓IT教學更簡單，讓IT學習更有效7.1 【案例19】知識點講解常

3、用的float屬性值有三個，分別表示不同的含義，具體如下表所示。1、元素的浮動屬性元素的浮動屬性float屬性值屬性值描述描述left元素向左浮動right元素向右浮動none元素不浮動（默認值）讓IT教學更簡單，讓IT學習更有效7.1 【案例19】案例實現讓IT教學更簡單，讓IT學習更有效7.2 【案例20】商品專欄由于浮動元素不再占用原文檔流中的位置，所以會對頁面中其他元素的排版產生影響。如果要避免這種影響，就需要對元素清除浮動。本小節將通過清除浮動的方法制作一個“商品專欄”頁面，如下圖所示。案例引入讓IT教學更簡單，讓IT學習更有效7.2 【案例20】知識引入1 1使用使用clear屬性

4、清除浮動屬性清除浮動2 2使用使用overflow屬性清除浮動屬性清除浮動3 3使用使用after偽對象清除浮動偽對象清除浮動知識引入讓IT教學更簡單，讓IT學習更有效7.2 【案例20】知識點講解為了避免左浮動或右浮動對元素的影響，往往需要在該元素中清除浮動。在CSS中，clear屬性用于清除浮動，其基本語法格式如下：1、運用運用clear屬性清除浮動屬性清除浮動選擇器clear:屬性值;讓IT教學更簡單，讓IT學習更有效7.2 【案例20】知識點講解clear屬性的常用值有三個，分別表示不同的含義，具體如下表所示。1、運用運用clear屬性清除浮動屬性清除浮動屬性值屬性值描述描述left不

5、允許左側有浮動元素（清除左側浮動的影響）right不允許右側有浮動元素（清除右側浮動的影響）both同時清除左右兩側浮動的影響讓IT教學更簡單，讓IT學習更有效7.2 【案例20】知識點講解運用clear屬性只能清除元素左右兩側浮動的影響。然而在制作網頁時，經常會遇到一些特殊的浮動影響，例如，對子元素設置浮動時，如果不對其父元素定義高度，則子元素的浮動會對父元素產生影響。2、運用運用overflow屬性清除浮動屬性清除浮動讓IT教學更簡單，讓IT學習更有效7.2 【案例20】知識點講解使用after偽對象也可以清除浮動，但是該方法只適用于IE8及以上版本瀏覽器和其他非IE瀏覽器。使用after

6、偽對象清除浮動時需要注意以下兩點：（1）必須為需要清除浮動的元素偽對象設置“height:0;”樣式，否則該元素會比其實際高度高出若干像素。（2）必須在偽對象中設置content屬性，屬性值可以為空，如“content: ;”。3、使用使用after偽對象清除浮動偽對象清除浮動讓IT教學更簡單，讓IT學習更有效7.2【案例20】案例實現讓IT教學更簡單，讓IT學習更有效7.3 【案例21】移動端電商界面隨著“移動互聯”時代的到來，手機上網已經慢慢融入到人們的日常生活中。本節將運用CSS中的overflow屬性模擬一款“移動端電商界面”，如下圖所示。案例引入讓IT教學更簡單，讓IT學習更有效7.

7、3 【案例21】知識引入1 1overflow屬性屬性知識引入讓IT教學更簡單，讓IT學習更有效7.3 【案例21】知識點講解當盒子內的元素超出盒子自身的大小時，內容就會溢出，這時如果想要規范溢出內容的顯示方式，就需要使用CSS中的overflow屬性，其基本語法格式如下：1、overflow屬性屬性選擇器overflow:屬性值;讓IT教學更簡單，讓IT學習更有效7.3 【案例21】知識點講解overflow屬性的常用值有四個，分別表示不同的含義，具體如下表所示。1、overflow屬性屬性屬性值屬性值描述描述visible內容不會被修剪，會呈現在元素框之外（默認值）hidden溢出內容會被

8、修剪，并且被修剪的內容是不可見的auto在需要時產生滾動條，即自適應所要顯示的內容scroll溢出內容會被修剪，且瀏覽器會始終顯示滾動條讓IT教學更簡單，讓IT學習更有效7.3 【案例21】案例實現讓IT教學更簡單，讓IT學習更有效7.4 【案例22】違停查詢近幾年汽車產業實現了快速發展。本節將運用CSS中常用的定位方式來制作一個“違停查詢”界面，其默認效果如下圖（左）所示。當鼠標經過某一個“違停坐標”時，其背景圖像將會發生變化，圖（右）為鼠標經過第一個“違停坐標”時的頁面效果。案例引入（左）（右）讓IT教學更簡單，讓IT學習更有效7.4 【案例22】知識引入1 1元素的定位屬性元素的定位屬性

9、2 2靜態定位靜態定位3 3相對定位相對定位知識引入4 4絕對定位絕對定位5 5固定固定定位定位6 6z-index層疊等級屬性層疊等級屬性讓IT教學更簡單，讓IT學習更有效7.4 【案例22】知識點講解（1）定位定位模式模式在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：position屬性的常用值有四個，分別表示不同的定位模式，具體如下表所示。1、元素的定位屬性元素的定位屬性選擇器position:屬性值;值值描述描述static自動定位（默認定位方式）relative相對定位，相對于其原文檔流的位置進行定位absolute絕對定位，相對于其上一個已經定位的父元

10、素進行定位fixed固定定位，相對于瀏覽器窗口進行定位讓IT教學更簡單，讓IT學習更有效7.4 【案例22】知識點講解（2）邊邊偏移偏移定位模式（position）僅僅用于定義元素以哪種方式定位，并不能確定元素的具體位置。在CSS中，通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數值或百分比，對它們的具體解釋如下表所示。1、元素的定位屬性元素的定位屬性邊偏移屬性邊偏移屬性描述描述top頂端偏移量，定義元素相對于其父元素上邊線的距離bottom底部偏移量，定義元素相對于其父元素下邊線的距離left左側偏移量，定義元素相對于其父元素左邊線的距

11、離right右側偏移量，定義元素相對于其父元素右邊線的距離讓IT教學更簡單，讓IT學習更有效7.4 【案例22】知識點講解靜態定位是元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態位置。 所謂靜態位置就是各個元素在HTML文檔流中默認的位置。任何元素在默認狀態下都會以靜態定位來確定自己的位置，所以當沒有定義position屬性時，并不說明該元素沒有自己的位置，它會遵循默認值顯示為靜態位置。在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。2、靜態定位靜態定位讓IT教學更簡單，讓IT學習更有效7.4 【案例2

12、2】知識點講解相對定位是將元素相對于它在標準文檔流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位于相對位置。對元素設置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。3、相對定位相對定位讓IT教學更簡單，讓IT學習更有效7.4 【案例22】知識點講解絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素進行定位，若所有父元素都沒有定位，則依據body根元素（瀏覽器窗口）進行定位。當position屬性的取值為absolute時，可以將元素的定位模式設置為絕對定位。4、絕、絕對對定位定位讓IT教學更簡單，讓IT學習更有效7.4 【案例22】知識點講解固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設置為固定定位。當對元素設置固定定位后，它將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動，也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。5、固定、固定定位定位讓IT教學更簡單，讓IT學習更有效7.4 【案例22】知識點講解當對多個元