第七章浮動與定位

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

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

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

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

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

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

7、偏移量，定義元素相對于其父元素上邊線的距離bottom底部偏移量，定義元素相對于其父元素下邊線的距離left左側(cè)偏移量，定義元素相對于其父元素左邊線的距離right右側(cè)偏移量，定義元素相對于其父元素右邊線的距離7.3 元素的定位2022/7/19計算機學院 web基礎(chǔ)147.3.2 靜態(tài)定位static7.3 元素的定位靜態(tài)定位是元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態(tài)位置。 所謂靜態(tài)位置就是各個元素在HTML文檔流中默認的位置。在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。2022/7/19計

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

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

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