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

項目3

制作電商主播排行榜頁面·盒模型

·盒模型的box-sizing屬性

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

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

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

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

垂直半徑長度//左上角border-top-right-radius:水平半徑長度

垂直半徑長度//右上角border-bottom-right-radius:水平半徑長度

垂直半徑長度//右下角border-bottom-left-radius:水平半徑長度

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

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

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

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

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

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