響應(yīng)式Web開發(fā)項(xiàng)目化教程（HTML5+CSS3） 課件 項(xiàng)目3 制作電商主播排行榜頁(yè)面

項(xiàng)目3

制作電商主播排行榜頁(yè)面·盒模型

·盒模型的box-sizing屬性

·盒模型的邊框?qū)傩浴ず心Ｐ偷年幱皩傩浴ず心Ｐ偷倪吘鄬傩浴ず心Ｐ偷臐u變屬性·盒模型的背景屬性

學(xué)習(xí)目標(biāo)能力知識(shí)素質(zhì)掌握盒模型的相關(guān)屬性及設(shè)置方法；理解box-sizing的作用1能夠制作多種盒模型效果2勇于創(chuàng)新、積極探索的職業(yè)精神。3目錄初識(shí)盒模型邊框?qū)傩詁ox-sizing屬性邊距屬性陰影屬性漸變屬性背景屬性3.63.13.23.33.43.53.73.1初識(shí)盒模型用途：存放東西生活中的盒子特點(diǎn)：長(zhǎng)、寬、高、厚3.1初識(shí)盒模型在瀏覽器看來(lái)，網(wǎng)頁(yè)就是多個(gè)盒模型互相嵌套排列的結(jié)果。盒模型可以將網(wǎng)頁(yè)分割為獨(dú)立的、不同的部分，以實(shí)現(xiàn)網(wǎng)頁(yè)的布局。3.1初識(shí)盒模型硬盤盒子盒模型分析3.1初識(shí)盒模型內(nèi)容content邊框border內(nèi)邊距padding外邊距margin盒模型四要素3.1初識(shí)盒模型

每個(gè)盒子都有固定的大小3.1初識(shí)盒模型盒子模型的寬度與總高度盒模型的寬=左外邊距+左邊框+左內(nèi)邊+width+右內(nèi)邊距+右邊框+右外邊距盒模型的高=上外邊距+上邊框+上內(nèi)距+height+下內(nèi)邊距+下邊框+下外邊距總寬度與總高度3.1初識(shí)盒模型①<div>是一個(gè)塊級(jí)元素。這意味著它的內(nèi)容自動(dòng)地開始一個(gè)新行?？梢詫⒕W(wǎng)頁(yè)分割為獨(dú)立的部分，以實(shí)現(xiàn)網(wǎng)頁(yè)的規(guī)劃和布局。②大多數(shù)HTML標(biāo)記都可以嵌套在<div>標(biāo)記中，<div>中還可以嵌套多層<div>。③可以替代大多數(shù)的塊級(jí)文本標(biāo)記。div盒模型3.2邊框?qū)傩訡SS邊框?qū)傩园ㄟ吙驅(qū)挾葘傩浴⑦吙驑邮綄傩院瓦吙蝾伾珜傩?。CSS3中還增加了圓角邊框?qū)傩院蛨D片邊框?qū)傩?。border-widthborder-styleborder-colorborder圓角邊框?qū)傩詧D片邊框?qū)傩?.2邊框?qū)傩詁order-width屬性用于指定邊框的寬度。語(yǔ)法格式選擇器{border-width:上右下左;}注意：border-width屬性的常用取值單位為px，屬性值可以為1～4個(gè)，即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下，四個(gè)值為上/右/下/左，必須按照順時(shí)針?lè)较蛟O(shè)置。border-style屬性用于指定邊框的樣式。語(yǔ)法格式選擇器{border-style:上右下左;}注意：border-style屬性的常用屬性值有4個(gè)，分別是solid（邊框?yàn)閱螌?shí)線）、dashed（邊框?yàn)樘摼€）、dotted（邊框?yàn)辄c(diǎn)線）、double（邊框?yàn)殡p線），屬性值可以為1～4個(gè)，即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下，四個(gè)值為上/右/下/左，必須按照順時(shí)針?lè)较蛟O(shè)置。3.2邊框?qū)傩詁order-color屬性用于指定邊框的顏色。語(yǔ)法格式選擇器{border-color:上右下左;}注意：border-color屬性的常用屬性值為預(yù)定義的顏色值、十六進(jìn)制值（常用）或RGB代碼，屬性值可以為1～4個(gè)，即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下，四個(gè)值為上/右/下/左，必須按照順時(shí)針?lè)较蛟O(shè)置。border綜合屬性用于指定邊框的寬度、樣式和顏色。語(yǔ)法格式選擇器{border:寬度樣式顏色;}注意：寬度、樣式和顏色無(wú)先后順序。另外，若想單獨(dú)設(shè)置某一側(cè)的邊框時(shí)，可以使用單側(cè)邊框的綜合屬性border-top（上邊框綜合屬性）、border-right（右邊框綜合屬性）、border-bottom（下邊框綜合屬性）、border-left（左邊框綜合屬性）進(jìn)行設(shè)置。3.2邊框?qū)傩詧A角邊框?qū)傩?/p>

將盒模型設(shè)置成圓角邊框。CSS3的圓角邊框?qū)嶋H上是在矩形的四個(gè)角分別做內(nèi)切圓，然后通過(guò)設(shè)置內(nèi)切圓的半徑來(lái)控制圓角的弧度。3.2邊框?qū)傩哉Z(yǔ)法格式選擇器{border-radius:參數(shù)1/參數(shù)2；}選擇器{border-radius:上（水平）右（水平）下（水平）左（水平）/上（垂直）右（垂直）下（垂直）左（垂直）;}注意：參數(shù)1和參數(shù)2的取值單位均為px或百分比，參數(shù)1表示圓角的水平半徑，參數(shù)2表示圓角的垂直半徑，參數(shù)1與參數(shù)2之間用“/”隔開?；驁A角邊框?qū)傩?.2邊框?qū)傩哉Z(yǔ)法格式border-top-left-radius:水平半徑長(zhǎng)度

垂直半徑長(zhǎng)度//左上角border-top-right-radius:水平半徑長(zhǎng)度

垂直半徑長(zhǎng)度//右上角border-bottom-right-radius:水平半徑長(zhǎng)度

垂直半徑長(zhǎng)度//右下角border-bottom-left-radius:水平半徑長(zhǎng)度

垂直半徑長(zhǎng)度//左下角圓角邊框?qū)傩浴渌麑懛?.2邊框?qū)傩詧D片邊框?qū)傩栽诰W(wǎng)頁(yè)設(shè)計(jì)中，有時(shí)需要將邊框的背景設(shè)置為圖片，CSS3提供的border-image屬性可以實(shí)現(xiàn)這個(gè)效果，border-image屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat等屬性。指定圖片路徑border-image-source指定圖片的裁切方式，4個(gè)屬性值的取值單位可以是px，也可以是百分比，順序?yàn)樯稀⒂?、下、左。例如，可以將一張圖片按照border-image-slice:33%33%33%33%或border-image-slice:33%來(lái)切割。通過(guò)上面的四個(gè)百分比可以把一張圖片切割成9部分，然后把其中外部的8部分按照填充方式填充到邊框上的相應(yīng)位置。如果邊框有一定的寬度，那么四條邊框和與之包含的內(nèi)容的組合也是一個(gè)九宮格。border-image-slice3.2邊框?qū)傩灾付ㄟ吙虻膶挾?，順序?yàn)樯?、右，、下、左。border-image-width指定邊框背景向盒子外部延伸的距離，，如果邊框的寬度小于border-image-outset屬性的值，那么元素與圖片填充之間會(huì)有（border-image-outset屬性的值減去邊框?qū)挾龋┐蟮拈g隙。border-image-outset指定裁切后圖片的填充方式，可選屬性值包括stretch、repeat、round，分別為拉伸、重復(fù)、平鋪，默認(rèn)值為stretch，順序?yàn)樯舷拢笥?。把圖片按照上面裁切的方式裁切之后，每部分的小圖片就要按照對(duì)應(yīng)的邊框區(qū)域填充，在填充時(shí)，圖片的四個(gè)角的圖片不會(huì)改變，其余的圖片會(huì)隨著border-image-repeat屬性設(shè)定的填充方式改變。border-image-repeat3.3邊距屬性外邊距屬性（margin）用于指定盒子的外邊框與其他網(wǎng)頁(yè)元素之間的距離，常用的取值單位為px或百分比。語(yǔ)法格式選擇器{margin:上邊距右邊距下邊距左邊距;}選擇器{margin:上邊距左、右邊距下邊距;}選擇器{margin:上、下邊距

左、右邊距;}選擇器{margin:上、下、左、右邊距;}注意：margin:0pxauto;表示盒子與其他網(wǎng)頁(yè)元素的上、下距離為0px，左、右距離自動(dòng)，即該盒子在其父元素內(nèi)水平左右居中，在實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁(yè)的布局。另外，根據(jù)上、下、左、右四個(gè)方向，可將外邊距細(xì)分為上邊距（margin-top）、下邊距（margin-bottom）、左邊距（margin-left）、右邊距（margin-right）?；?.3邊距屬性外邊距屬性（margin）用于指定盒子的內(nèi)邊框與其內(nèi)容之間的距離，常用的取值單位為px或百分比。語(yǔ)法格式選擇器{padding:上邊距右邊距下邊距左邊距;}選擇器{padding:上邊距左、右邊距

下邊距;}選擇器{padding:上、下邊距

左、右邊距;}選擇器{padding:上、下、左、右邊距;}注意：盒子的內(nèi)邊距與其內(nèi)容之間的上、下距離為0px，左、右距離自動(dòng)，即該盒子內(nèi)容在該盒子內(nèi)水平左右居中，在實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁(yè)的布局。另外，根據(jù)上、下、左、右四個(gè)方向，可將內(nèi)邊距細(xì)分為上邊距（padding-top）、下邊距（padding-bottom）、左邊距（padding-left）、右邊距（padding-right）。或3.4box-sizing屬性box-sizing屬性的作用？例如：做網(wǎng)頁(yè)布局的時(shí)候經(jīng)常遇到一個(gè)問(wèn)題——明明父元素設(shè)置了寬度是300px，3個(gè)子元素左浮動(dòng)設(shè)置寬度分別是150px、100px、50px，都設(shè)置有邊框。為什么第三個(gè)元素被擠下到第二排呢？3.4box-sizing屬性當(dāng)一個(gè)盒子的總寬度確定之后，如果想要給盒子添加邊框或內(nèi)邊距，那么我們只有更改width屬性的屬性值，才能保證盒子的總寬度不變，這樣的操作既煩瑣又易出錯(cuò)，而CSS3中新增的box-sizing屬性，就可以輕松地解決這一問(wèn)題。box-sizing屬性用于定義盒子的width屬性和height屬性的屬性值是否包含元素的內(nèi)邊距和邊框，box-sizing屬性的屬性值有content-box（默認(rèn)值）、border-box和inherit。3.4box-sizing屬性box-sizing屬性用于指定盒子的總寬度是否包含padding和border。語(yǔ)法格式選擇器{box-sizing：content-box|border-box|inherit；}注意：content-box：在寬度和高度之外繪制元素的內(nèi)邊距和邊框，即當(dāng)定義width屬性和height屬性時(shí)，它們的屬性值不包含邊框和內(nèi)邊距的值。border-box：為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制，通過(guò)從已設(shè)定的width屬性和height屬性中分別減去邊框和內(nèi)邊距的值才能得到內(nèi)容的寬度和高度，即當(dāng)定義width屬性和height屬性時(shí)，它們的屬性值已經(jīng)包含邊框和內(nèi)邊距的值。inherit：規(guī)定從父元素繼承box-sizing屬性的屬性值。注意：box-sizing屬性是CSS3的新特性——IE、Opera以及Chrome支持box-sizing屬性；Firefox需要加上-moz前綴；Safari需要加上-webkit前綴。3.5陰影屬性陰影屬性在網(wǎng)頁(yè)設(shè)計(jì)中，有時(shí)需要為盒子設(shè)置陰影效果，CSS3提供了box-shadow屬性用于實(shí)現(xiàn)陰影效果。語(yǔ)法格式選擇器{box-shadow:像素值1像素值2像素值3像素值4顏色值陰影類型;}注意：上述語(yǔ)法中包含6個(gè)屬性值，其中，像素值1為必填項(xiàng)，表示水平陰影位置；像素值2為必填項(xiàng)，表示垂直陰影位置；像素值3為可選項(xiàng)，表示陰影模糊半徑；像素值4為可選項(xiàng)，表示陰影擴(kuò)展半徑；顏色值為可選項(xiàng)，表示陰影顏色；陰影類型為可選項(xiàng)，表示內(nèi)陰影（inset）或外陰影。3.6漸變屬性在網(wǎng)頁(yè)設(shè)計(jì)中，有時(shí)需要添加漸變的效果，在CSS3之前通常都要通過(guò)設(shè)置背景圖像的方法來(lái)實(shí)現(xiàn)，而CSS3提供了漸變屬性，通過(guò)漸變屬性能夠輕松地實(shí)現(xiàn)在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過(guò)渡效果，CSS3的漸變屬性主要包括線性漸變（linear-gradient）和徑向漸變（radial-gradient）。線性漸變linear-gradient徑向漸變r(jià)adial-gradient3.6

漸變屬性線性漸變是指沿著一根軸線改變顏色，從起點(diǎn)到終點(diǎn)顏色按照順序進(jìn)行漸變。語(yǔ)法格式選擇器{background-image:linear-gradient(漸變角度,顏色值1位置1,顏色值2位置2,...,顏色值n位置3);}注意：上述語(yǔ)法格式中的漸變角度可不寫，默認(rèn)值為tobottom（即180%），用來(lái)指定漸變的方向，即水平線與漸變線之間的夾角，可以是具體的角度值，單位為deg，也可以直接指定方位，包括toleft、toright、totop、tobottom。為實(shí)現(xiàn)漸變，還至少需要定義兩個(gè)顏色節(jié)點(diǎn)，每個(gè)顏色節(jié)點(diǎn)可由兩個(gè)參數(shù)組成，其中顏色值為必填項(xiàng)，每個(gè)顏色值后面還可以跟一個(gè)百分比數(shù)值，用于標(biāo)示顏色漸變屬性的位置，這個(gè)百分比數(shù)值為可選項(xiàng)。3.6

漸變屬性徑向漸變是指起始顏色會(huì)從一個(gè)中心點(diǎn)開始，依據(jù)橢圓或圓形進(jìn)行擴(kuò)張漸變。語(yǔ)法格式選擇器{background-image:radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2,...,顏色值n);}注意：上述語(yǔ)法格式中的漸變形狀用來(lái)定義徑向漸變的形狀，其取值可以是水平和垂直半徑的像素值或百分比，還可以是“circle”（圓形的徑向漸變）和“ellipse”（橢圓形的徑向漸變）；圓形位置用于確定元素漸變的中心位置，使用“at”加上關(guān)鍵詞或?qū)傩灾祦?lái)定義徑向漸變的中心位置，該關(guān)鍵詞可以是left（設(shè)置左邊為徑向漸變圓心的橫坐標(biāo)值）、center（設(shè)置中間為徑向漸變圓心的橫坐標(biāo)或縱坐標(biāo)值）、right（設(shè)置右邊為徑向漸變圓心的橫坐標(biāo)值）、top（設(shè)置頂部為徑向漸變圓心的縱坐標(biāo)值）、bottom（設(shè)置底部為徑向漸變圓心的縱坐標(biāo)值），該屬性值可以是像素值或百分比（定義圓心的水平和垂直坐標(biāo)值，可以為負(fù)值）。3.7背景屬性在CSS中可以使用背景屬性創(chuàng)建多種樣式的背景。背景顏色背景圖像背景圖像平鋪背景圖像的位置背景圖像的不透明度背景圖像的固定3.7背景屬性背景顏色設(shè)置元素的背景顏色（純色）。語(yǔ)法格式選擇器{background-color:transparent|color；}注意：背景屬性的顏色值設(shè)定方法可以采用英文單詞、十六進(jìn)制、RGB、HSL、HSLA和GRBA。英文單詞顏色值：background-color：Blue；十六進(jìn)制顏色值：background-color：#FFFFFF；RGB顏色值三元數(shù)字：background-color：rgb(255,255,255)；RGB顏色值三元百分比：background-color：rgb（100%，100%，100%）注意：盡管在大多數(shù)情況下，沒(méi)有必要使用transparent。不過(guò)如果您不希望某元素?fù)碛斜尘吧?，同時(shí)又不希望用戶對(duì)瀏覽器的顏色設(shè)置影響到您的設(shè)計(jì)，那么設(shè)置transparent值還是有必要的。3.7背景屬性背景圖像把圖像放入背景。語(yǔ)法格式選擇器{background-image:none|url（圖像地址）；}注意：背景屬性的顏色值設(shè)定方法可以采用英文單詞、十六進(jìn)制、RGB、HSL、HSLA和GRBA。英文單詞顏色值：background-color：Blue；十六進(jìn)制顏色值：background-color：#FFFFFF；RGB顏色值三元數(shù)字：background-color：rgb(255,255,255)；RGB顏色值三元百分比：background-color：rgb（100%，100%，100%）注意：盡管在大多數(shù)情況下，沒(méi)有必要使用transparent。不過(guò)如果您不希望某元素?fù)碛斜尘吧?，同時(shí)又不希望用戶對(duì)瀏覽器的顏色設(shè)置影響到您的設(shè)計(jì)，那么設(shè)置transparent值還是有必要的。3.7背景屬性rgba模式可以使用CSS3新增加的顏色模式來(lái)設(shè)置背景圖像的不透明度，它是RGB模式的擴(kuò)展，此顏色模式與RGB相同，只是在RGB模式的基礎(chǔ)上新增加了Alpha透明度。語(yǔ)法格式選擇器{background-color:rgba(r,g,b,alpha);}注意：上述語(yǔ)法格式中，前三個(gè)參數(shù)與RGB中的參數(shù)含義相同，alpha參數(shù)為0～1的浮點(diǎn)數(shù)，0表示完全透明，1表示完全不透明。背景圖像的不透明度3.7背景屬性opacity屬性設(shè)置任何元素的透明效果。語(yǔ)法格式選擇器{opacity：0~1浮點(diǎn)數(shù);}注意：opacity屬性的屬性值通常設(shè)置為0～1的浮點(diǎn)數(shù)，其中0表示完全透明，1表示完全不透明，而0.5則表示半透明效果。背景圖像的不透明度3.7背景屬性背景圖像平鋪屬性設(shè)置背景圖像沿著水平或者垂直兩個(gè)方向平鋪。語(yǔ)法格式選擇器{background-repeat：repeat|no-repeat|repeat-x|repeat-y;}3.7背景屬性背景圖像位置屬性如果背景圖像不平鋪，則圖像會(huì)默認(rèn)以元素的左上角為基準(zhǔn)點(diǎn)顯示。如果希望背景圖像顯示在該元素的其他位置，那么就需要設(shè)置background-positon屬性來(lái)實(shí)現(xiàn)。語(yǔ)法格式選擇器{background-positon:水平位置垂直位置;}注意：上述語(yǔ)法格式中水平位置和垂直位置的取值有多種。使用數(shù)值px直接設(shè)置背景圖像左上角在元素中的坐標(biāo)，如background-positon:20px30px;表示背景圖像左上角在元素中的水平距離為20px，垂直距離為30px。使用關(guān)鍵字指定背景圖像在元素中的對(duì)齊方式。水平位置可以使用left、center、right；垂直位置可以使用top、center、bottom，如background-positon:topcenter;表示背景圖像上對(duì)齊、垂直居中。若只有一個(gè)值，則另一個(gè)值默認(rèn)為center。使用百分比按背景