第7章浮動(dòng)與定位

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

2、觀、整齊的“世界杯夢(mèng)幻陣容”主題頁(yè)面，如下圖（右）所示。案例引入（左）（右）讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效7.1 【案例19】知識(shí)引入1 1元素的浮動(dòng)屬性元素的浮動(dòng)屬性float知識(shí)引入讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效7.1 【案例19】知識(shí)點(diǎn)講解浮動(dòng)屬性作為CSS的重要屬性，被頻繁地應(yīng)用在網(wǎng)頁(yè)制作中。所謂元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，移動(dòng)到其父元素中相應(yīng)位置的過(guò)程。在CSS中，通過(guò)float屬性來(lái)定義浮動(dòng)，其基本語(yǔ)法格式如下：1、元素的浮動(dòng)屬性元素的浮動(dòng)屬性float選擇器float:屬性值;讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效7.1 【案例19】知識(shí)點(diǎn)講解常

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

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

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

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

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

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

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

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

11、離right右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線的距離讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效7.4 【案例22】知識(shí)點(diǎn)講解靜態(tài)定位是元素的默認(rèn)定位方式，當(dāng)position屬性的取值為static時(shí)，可以將元素定位于靜態(tài)位置。 所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。任何元素在默認(rèn)狀態(tài)下都會(huì)以靜態(tài)定位來(lái)確定自己的位置，所以當(dāng)沒(méi)有定義position屬性時(shí)，并不說(shuō)明該元素沒(méi)有自己的位置，它會(huì)遵循默認(rèn)值顯示為靜態(tài)位置。在靜態(tài)定位狀態(tài)下，無(wú)法通過(guò)邊偏移屬性（top、bottom、left或right）來(lái)改變?cè)氐奈恢谩?、靜態(tài)定位靜態(tài)定位讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效7.4 【案例2

12、2】知識(shí)點(diǎn)講解相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時(shí)，可以將元素定位于相對(duì)位置。對(duì)元素設(shè)置相對(duì)定位后，可以通過(guò)邊偏移屬性改變?cè)氐奈恢茫撬谖臋n流中的位置仍然保留。3、相對(duì)定位相對(duì)定位讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效7.4 【案例22】知識(shí)點(diǎn)講解絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素進(jìn)行定位，若所有父元素都沒(méi)有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。當(dāng)position屬性的取值為absolute時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位。4、絕、絕對(duì)對(duì)定位定位讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效7.4 【案例22】知識(shí)點(diǎn)講解固定定位是絕對(duì)定位的一種特殊形式，它以瀏覽器窗口作為參照物來(lái)定義網(wǎng)頁(yè)元素。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位。當(dāng)對(duì)元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來(lái)定義自己的顯示位置。不管瀏覽器滾動(dòng)條如何滾動(dòng)，也不管瀏覽器窗口的大小如何變化，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置。5、固定、固定定位定位讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效7.4 【案例22】知識(shí)點(diǎn)講解當(dāng)對(duì)多個(gè)元