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

項(xiàng)目5

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

·元素的浮動(dòng)屬性clear

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

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

元素的浮動(dòng)屬性float網(wǎng)頁的布局方式：其實(shí)就是指瀏覽器是如何對(duì)網(wǎng)頁中的元素進(jìn)行排版的。網(wǎng)頁的布局方式有三種：①標(biāo)準(zhǔn)流(文檔流/普通流)排版方式

②浮動(dòng)流排版方式

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

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

元素的浮動(dòng)屬性float標(biāo)準(zhǔn)流(文檔流/普通流)排版方式

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

元素的浮動(dòng)屬性float標(biāo)準(zhǔn)流(文檔流/普通流)排版方式

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

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

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

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

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

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

元素的浮動(dòng)屬性float浮動(dòng)元素的脫標(biāo)什么是浮動(dòng)元素的脫標(biāo)?o脫標(biāo):脫離標(biāo)準(zhǔn)流o當(dāng)某一個(gè)元素浮動(dòng)之后,那么這個(gè)元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣,這個(gè)就是浮動(dòng)元素的脫標(biāo)浮動(dòng)元素脫標(biāo)之后會(huì)有什么影響?o如果前面一個(gè)元素浮動(dòng)了,而后面一個(gè)元素沒有浮動(dòng),那么這個(gè)時(shí)候前面一個(gè)元素就會(huì)蓋住后面一個(gè)元素5.1

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

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

元素的浮動(dòng)屬性float浮動(dòng)元素排序規(guī)則浮動(dòng)元素浮動(dòng)之后的位置,由浮動(dòng)元素浮動(dòng)之前在標(biāo)準(zhǔn)流中的位置來確定。5.1

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

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

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

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

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

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

元素的清除浮動(dòng)屬性clear清除浮動(dòng)清除浮動(dòng)方式四after偽對(duì)象清除浮動(dòng)方式五overflow:hidden5.2

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

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

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

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

元素的位置定位屬性position定位屬性positionfixed（固定定位）設(shè)置固定定位的元素將以body根元素為基準(zhǔn)進(jìn)行定位，脫離標(biāo)準(zhǔn)文檔流，無論瀏覽器窗口大小怎樣變化，該元素始終顯示在瀏覽器窗口的固定位置，通過CSS的4個(gè)邊偏移屬性top、bottom、left、right能夠改變?cè)氐奈恢谩?.3

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

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

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

等。5.4

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