項(xiàng)目5利用盒子模型布局網(wǎng)頁(yè)01040203目錄盒子模型基本屬性的應(yīng)用

border屬性的應(yīng)用border-radius屬性的應(yīng)用padding和margin屬性的應(yīng)用05080607目錄box-sizing屬性的應(yīng)用box-shadow屬性的應(yīng)用float屬性的應(yīng)用盒子模型清除浮動(dòng)的應(yīng)用

0910目錄position屬性的應(yīng)用

背景屬性的應(yīng)用1112opacity屬性的應(yīng)用漸變屬性的應(yīng)用1314目錄重復(fù)漸變屬性的應(yīng)用

使用盒子模型布局網(wǎng)頁(yè)項(xiàng)目描述利用前面所學(xué)知識(shí)只能實(shí)現(xiàn)一些簡(jiǎn)單的圖文混排效果，無(wú)法對(duì)整個(gè)網(wǎng)頁(yè)內(nèi)容進(jìn)行整體布局。本項(xiàng)目主要利用盒子模型從布局的角度出發(fā)對(duì)整個(gè)網(wǎng)頁(yè)及各模塊元素進(jìn)行布局，并綜合利用前面所學(xué)的HTML5和CSS3相關(guān)知識(shí)，制作一個(gè)“消防安全知識(shí)教育”網(wǎng)頁(yè)項(xiàng)目效果圖知識(shí)儲(chǔ)備知識(shí)目標(biāo)理解盒子模型相關(guān)屬性的用法和用途理解元素的浮動(dòng)和定位原理及漸變屬性的原理掌握背景屬性的設(shè)置方法010203盒子模型屬性的基本應(yīng)用01任務(wù)描述使用盒子模型常用的基本屬性定義網(wǎng)頁(yè)內(nèi)容，效果如右圖所示。知識(shí)點(diǎn)撥

盒子模型01CSS盒子模型就是在網(wǎng)頁(yè)設(shè)計(jì)中CSS技術(shù)所使用的一種思維模型。其常用的屬性有content（內(nèi)容）、padding（內(nèi)邊距）、border（邊框）、margin（外邊距）、width（寬度）和height（高度），如圖5-2所示。圖5-3中的left（左邊）、right（右邊）、top（頂部）、bottom（底部）常用來(lái)設(shè)置盒子模型相關(guān)屬性不同方向的數(shù)值。知識(shí)點(diǎn)撥

border（邊框）屬性02border屬性的語(yǔ)法格式如下。border:border-widthborder-styleborder-colorborder-width用于設(shè)置邊框?qū)挾?；border-style用于設(shè)置邊框樣式；border-color用于設(shè)置邊框顏色。border-style是border屬性不可或缺的屬性值，具體應(yīng)用在任務(wù)2中進(jìn)行詳細(xì)講解。知識(shí)點(diǎn)撥

padding（內(nèi)邊距）和margin（外邊距）屬性03padding（內(nèi)邊距）和margin（外邊距）屬性一般用來(lái)調(diào)整父級(jí)與子級(jí)元素之間的位置關(guān)系，具體應(yīng)用在任務(wù)4中進(jìn)行詳細(xì)講解。

盒子模型border屬性的應(yīng)用02任務(wù)描述使用盒子模型的border屬性對(duì)網(wǎng)頁(yè)中的文本內(nèi)容進(jìn)行不同邊框樣式的設(shè)置，效果如右圖所示。知識(shí)點(diǎn)撥border-style屬性01知識(shí)點(diǎn)撥綜合設(shè)置邊框02border（邊框）屬性可以一次性設(shè)置盒子模型4條邊框的寬度、樣式和顏色，也可以單獨(dú)設(shè)置某條邊框的寬度、樣式和顏色，如使用border-top、border-right、border-bottom、border-left屬性。在設(shè)置border屬性時(shí)，寬度、樣式、顏色三個(gè)屬性值不分先后順序。該任務(wù)在設(shè)置邊框時(shí)沒(méi)有設(shè)置顏色，所以邊框的顏色就和文本一起應(yīng)用了body{color:red;}這個(gè)樣式。對(duì)圖片也可以設(shè)置邊框，其和對(duì)文本設(shè)置邊框類(lèi)似，這里不做詳細(xì)介紹。盒子模型border-radius屬性的應(yīng)用03任務(wù)描述使用盒子模型的border-radius屬性對(duì)網(wǎng)頁(yè)中的圖片分別進(jìn)行不同樣式的設(shè)置，效果如右圖所示。知識(shí)點(diǎn)撥border-radius屬性用于為元素設(shè)置圓角邊框，基本語(yǔ)法格式如下。border-radius：參數(shù)1/參數(shù)2在上面的語(yǔ)法格式中，參數(shù)1表示圓角的水平半徑，參數(shù)2表示圓角的垂直半徑，兩個(gè)參數(shù)之間用“/”隔開(kāi)（/不是必須的，沒(méi)有時(shí)用空格隔開(kāi)），常用的單位是px，參數(shù)可以是一個(gè)數(shù)值，也可以是一個(gè)百分比。5-3-1.html設(shè)置了水平半徑為100px,垂直半徑為50px的圓角邊框效果。5-3-2.html設(shè)置了橢圓形邊框，之所以是橢圓形邊框，是因?yàn)樵搱D片是長(zhǎng)方形的，如果圖片是正方形（圖片寬度和高度一致）的，則border-radius:50%呈現(xiàn)的效果直接是圓形邊框。border-radius屬性可以接收1～4個(gè)值，規(guī)則如下。四個(gè)值：border-radius:15px50px30px5px;（依次分別表示左上角、右上角、右下角、左下角）；三個(gè)值：border-radius:15px50px30px;（第一個(gè)值表示左上角，第二個(gè)值表示右上角和左下角，第三個(gè)值表示右下角）；兩個(gè)值：border-radius:15px50px;（第一個(gè)值表示左上角和右下角，第二個(gè)值表示右上角和左下角）；一個(gè)值：border-radius:15px;（該值表示四個(gè)角，即圓角半徑都是一樣的）。以上參數(shù)值為舉例所用。border-radius屬性01盒子模型padding和margin屬性的應(yīng)用04任務(wù)描述使用盒子模型的padding和margin屬性對(duì)網(wǎng)頁(yè)中的內(nèi)容進(jìn)行位置布局，效果如右圖所示。知識(shí)點(diǎn)撥margin（外邊距）屬性用于定義元素周?chē)目臻g。其可以單獨(dú)改變?cè)氐纳?、下、左、右邊距，也可以一次性改變所有邊距。在該任?wù)的margin:40pxauto;中40px代表上下外邊距，auto代表左右（水平）外邊距，當(dāng)水平方向外邊距為auto時(shí)，盒子在瀏覽器（頁(yè)面）中呈現(xiàn)水平居中效果，所以一般盒子模型需要設(shè)置水平居中效果時(shí)，就可以將水平外邊距值設(shè)為auto，上下外邊距可以根據(jù)盒子模型內(nèi)容布局的需要進(jìn)行設(shè)置，無(wú)具體要求時(shí)也可直接用margin:0auto;設(shè)置盒子模型水平居中效果。margin屬性值及其描述如表5-2所示。margin（外邊距）屬性01知識(shí)點(diǎn)撥padding（內(nèi)邊距）用于定義元素邊框與元素內(nèi)容之間的距離。當(dāng)元素的內(nèi)邊距被清除時(shí)，所釋放的區(qū)域?qū)?huì)被元素背景顏色填充。單獨(dú)使用padding屬性可以改變上下左右的填充。內(nèi)外邊距圖解如下圖所示。padding（內(nèi)邊距）02另外，在后續(xù)任務(wù)中會(huì)經(jīng)常看到以下代碼，其主要用于在任務(wù)開(kāi)始前清除瀏覽器的內(nèi)外邊距。*{margin:0;padding:0;}知識(shí)點(diǎn)撥div是一個(gè)塊元素，它是一個(gè)雙標(biāo)簽。這意味著它的內(nèi)容將自動(dòng)開(kāi)始一個(gè)新行。開(kāi)發(fā)者通常把它當(dāng)作盒子模型常用的標(biāo)簽，在里面布局圖片、文本等網(wǎng)頁(yè)模塊的內(nèi)容。一個(gè)頁(yè)面中可以由多個(gè)<div>標(biāo)簽組合布局成一個(gè)綜合網(wǎng)頁(yè)。一個(gè)<div>標(biāo)簽可嵌套多個(gè)<div>標(biāo)簽，分別用class或id進(jìn)行定義。<div>標(biāo)簽03盒子模型box-sizing屬性的應(yīng)用05任務(wù)描述使用盒子模型的box-sizing屬性對(duì)網(wǎng)頁(yè)中的不同內(nèi)容進(jìn)行樣式設(shè)置，要求體現(xiàn)出該屬性不同屬性值的對(duì)比效果，效果如右圖所示。知識(shí)點(diǎn)撥box-sizing屬性用于定義元素寬度和高度的計(jì)算方式，即它們是否包含內(nèi)邊距（padding）和邊框（border）。如果不指定box-sizing屬性，在默認(rèn)情況下，元素的寬度和高度是這樣計(jì)算的：

width+padding+border=元素的實(shí)際寬度；

height+padding+border=元素的實(shí)際高度。這意味著：當(dāng)設(shè)置元素的寬度/高度時(shí)，該元素通?？雌饋?lái)比設(shè)置得更大（因?yàn)樵氐倪吙蚝蛢?nèi)邊距已被添加到元素的指定寬度/高度中）。box-sizing屬性解決了這個(gè)問(wèn)題。其常用的屬性值有以下兩個(gè)。

border-box：寬度和高度包括內(nèi)邊距和邊框；

content-box：寬度和高度不包括內(nèi)邊距和邊框。在5-5.html中，兩個(gè)盒子模型的寬度都是200px，高度都是100px，box1的box-sizing屬性取值為content-box，所以實(shí)際寬度會(huì)在原來(lái)200px的基礎(chǔ)上加上padding-right:20px;（右內(nèi)邊距20px)，以及兩側(cè)的邊框?qū)挾龋ǜ?0px），相當(dāng)于box1的寬度=200+20+10+10=240（px），box1的高度=100+10+10=120（px）。而box2的box-sizing屬性取值為border-box,它的寬度已經(jīng)包括了內(nèi)邊距和邊框，所以實(shí)際效果與定義的寬度200px和高度100px是一致的。在實(shí)際應(yīng)用中，border-box是最常用的。box-sizing屬性01盒子模型box-shadow屬性的應(yīng)用06任務(wù)描述使用盒子模型的box-shadow屬性對(duì)網(wǎng)頁(yè)中的圖片進(jìn)行陰影樣式設(shè)置，效果如右圖所示。知識(shí)點(diǎn)撥box-shadow屬性01box-shadow屬性用于為盒子模型添加一個(gè)或多個(gè)陰影效果，基本語(yǔ)法格式如下。box-shadow:水平陰影

垂直陰影

陰影模糊半徑

擴(kuò)展半徑

陰影顏色

陰影類(lèi)型在上面的語(yǔ)法格式中，水平陰影和垂直陰影是必選屬性值，其他屬性值都是可選的，陰影類(lèi)型默認(rèn)是外陰影。在該任務(wù)中應(yīng)用的是內(nèi)陰影，因?yàn)樵O(shè)置了內(nèi)邊距，所以?xún)?nèi)陰影效果比較明顯。如果要設(shè)置多重陰影，則可以在當(dāng)前陰影設(shè)置后加逗號(hào)，繼續(xù)重復(fù)設(shè)置陰影效果，格式和上一個(gè)陰影的是完全一樣的。盒子模型float屬性的應(yīng)用07任務(wù)描述利用前面學(xué)過(guò)的盒子模型相關(guān)知識(shí)，并結(jié)合float屬性，將3個(gè)小盒子并排整齊顯示，效果如右圖所示。知識(shí)點(diǎn)撥

float屬性01盒子模型清除浮動(dòng)的應(yīng)用08任務(wù)描述在任務(wù)7的基礎(chǔ)上添加一個(gè)父元素盒子模型，結(jié)合盒子模型的幾種清除浮動(dòng)的方式清除浮動(dòng)，將3個(gè)小盒子容納在父元素的盒子模型中，效果如右圖所示。知識(shí)點(diǎn)撥空標(biāo)簽01空標(biāo)簽是指在HTML中只有標(biāo)簽，沒(méi)有任何內(nèi)容的元素。這種標(biāo)簽通常用于指示某種操作或?qū)傩缘拇嬖凇lear屬性02對(duì)元素設(shè)置浮動(dòng)效果之后，會(huì)對(duì)周?chē)脑卦斐梢欢ǖ挠绊?，為了消除這種影響，可以使用clear屬性清除浮動(dòng)，clear屬性值及其描述如下表所示。屬性值描述left左側(cè)不允許有浮動(dòng)元素right右側(cè)不允許有浮動(dòng)元素both左右兩側(cè)均不允許有浮動(dòng)元素none默認(rèn)值，允許浮動(dòng)元素出現(xiàn)在左右兩側(cè)inherit從父元素繼承clear屬性值知識(shí)點(diǎn)撥clear屬性02在該任務(wù)中，如果不清除浮動(dòng)，則網(wǎng)頁(yè)呈現(xiàn)的效果如下圖所示。圖5-13呈現(xiàn)的效果并不是我們想要的。因?yàn)楦?dòng)會(huì)對(duì)周?chē)禺a(chǎn)生一定的影響，所以在該任務(wù)中分別使用了3種不同的方法來(lái)清除浮動(dòng)：5-8-1.html使用了空標(biāo)簽清除浮動(dòng)，5-8-2.html使用了overflow屬性清除浮動(dòng)，5-8-3.html使用了after偽對(duì)象清除浮動(dòng)（相當(dāng)于在父元素后面加入空的內(nèi)容）。這3種方法都能實(shí)現(xiàn)我們想要的效果，讀者可以使用比較熟悉且擅長(zhǎng)的方法，編者推薦使用第2種方法，其使用的代碼少，更簡(jiǎn)潔、直觀(guān)。知識(shí)點(diǎn)撥overflow屬性03overflow屬性用于規(guī)范盒子內(nèi)容溢出的顯示方式，可取的屬性值有4個(gè)：visible、hidden、auto和scroll。

visible為默認(rèn)值，表示顯示超出內(nèi)容；

hidden表示隱藏超出內(nèi)容；

auto表示自動(dòng)，即內(nèi)容超出后會(huì)顯示滾動(dòng)條，不超出就不顯示滾動(dòng)條；

scroll表示內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條，以便用戶(hù)查看其余內(nèi)容。盒子模型position屬性的應(yīng)用09任務(wù)描述利用前面學(xué)過(guò)的盒子模型相關(guān)知識(shí)，并結(jié)合元素的position屬性，分別體現(xiàn)出相對(duì)定位和絕對(duì)定位的不同設(shè)置方式及效果，效果如右圖所示。知識(shí)點(diǎn)撥position屬性01盒子模型background-image和background屬性的應(yīng)用10任務(wù)描述利用盒子模型background-image和background屬性，結(jié)合前面學(xué)過(guò)的盒子模型相關(guān)知識(shí)，對(duì)網(wǎng)頁(yè)和盒子模型中的內(nèi)容分別進(jìn)行背景顏色和背景圖像的設(shè)置，效果如右圖所示。知識(shí)點(diǎn)撥設(shè)置背景圖像01

background-image是設(shè)置背景圖像的屬性，一起配合使用的屬性有background-repeat、background-position，以及CSS3新增的background-size、background-attachment、background-origin、background-clip。

background-image：設(shè)置合適的背景圖像。

background-repeat：有方向地重復(fù)填充背景圖像，主要用法如下。background-repeat:repeat;：默認(rèn)值，背景圖像在垂直方向和水平方向重復(fù)。background-repeat:no-repeat;：背景圖像不重復(fù)。background-repeat:repeat-x;：背景圖像橫向重復(fù)。background-repeat:repeat-y;：背景圖像縱向重復(fù)。

background-position：定位背景圖像。定位背景圖像的方法有3種：百分?jǐn)?shù)（“50%50%”代表中心位置）、像素值（“10px20px”代表左上角向右偏移10px、向下偏移20px）和直接指定位置（center、top、bottom、left、right）。

background-size：設(shè)置背景圖像大小。它有1～2個(gè)屬性值，代表背景圖像的width（寬度）和height（高度），單位可以用px、%，如果只設(shè)一個(gè)值，則另一個(gè)值默認(rèn)為auto；屬性值還可以是cover和contain，分別代表將背景圖像覆蓋背景區(qū)域（背景圖像某些部分可能無(wú)法顯示在背景區(qū)域中）和背景圖像完全顯示在背景區(qū)域中（按照?qǐng)D像某一邊擴(kuò)展至最大尺寸）。

background-attachment：設(shè)置背景圖像是否滾動(dòng)。常用的屬性值有：scroll（默認(rèn)值，圖像隨頁(yè)面一起滾動(dòng)），fixed（圖像固定在屏幕上，不隨頁(yè)面滾動(dòng)）。

background-origin：設(shè)置背景圖像的顯示區(qū)域，主要用法如下。background-origin:padding-box;：背景圖像相對(duì)于內(nèi)邊距區(qū)域來(lái)定位。background-origin:border-box;：背景圖像相對(duì)于邊框區(qū)域來(lái)定位。background-origin:content-box;：背景圖像相對(duì)于內(nèi)容區(qū)域來(lái)定位。

background-clip：設(shè)置背景圖像的裁剪區(qū)域，主要用法如下。background-clip:border-box;：默認(rèn)值，從邊框區(qū)域向外裁剪背景圖像。background-clip:padding-box;：從內(nèi)邊距區(qū)域向外裁剪背景圖像。background-clip:content-box;：從內(nèi)容區(qū)域向外裁剪背景圖像。知識(shí)點(diǎn)撥設(shè)置背景顏色02在前面的案例中就使用過(guò)背景顏色屬性background,常用于設(shè)置元素背景顏色的屬性是background-color,兩者的區(qū)別如下。background是背景縮寫(xiě)屬性，可以在一個(gè)聲明中代替所有的背景屬性。例如，可以將該任務(wù)中的背景圖像代碼組合為：

background：url(images/lunyu.jpg)no-repeat;background-color屬性只是用于設(shè)置一個(gè)元素的背景顏色。盒子模型opacity屬性的應(yīng)用11任務(wù)描述使用opacity屬性，分別對(duì)網(wǎng)頁(yè)中的4張圖像設(shè)置透明度，效果如右圖所示。知識(shí)點(diǎn)撥opacity屬性01

在CSS3中，opacity屬性用于設(shè)置圖像透明度。它能使任何元素呈現(xiàn)出透明效果，語(yǔ)法格式如下。opacity:opacityValue;在上面的語(yǔ)法格式中，opacityValue表示不透明度的值，它是一個(gè)介于0～1之間的浮點(diǎn)值。其中，0表示完全透明，1表示完全不透明，0.5表示半透明。在該任務(wù)中，4張圖像的透明度依次增加，opacityValue的值越小，表示透明度越高。知識(shí)點(diǎn)撥RGBA模式02RGBA是CSS3新增的顏色模式。它是RGB顏色模式的延伸，在紅、綠、藍(lán)3種顏色的基礎(chǔ)上添加了不透明度參數(shù)，語(yǔ)法格式如下。rgba(r,g,b,alpha);在上面的語(yǔ)法格式中，前3個(gè)參數(shù)分別代表紅、綠、藍(lán)的參數(shù)值，alpha參數(shù)是一個(gè)介于0～1之間的數(shù)字，0表示完全透明，1表示完全不透明，數(shù)值越小，透明度越高。例如，使用RGBA模式為p元素指定透明度為0.8、顏色為綠色的背景，代碼如下。p{background-color:rgba(0,255,0,0.8);}漸變屬性的應(yīng)用12任務(wù)描述使用網(wǎng)頁(yè)的漸變屬性，并結(jié)合前面學(xué)過(guò)的盒子模型相關(guān)知識(shí)，分別對(duì)網(wǎng)頁(yè)中的3個(gè)盒子模型設(shè)置漸變效果，如右圖所示。知識(shí)點(diǎn)撥線(xiàn)性漸變01漸變屬性是CSS3新增的屬性。線(xiàn)性漸變是指起始顏色沿著一條直線(xiàn)過(guò)渡到結(jié)束顏色，語(yǔ)法格式如下。background-image:linear-gradient(漸變角度,顏色值1,顏色值2,...,顏色值n);在該任務(wù)中，為box1定義了一個(gè)漸變角度為30度，顏色從#06F到#6FF的線(xiàn)性漸變效果。在box2中每個(gè)顏色值后面添加了一個(gè)百分?jǐn)?shù)，用于標(biāo)示顏色漸變的位置，可以看作，顏色#06F在50%的位置開(kāi)始出現(xiàn)漸變至顏色#6FF位于80%的位置結(jié)束漸變。徑向漸變02徑向漸變是指從起點(diǎn)到終點(diǎn)顏色由內(nèi)到外進(jìn)行圓形漸變（從中間向外拉），語(yǔ)法格式如下。background-image:radial-gradient(漸變形狀

圓心位置,顏色值1,顏色值2,...,顏色值n);重復(fù)漸變屬性的應(yīng)