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

1、第七章 浮動(dòng)與定位元素的浮動(dòng)元素的定位清除浮動(dòng)Overflow屬性2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)27.1元素的浮動(dòng)7.2overflow屬性7.3元素的定位7.4階段案例制作banner2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)37.1 元素的浮動(dòng)元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，移動(dòng)到其父元素中指定位置的過(guò)程。7.1.1 元素的浮動(dòng)屬性float什么是浮動(dòng)？如何定義浮動(dòng)？在CSS中，通過(guò)float屬性來(lái)定義浮動(dòng)：選擇器float:屬性值;example 012022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)47.1 元素的浮動(dòng)7.1.1 元素的浮動(dòng)屬性floatfloa

2、t屬性值：屬性值描述left元素向左浮動(dòng)right元素向右浮動(dòng)none元素不浮動(dòng)（默認(rèn)值）2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)57.1 元素的浮動(dòng)7.1.2 清除浮動(dòng)為什么要清除浮動(dòng)？ 由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)頁(yè)面中其他元素的排版產(chǎn)生影響，這時(shí)就需要在元素中清除浮動(dòng)。清除浮動(dòng)的基本語(yǔ)法格式在CSS中，clear屬性用于清除浮動(dòng)：選擇器clear:屬性值;2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)67.1 元素的浮動(dòng)7.1.2 清除浮動(dòng)clear屬性的常用值屬性值描述left不允許左側(cè)有浮動(dòng)元素（清除左側(cè)浮動(dòng)的影響）right不允許右側(cè)有浮動(dòng)元素（清除右側(cè)浮動(dòng)的影響）bo

3、th同時(shí)清除左右兩側(cè)浮動(dòng)的影響2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)77.1 元素的浮動(dòng)7.1.2 清除浮動(dòng)常用三種清除浮動(dòng)的方法：方法一：使用空標(biāo)記清除浮動(dòng)example 03方法二：使用overflow屬性清除浮動(dòng)example 04方法三：使用after偽對(duì)象清除浮動(dòng)example 02after顧名思義是在元素后面的意思，實(shí)質(zhì)是在元素之后添加內(nèi)容。 這個(gè)偽元素允許制作人員在元素內(nèi)容的最后面插入生成內(nèi)容，需要和content屬性一起使用，設(shè)置在對(duì)象后發(fā)生的內(nèi)容。默認(rèn)地，這個(gè)偽元素是inline行內(nèi)元素，不過(guò)可以使用屬性 display 改變這一點(diǎn)。 所有主流瀏覽器都支持 :after

4、偽元素，但對(duì)于IE來(lái)說(shuō)，只有IE8以上版本支持。2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)87.1 元素的浮動(dòng)after偽對(duì)象7.1.2 清除浮動(dòng)2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)97.1 元素的浮動(dòng)7.1.2 清除浮動(dòng)after偽對(duì)象清除浮動(dòng)時(shí)的注意事項(xiàng)：必須為需要清除浮動(dòng)的元素偽對(duì)象設(shè)置“height:0;”樣式，否則該元素會(huì)比其實(shí)際高度高出若干像素。必須在偽對(duì)象中設(shè)置content屬性，屬性值可以為空，如content: “;。example 052022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)107.2 overflow屬性overflow屬性的應(yīng)用當(dāng)盒子內(nèi)的元素超出盒子自身的大小時(shí)，內(nèi)容

5、就會(huì)溢出（IE6除外），這時(shí)如果想要規(guī)范溢出內(nèi)容的顯示方式，就需要使用CSS的overflow屬性，其基本語(yǔ)法格式如下：選擇器overflow:屬性值;2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)117.2 overflow屬性overflow屬性的常用值屬性值描述visible內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外（默認(rèn)值）hidden溢出內(nèi)容會(huì)被修剪，并且被修剪的內(nèi)容是不可見(jiàn)的auto在需要時(shí)產(chǎn)生滾動(dòng)條，即自適應(yīng)所要顯示的內(nèi)容scroll溢出內(nèi)容會(huì)被修剪，且瀏覽器會(huì)始終顯示滾動(dòng)條example 062022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)127.3 元素的定位1、定位模式7.3.1 元素的定位屬性

6、在CSS中，position屬性用于定義元素的定位模式：元素的定位屬性主要包括定位模式和邊偏移兩部分。position屬性的常用值值描述static自動(dòng)定位（默認(rèn)定位方式）relative相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位absolute絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位fixed固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位選擇器position:屬性值;2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)132、邊偏移7.3.1 元素的定位屬性在CSS中，通過(guò)邊偏移屬性top、bottom、left或right，來(lái)精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比。邊偏移屬性描述top頂端

7、偏移量，定義元素相對(duì)于其父元素上邊線的距離bottom底部偏移量，定義元素相對(duì)于其父元素下邊線的距離left左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線的距離right右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線的距離7.3 元素的定位2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)147.3.2 靜態(tài)定位static7.3 元素的定位靜態(tài)定位是元素的默認(rèn)定位方式，當(dāng)position屬性的取值為static時(shí)，可以將元素定位于靜態(tài)位置。 所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。在靜態(tài)定位狀態(tài)下，無(wú)法通過(guò)邊偏移屬性（top、bottom、left或right）來(lái)改變?cè)氐奈恢谩?022/7/19計(jì)

8、算機(jī)學(xué)院 web基礎(chǔ)157.3.3 相對(duì)定位relative7.3 元素的定位相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時(shí)，可以將元素定位于相對(duì)位置。對(duì)元素設(shè)置相對(duì)定位后，可以通過(guò)邊偏移屬性改變?cè)氐奈恢?，但是它在文檔流中的位置仍然保留。example 072022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)167.3.4 絕對(duì)定位absolute7.3 元素的定位絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素進(jìn)行定位，若所有父元素都沒(méi)有定位則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。當(dāng)position屬性的取值為absolut

9、e時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位。修改example 07example 08如果僅設(shè)置絕對(duì)定位，不設(shè)置邊偏移，則元素位置不變，但不再占用標(biāo)準(zhǔn)文檔流中的空間，與上移的后續(xù)元素重合定義多個(gè)邊偏移屬性時(shí)，如果left和right沖突，以left為準(zhǔn)，top和bottom沖突，top為準(zhǔn)。2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)177.3 元素的定位2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)187.3.5 固定定位fixed7.3 元素的定位固定定位是絕對(duì)定位的一種特殊形式，它以瀏覽器窗口作為參照物來(lái)定義網(wǎng)頁(yè)元素。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位。

10、當(dāng)對(duì)元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來(lái)定義自己的顯示位置。不管瀏覽器滾動(dòng)條如何滾動(dòng)，也不管瀏覽器窗口的大小如何變化，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置。注意:IE6瀏覽器不支持固定定位2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)197.3 元素的定位7.3.6 z-index層疊等級(jí)屬性當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊。在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對(duì)定位元素應(yīng)用z-index層疊等級(jí)屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)207.4 階段案例具體效果如下所示：為了使初學(xué)者更好地運(yùn)用浮動(dòng)與定位組織頁(yè)面，本小節(jié)將通過(guò)案例的形式分步驟制作傳智播客設(shè)計(jì)學(xué)院首頁(yè)banner。2022/7/19計(jì)算機(jī)學(xué)院 web基礎(chǔ)21本