響應式Web開發(fā)項目化教程（HTML5+CSS3） 課件 項目5 制作旅游網(wǎng)站的導航欄和banner版塊

項目5

制作旅游網(wǎng)站的導航欄和banner版塊·元素的浮動屬性float

·元素的浮動屬性clear

·元素的位置定位屬性position·元素的類型轉(zhuǎn)換

學習目標能力知識素質(zhì)理解元素的浮動；掌握元素的定位的方法；掌握清除浮動的方法；掌握元素轉(zhuǎn)換的方法。1能夠為元素設置浮動樣式；能夠使用不同方法清除浮動；能夠為元素設置常見的定位模式2勇于創(chuàng)新、積極探索的職業(yè)精神。3目錄元素的浮動屬性float元素的清除浮動屬性clear元素的位置定位屬性position5.15.25.3元素的類型轉(zhuǎn)換5.45.1

元素的浮動屬性float網(wǎng)頁的布局方式：其實就是指瀏覽器是如何對網(wǎng)頁中的元素進行排版的。網(wǎng)頁的布局方式有三種：①標準流(文檔流/普通流)排版方式

②浮動流排版方式

③定位流排版方式網(wǎng)頁的布局方式5.1

元素的浮動屬性float標準流(文檔流/普通流)排版方式①其實瀏覽器默認的排版方式就是標準流的排版方式②在CSS中將元素分為三類,分別是塊級元素/行內(nèi)元素/行內(nèi)塊級元素③在標準流中有兩種排版方式,一種是垂直排版,一種是水平排版?垂直排版,如果元素是塊級元素,那么就會垂直排版?水平排版,如果元素是行內(nèi)元素/行內(nèi)塊級元素,那么就會水平排版5.1

元素的浮動屬性float標準流(文檔流/普通流)排版方式

div會單獨的占領(lǐng)一行,而span不會單獨占領(lǐng)一行div是一個容器級的標簽,而span是一個文本級的標簽?Div和span標簽div作用:一般用于配合css完成網(wǎng)頁的基本布局span作用:一般用于配合css修改網(wǎng)頁中的一些局部信息?div和span有什么區(qū)別?容器級的標簽中可以嵌套其它所有的標簽，常見容器級的標簽:divhuloldllidtdd...文本級的標簽中只能嵌套文字/圖片/超鏈接，常見文本級的標簽:spanpbuisstrongeminsdel...?容器級的標簽和文本級的標簽的區(qū)別?在HTML中HTML將所有的標簽分為兩類,分別是容器級和文本級在CSS中CSS也將所有的標簽分為兩類,分別是塊級元素和行內(nèi)元素(其實還有一類,行內(nèi)塊級元素)5.1

元素的浮動屬性float標準流(文檔流/普通流)排版方式

·塊級元素會獨占一行·行內(nèi)元素不會獨占一行常見容器級的標簽:divhuloldllidtdd...常見文本級的標簽:spanpbuisstongeminsdel...常見塊級元素:pdivhuloldllidtdd常見行內(nèi)元素:spanbuisstrongeminsdel?什么是塊級元素,什么是行內(nèi)元素?5.1

元素的浮動屬性float標準流(文檔流/普通流)排版方式?塊級元素和行內(nèi)元素的區(qū)別?塊級元素·獨占一行·如果沒有設置寬度,那么默認和父元素一樣寬·如果設置了寬高,那么就按照設置的來顯示行內(nèi)元素·不會獨占一行·如果沒有設置寬度,那么默認和內(nèi)容一樣寬·行內(nèi)元素是不可以設置寬度和高度的?行內(nèi)塊級元素為了能夠讓元素既能夠不獨占一行,又可以設置寬度和高度,那么就出現(xiàn)了行內(nèi)塊級元素，行內(nèi)塊級元素不獨占一行,但可以設置寬高5.1

元素的浮動屬性float浮動流排版方式浮動流是一種"半脫離標準流"的排版方式，浮動流只有一種排版方式,就是水平排版.它只能設置某個元素左對齊或者右對齊注意點:o浮動流中沒有居中對齊,也就是沒有center這個取值o在浮動流中是不可以使用margin:0auto;特點:o在浮動流中是不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素的o無論是塊級元素/行內(nèi)元素/行內(nèi)塊級元素都可以水平排版o在浮動流中無論是塊級元素/行內(nèi)元素/行內(nèi)塊級元素都可以設置寬高綜上所述,浮動流中的元素和標準流中的行內(nèi)塊級元素很像5.1

元素的浮動屬性float定位流排版方式1、靜態(tài)定位（static）表示按照正常定位方案，元素盒按照在文檔流中出現(xiàn)的順序依次格式化；2、相對定位（relative）將移動元素盒，但是它在文檔流中的原始空間會保留下來；3、絕對定位（absolute）是指元素盒徹底從文檔流中脫離出來，并相對于其容器塊進行定位。因為這些元素從文檔流中脫離出來，所以它們不再影響周邊元素的布局，并且它們占據(jù)的空間不被保存；4、固定定位（fixed）與絕對定位類似，元素從文檔流中脫離，但是它們不是相對于容器塊定位，而是相對于視口（viewpoint）定位（大多數(shù)情況下，這個視口就是指瀏覽器窗口）。5.1

元素的浮動屬性float瀏覽器在解析網(wǎng)頁時是按照標準文檔流的順序進行的，即按照body元素下的任意元素的上下關(guān)系進行解析，而float屬性則打破了這一解析規(guī)則，使瀏覽器按照我們的布局要求進行解析。所謂元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，移動到其父元素中指定位置的過程。浮動流排版方式5.1

元素的浮動屬性float浮動流排版方式語法格式選擇器{float:屬性值;}屬性值描述left元素向左浮動right元素向右浮動none元素不浮動（默認值）5.1

元素的浮動屬性float浮動元素的脫標什么是浮動元素的脫標?o脫標:脫離標準流o當某一個元素浮動之后,那么這個元素看上去就像被從標準流中刪除了一樣,這個就是浮動元素的脫標浮動元素脫標之后會有什么影響?o如果前面一個元素浮動了,而后面一個元素沒有浮動,那么這個時候前面一個元素就會蓋住后面一個元素5.1

元素的浮動屬性float浮動元素排序規(guī)則相同方向上的浮動元素,先浮動的元素會顯示在前面,后浮動的元素會顯示在后面。5.1

元素的浮動屬性float浮動元素排序規(guī)則不同方向上的浮動元素,左浮動會找左浮動,右浮動會找右浮動。5.1

元素的浮動屬性float浮動元素排序規(guī)則浮動元素浮動之后的位置,由浮動元素浮動之前在標準流中的位置來確定。5.1

元素的浮動屬性float浮動元素貼靠現(xiàn)象?如果父元素的寬度能夠顯示所有浮動元素,那么浮動的元素會并排顯示。5.1

元素的浮動屬性float浮動元素貼靠現(xiàn)象?如果父元素的寬度不能顯示所有浮動元素,那么會從最后一個元開始往前貼靠。5.1

元素的浮動屬性float浮動元素貼靠現(xiàn)象?如果貼靠了前面所有浮動元素之后都不能顯示,最終會貼靠到父元素的左邊或者右邊。5.1

元素的浮動屬性float浮動元素字圍現(xiàn)象?浮動元素不會擋住沒有浮動元素中的文字,沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現(xiàn)象。應用場景：圖文混排5.2

元素的清除浮動屬性clear由于浮動的元素不再占據(jù)原始文檔流的空間位置，設置了浮動的元素將會影響與它相鄰的那些沒有設置浮動的元素（會使它們的位置發(fā)生變化，產(chǎn)生元素覆蓋的現(xiàn)象），那么如何解決浮動帶來的影響呢？清除浮動清除浮動方式一給前面的父盒子添加高度（在標準流中內(nèi)容的高度可以撐起盒子的高度，在浮動流中浮動元素內(nèi)容的高不可以撐起盒子的高）注意點：在企業(yè)開發(fā)中能不寫高度就不寫高度,所以這種方式不常用清除浮動方式二利用clear屬性清除前面浮動元素對該元素的影響。注意點：當我們給某個元素添加clear屬性之后,這個元素的margin屬性就會失效5.2

元素的清除浮動屬性clear清除浮動清除浮動方式三隔墻法：外墻法/內(nèi)墻法外墻法:1.在兩個盒子之間添加一個額外的塊級元素2.給這個額外添加的盒子添加clear屬性注意點:外墻法可以讓第二個盒子使用margin-top屬性外墻法不可以讓第一個盒子使用margin-bottom屬性內(nèi)墻法:1.在第一個盒子中所有子元素最后添加一個額外的塊級元素2.給這個額外添加的塊級元素添加clear屬性注意點:內(nèi)墻法可以讓第二個盒子使用margin-top屬性內(nèi)墻法可以讓第一個盒子使用margin-bottom屬性外墻法和內(nèi)墻法區(qū)別?外墻法不能撐起第一個盒子額高度,而內(nèi)墻法可以撐起第一個盒子的高度5.2

元素的清除浮動屬性clear清除浮動清除浮動方式四after偽對象清除浮動方式五overflow:hidden5.2

元素的清除浮動屬性clearclear屬性清除浮動語法格式選擇器{clear:屬性值;}屬性值描述left不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響）right不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響）both同時清除左右兩側(cè)浮動的影響常用屬性值5.3

元素的位置定位屬性position與浮動相比，位置定位的布局方式更加準確、易控制，位置定位position是CSS的一個屬性，常用的屬性值有4個，分別是static（靜態(tài)定位）、relative（相對定位）、absolute（絕對定位）、fixed（固定定位）。定位屬性positionstatic（靜態(tài)定位）靜態(tài)定位是各元素在HTML文檔流中默認的位置，也就是說即使元素沒有設置position:static;，元素在文檔流中也會有默認位置。語法格式選擇器{position:屬性值；}5.3

元素的位置定位屬性position定位屬性positionrelative（相對定位）設置相對定位的元素以其原始位置為基準進行定位（將元素相對于它在標準文檔流中的位置進行定位），通過CSS的4個邊偏移屬性top（上側(cè)偏移量）、bottom（下側(cè)偏移量）、left（左側(cè)偏移量）、right（右側(cè)偏移量）能夠改變該元素的位置，但該元素仍然保留其在原始文檔流的位置。定位前定位后在文檔流中的位置仍然保留著5.3

元素的位置定位屬性position定位屬性positionabsolute（絕對定位）設置絕對定位的元素將以離它最近的父元素為基準進行定位，脫離標準文檔流，但前提是其父元素已經(jīng)設置了相對、絕對或固定定位，如果所有的父元素都沒有設置定位，則以根元素body為基準進行定位，通過CSS的4個邊偏移屬性top、bottom、left、right能夠改變元素的位置。定位前定位后在文檔流中的位置沒有被保留5.3

元素的位置定位屬性position定位屬性positionfixed（固定定位）設置固定定位的元素將以body根元素為基準進行定位，脫離標準文檔流，無論瀏覽器窗口大小怎樣變化，該元素始終顯示在瀏覽器窗口的固定位置，通過CSS的4個邊偏移屬性top、bottom、left、right能夠改變元素的位置。5.3

元素的位置定位屬性position定位屬性positionz-index（堆疊順序?qū)傩裕┚W(wǎng)頁中如果有多個元素設置了定位，那么這些定位元素將會出現(xiàn)重疊的效果，就需要通過設置這些定位元素的z-index屬性來指定哪個定位元素在上，哪個定位元素在下，z-index屬性的屬性值可以設置為負整數(shù)、0和正整數(shù)（默認值為0），取值越大，定位元素就越居上。實踐應用：我們通常利用絕對定位制作二級或三級導航欄、制作banner版塊上的漂浮文字或圖片部分，利用固定定位制作網(wǎng)頁的漂浮廣告。5.4

元素的類型轉(zhuǎn)換HTML元素分為兩種：塊元素（block）和行內(nèi)元素（inline）。元素的類型轉(zhuǎn)換①總是獨占一行；②能夠設置其寬度、高度、padding、margin和border屬性；③常見的塊元素有div、p、h1～h6、ul、li、form

等。塊元素行內(nèi)元素①不能獨占一行，要與其他元素在同一行顯示；②大多數(shù)行內(nèi)元素的寬度、高度、上/下margin不能設置，元素的高度由自身的字體大小和圖像尺寸；③常見的行內(nèi)元素有span、a、input、strong、em、img

等。5.4

元素的類型轉(zhuǎn)換如果塊元素需要具有行內(nèi)元素的特性，或者行內(nèi)