第5章CSS盒子模型PPT課件

1、第5章 CSS盒子模型HTML5+CSS3網(wǎng)站設(shè)計基礎(chǔ)教程（第2版）學習目標/Target掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果。掌握背景屬性的設(shè)置方法，能夠設(shè)置背景顏色和圖像。理解漸變屬性的原理，能夠設(shè)置漸變背景。熟悉CSS控制列表樣式的方式，能夠運用背景圖像定義列表項目符號。章節(jié)概述/ Summary盒子模型是網(wǎng)頁布局的基礎(chǔ)，只有掌握了盒子模型的各種規(guī)律和特征，才可以更好地控制網(wǎng)頁中各個元素所呈現(xiàn)的效果。接下來，本章將對盒子模型的概念、盒子相關(guān)屬性進行詳細講解。目錄/Contents01盒子模型概述02盒子模型相關(guān)屬性03背景屬性04漸變屬性05階段案例制作音樂排行榜盒子模型概述5

2、.1 盒子模型概述了解盒子模型，能夠說出盒子模型的概念和盒子模型中包含的內(nèi)容。學習目標1.認識盒子模型5.1 盒子模型概述1.認識盒子模型什么是盒子模型？5.1 盒子模型概述1.認識盒子模型聯(lián)想一下生活中常見的盒子？它們的共同特點它們的共同特點5.1 盒子模型概述1.認識盒子模型以手機盒子為例，分析盒子模型5.1 盒子模型概述1.認識盒子模型當多個手機盒子放在一起時，它們之間的距離就是CSS盒子模型的外邊距5.1 盒子模型概述1.認識盒子模型所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內(nèi)容的容器。每個矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border

3、）和外邊距（margin）組成。5.1 盒子模型概述l 了解div標記，能夠說出標記的概念。l 熟悉div標記的用法，能夠?qū)⒕W(wǎng)頁分成多個模塊。學習目標2.div標記5.1 盒子模型概述2.div標記1標記是一個塊容器標記。2可以將網(wǎng)頁分割為獨立的部分，以實現(xiàn)網(wǎng)頁的規(guī)劃和布局。3大多數(shù)HTML標記都可以嵌套在標記中，中還可以嵌套多層。4可以替代大多數(shù)的塊級文本標記。5.1 盒子模型概述2.div標記注意：1、標記最大的意義在于和浮動屬性float配合，實現(xiàn)網(wǎng)頁的布局，這就是常說的DIV+CSS網(wǎng)頁布局。對于浮動和布局這里了解即可，后面的章節(jié)將會詳細介紹。2、可以替代塊級元素如、等，但是它們在語義

4、上有一定的區(qū)別。例如和的不同在于具有特殊的含義，語義較重，代表著標題，而是一個通用的塊級元素，主要用于布局。5.1 盒子模型概述掌握盒子的寬高屬性，能夠?qū)凶拥拇笮∵M行控制。學習目標3.盒子的寬與高5.1 盒子模型概述3.盒子的寬與高網(wǎng)頁是由多個盒子排列而成的，每個盒子都有固定的大小，在CSS中使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。width和height的屬性值可以為不同單位的數(shù)值或相對于父元素的百分比，實際工作中最常用的是像素值。高度寬度5.1 盒子模型概述3.盒子的寬與高結(jié)論 盒子的總寬度= width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?左右外邊距之和 盒

5、子的總高度= height+上下內(nèi)邊距之和+上下邊框?qū)挾戎?上下外邊距之和盒子模型的總寬度與總高度注意：寬度屬性width和高度屬性height僅適用于塊級元素，對行內(nèi)元素無效（標記和除外）。盒子模型相關(guān)屬性5.2 盒子模型相關(guān)屬性理解了盒子模型的結(jié)構(gòu)后，要想自如地控制頁面中每個盒子的樣式，還需要掌握盒子模型的相關(guān)屬性，本節(jié)將對這些屬性進行詳細講解。5.2 盒子模型相關(guān)屬性l 了解CSS常用的邊框?qū)傩?。，能夠列舉出常用的邊框?qū)傩约捌涑Ｓ脤傩灾?。l 掌握各個邊框?qū)傩缘挠梅?，能夠為元素設(shè)置邊框想，例如邊框?qū)挾?、邊框顏色等。學習目標1.邊框?qū)傩?.2 盒子模型相關(guān)屬性1.邊框?qū)傩詾榱朔指铐撁嬷胁煌?/p>

6、的盒子，常常需要給元素設(shè)置邊框效果。設(shè)置內(nèi)容樣式屬性常用屬性值邊框樣式border-style:上邊 右邊 下邊 左邊;none無（默認）、solid單實線、dashed虛線、dotted點線、double雙實線邊框?qū)挾萣order-width:上邊 右邊 下邊 左邊;像素值邊框顏色border-color:上邊 右邊 下邊 左邊;顏色值、#十六進制、rgb(r,g,b)、rgb(r%,g%,b%)綜合設(shè)置邊框border:四邊寬度 四邊樣式 四邊顏色; 圓角邊框border-radius:水平半徑參數(shù)/垂直半徑參數(shù);像素值或百分比圖片邊框border-images:圖片路徑 裁切方式/邊框?qū)?/p>

7、度/邊框擴展距離 重復方式; 5.2 盒子模型相關(guān)屬性1.邊框?qū)傩詎one：沒有邊框solid：邊框為單實線dashed：邊框為虛線dotted：邊框為點線double：邊框為雙實線邊框樣式（border-style）屬性值border-style綜合屬性 border-style:solid ; /*四邊均為實線*/ border-style:solid dotted ; /*上下實線、左右點線*/border-style:solid dotted dashed; /*上實線、左右點線、下虛線*/5.2 盒子模型相關(guān)屬性1.邊框?qū)傩赃吙驅(qū)挾龋╞order-width）屬性值在設(shè)置邊框?qū)挾葧r，

8、必須同時設(shè)置邊框樣式，如果未設(shè)置樣式或設(shè)置為none，則不論寬度設(shè)置為多少都無效。注意：常用取值單位為像素。border-width:5px; /*四邊寬度均為5像素*/border-width:5px 3px ; /*上下邊框5像素寬度、左右邊框3像素寬度*/border-width:5px 3px 4px; /*上邊框5像素寬、左右邊框3像素寬度、下邊框4像素寬度*/border-width綜合屬性5.2 盒子模型相關(guān)屬性1.邊框?qū)傩赃吙蝾伾╞order-color）屬性值顏色值，例：red、green#十六進制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r

9、%,g%,b%)border-color:#f00; /*四邊均為紅色*/border-color:#f00 #00f ; /*上下紅色、左右藍色*/border-color:#f00 #00f #0f0; /*上紅色、左右藍色、下綠色*/border-color綜合屬性5.2 盒子模型相關(guān)屬性1.邊框?qū)傩赃吙蝾伾╞order-color）屬性值顏色值，例：red、green#十六進制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r%,g%,b%)CSS3在原邊框顏色屬性（border-color）的基礎(chǔ)上派生了4個邊框顏色屬性。border-top-colors

10、border-right-colorsborder-bottom-colorsborder-left-5.2 盒子模型相關(guān)屬性1.邊框?qū)傩赃吙蝾伾╞order-color）屬性值pborder-style:solid;border-width:10px;-moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;-moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;-moz-border-bottom-colors:#a0a #909 #808 #70

11、7 #606 #505 #404 #303;-moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;例如：對段落文本添加漸變邊框效果，示例代碼如下：5.2 盒子模型相關(guān)屬性1.邊框?qū)傩赃吙蚓C合屬性（border） border-top:上邊框?qū)挾?樣式 顏色; border-right:右邊框?qū)挾?樣式 顏色; border-bottom:下邊框?qū)挾?樣式 顏色; border-left:左邊框?qū)挾?樣式 顏色; border:四邊寬度 樣式 顏色;例如：border:寬度,樣式,顏色寬度、樣式、顏色順序任意，不分先后5.

12、2 盒子模型相關(guān)屬性1.邊框?qū)傩詧A角邊框（border-radius） border-radius:參數(shù)1/參數(shù)2border-radius屬性同樣遵循值復制的原則，其水平半徑（參數(shù)1）和垂直半徑（參數(shù)2）均可以設(shè)置1-4個參數(shù)值，用來表示四角圓角半徑的大小。5.2 盒子模型相關(guān)屬性1.邊框?qū)傩詧D片邊框（border-image）border-image:border-image-source border-image-slice/ border-image-width/ border-image-outset border-image-repeat;屬性說明border-image-sour

13、ce指定圖片的路徑border-image-slice指定邊框圖像頂部、右側(cè)、底部、左側(cè)內(nèi)偏移量。border-image-width指定邊框?qū)挾萣order-image-outset指定邊框背景向盒子外部延伸的距離。border-image-repeat指定背景圖片的平鋪方式5.2 盒子模型相關(guān)屬性掌握各個邊距屬性的用法，能夠為元素設(shè)置內(nèi)邊距和外邊距。學習目標2.邊距屬性5.2 盒子模型相關(guān)屬性2.邊距屬性CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種。內(nèi)邊距padding-top:上邊距;padding-right:右邊距;padding-bottom:下邊距;padding-left:左

14、邊距;padding：四邊內(nèi)邊距;注意：內(nèi)邊距padding不允許使用負值。padding:5px /*四個方向內(nèi)邊距為5像素寬度*/padding:5px 3px /*上下內(nèi)邊距為5像素，左右內(nèi)邊距為3像素*/padding:5px 3px 4px /*上內(nèi)邊距為5像素，左右內(nèi)邊距為3像素，下內(nèi)邊距為4像素*/5.2 盒子模型相關(guān)屬性2.邊距屬性CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種。外邊距margin-top:上外邊距;margin-right:右外邊距;margin-bottom:下外邊距;margin-left:左外邊距;margin:上外邊距 右外邊距 下外邊距 左外邊距;

15、margin:5px /*四邊外邊距為5像素寬度*/margin:5px 3px /*上下外邊距為5像素，左右外邊距為3像素*/margin:5px 3px 4px /*外邊距：上為5像素，左右為3像素，下為4像素*/注意：和內(nèi)邊距不同，外邊距margin允許使用負值5.2 盒子模型相關(guān)屬性2.邊距屬性CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種。外邊距當對塊級元素應用寬度屬性width，并將左右的外邊距都設(shè)置為auto，可使塊級元素水平居中，實際工作中常用這種方式進行網(wǎng)頁布局。margin:0 auto /* 利用margin實現(xiàn)塊元素水平居中*/margin:5px auto /* 利用

16、margin實現(xiàn)塊元素水平居中，并且上下拉開5像素邊距*/5.2 盒子模型相關(guān)屬性2.邊距屬性CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種。外邊距為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時，通常先清除元素的默認內(nèi)外邊距。*padding:0; /*清除內(nèi)邊距*/margin:0; /*清除外邊距*/內(nèi)外邊距清除5.2 盒子模型相關(guān)屬性掌握box-shadow屬性的用法，能夠為盒子添加陰影效果。學習目標3. box-shadow屬性5.2 盒子模型相關(guān)屬性3. box-shadow屬性CSS3中的box-shadow屬性可以輕松實現(xiàn)陰影的添加。box-shadow:像素值1 像素值2 像素值3

17、像素值4 顏色值 陰影類型;參數(shù)值說明像素值1表示元素水平陰影位置，可以為負值（必選屬性）。像素值2表示元素垂直陰影位置，可以為負值（必選屬性）。像素值3陰影模糊半徑（可選屬性）。像素值4陰影擴展半徑，不能為負值（可選屬性）。顏色值陰影顏色（可選屬性）。陰影類型內(nèi)陰影（inset）/外陰影（默認）（可選屬性）。5.2 盒子模型相關(guān)屬性3. box-shadow屬性CSS3中的box-shadow屬性可以輕松實現(xiàn)陰影的添加。box-shadow:像素值1 像素值2 像素值3 像素值4 顏色值 陰影類型;例如： box-shadow:5px 5px 10px 2px #999 inset,-5px

18、 -5px 10px 2px #333 inset;5.2 盒子模型相關(guān)屬性掌握box-sizing屬性的用法，能夠?qū)懗鯾ox-sizing屬性的語法格式。學習目標4. box-sizing屬性5.2 盒子模型相關(guān)屬性3. box-shadow屬性box-sizing屬性用于定義盒子的寬度值和高度值是否包含元素的內(nèi)邊距和邊框box-sizing: content-box/border-box; content-box：瀏覽器對盒模型的解釋遵從W3C 標準，當定義width和height時，它的參數(shù)值不包括border和padding。 border-box：當定義width和height時，b

19、order和padding的參數(shù)值被包含在width和height之內(nèi)。背景屬性5.3 背景屬性網(wǎng)頁能通過背景圖像給讀者留下更深刻的印象，如節(jié)日題材的網(wǎng)站一般采用喜慶祥和的圖片來突出效果，所以在網(wǎng)頁設(shè)計中，合理控制背景顏色和背景圖像至關(guān)重要。接下來本節(jié)將詳細介紹CSS控制背景樣式的方法。5.3 背景屬性l 掌握設(shè)置背景顏色的方法，能夠使用background-color屬性設(shè)置元素的背景顏色。l 掌握設(shè)置背景圖像的方法，能夠通過background-image屬性設(shè)置元素的背景圖像。學習目標5.3 背景屬性1.設(shè)置背景顏色在CSS中，網(wǎng)頁元素的背景顏色使用background-color屬性來

20、設(shè)置。background-color:背景顏色屬性顏色值，例：red、yellow#十六進制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)5.3 背景屬性2.設(shè)置背景圖像在CSS中，還可以將圖像作為網(wǎng)頁元素的背景，通過background-image屬性實現(xiàn)。background-image:背景圖像屬性例如：bodybackground-color:#CCC; background-image:url(images/jianbian.jpg); 5.3 背景屬性掌握設(shè)置背景不透明度的方法，在網(wǎng)頁中能夠設(shè)置背景的不透明度。學習目標3.背景與圖片不透明度的設(shè)置5.3 背景屬

21、性3.背景與圖片不透明度的設(shè)置通過引入RGBA模式和opacity屬性，可以設(shè)置圖片的不透明度。 RGBA模式rgba(r,g,b,alpha);例如：使用RGBA模式為p元素指定透明度為0.5，顏色為紅色的背景。pbackground-color:rgba(255,0,0,0.5);5.3 背景屬性3.背景與圖片不透明度的設(shè)置通過引入RGBA模式和opacity屬性，可以設(shè)置圖片的不透明度。 opacity屬性opacity：opacityValue;opacity屬性用于定義元素的不透明度，參數(shù)opacityValue表示不透明度的值，它是一個介于01之間的浮點數(shù)值。其中，0表示完全透明，

22、1表示完全不透明，而0.5則表示半透明。5.3 背景屬性l 掌握設(shè)置背景圖像平鋪的方法，能夠通過background-repeat屬性設(shè)置背景圖像的平鋪方式。l 掌握設(shè)置背景圖像位置的方法，能夠通過background-position設(shè)置背景圖像的位置。學習目標5.3 背景屬性4.設(shè)置背景圖像平鋪平鋪屬性值含義repeat沿水平和豎直兩個方向平鋪（默認值）no-repeat不平鋪（圖像位于元素的左上角，只顯示一次）repeat-x只沿水平方向平鋪repeat-y只沿豎直方向平鋪默認情況下，背景圖像會自動向水平和豎直兩個方向平鋪。如果不希望背景圖像平鋪，或者只沿著一個方向平鋪，可以通過back

23、ground-repeat屬性來控制。5.3 背景屬性5.設(shè)置背景圖像位置如果將背景圖像的平鋪屬性background-repeat定義為no-repeat，圖像將默認以元素的左上角為基準點顯示。位置屬性取值含義單位數(shù)值設(shè)置圖像左上角在元素中的坐標，例如background-position:20px 20px;預定義的關(guān)鍵字水平方向值：left、center、right。垂直方向值：top、center、bottom。百分比0% 0% ：圖像左上角與元素的左上角對齊。50% 50%：圖像50% 50%中心點與元素50% 50%的中心點對齊。20% 30%：圖像20% 30%的點與元素20%

24、30%的點對齊。100% 100%：圖像右下角與元素的右下角對齊，而不是圖像充滿元素。5.3 背景屬性l 掌握設(shè)置背景圖像固定的方法，能夠通過background-attachment屬性設(shè)置背景圖像的固定方式。l 掌握設(shè)置背景圖像大小的方法，能夠通過background-size屬性設(shè)置背景圖像的大小。學習目標5.3 背景屬性6.設(shè)置背景圖像固定如果希望背景圖像固定在屏幕的某一位置，不隨著滾動條移動，可以使用background-attachment屬性來設(shè)置。固定屬性取值含義scroll圖像隨頁面元素一起滾動（默認值）。fixed圖像固定在屏幕上，不隨頁面元素滾動。5.3 背景屬性7.設(shè)置

25、背景圖像大小在CSS3中，background-size屬性用于控制背景圖像的大小屬性值說 明像素值設(shè)置背景圖像的高度和寬度。第一個值設(shè)置寬度，第二個值設(shè)置高度。如果只設(shè)置一個值，則第二個值會默認為auto；百分比以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個值設(shè)置寬度，第二個值設(shè)置高度。如果只設(shè)置一個值，則第二個值會默認為auto；cover把背景圖像擴展至足夠大，使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中；contain把圖像擴展至最大尺寸，以使其寬度和高度完全適應內(nèi)容區(qū)域；5.3 背景屬性l 掌握設(shè)置背景圖像顯示區(qū)域的方法，能夠通過background

26、-origin 屬性定義背景圖像的相對位置。l 掌握設(shè)置背景圖像裁剪區(qū)域的方法，能夠通過background-clip屬性定義背景圖像的裁剪區(qū)域。學習目標5.3 背景屬性8.設(shè)置背景的顯示區(qū)域默認情況下，background-position屬性總是以元素左上角為坐標原點定位背景圖像，運用CSS3中的background-origin屬性可以自行定義背景圖像的相對位置。background-origin:屬性值;在上面的語法格式中，background-origin屬性有三種取值，分別表示不同的含義，具體解釋如下。 padding-box：背景圖像相對于內(nèi)邊距區(qū)域來定位。 border-box

27、：背景圖像相對于邊框來定位。 content-box：背景圖像相對于內(nèi)容框來定位。5.3 背景屬性9.設(shè)置背景圖像的裁剪區(qū)域在CSS樣式中，background-clip屬性用于定義背景圖像的裁剪區(qū)域。background-origin:屬性值;在語法格式上，background-clip屬性和background-origin 屬性的取值相似，但含義不同，具體解釋如下。border-box：默認值，從邊框區(qū)域向外裁剪背景。padding-box：從內(nèi)邊距區(qū)域向外裁剪背景。content-box：從內(nèi)容區(qū)域向外裁剪背景。5.3 背景屬性掌握設(shè)置多重背景圖像的方法，能夠通過多個屬性設(shè)置多重背景圖

28、像。學習目標10.設(shè)置多重背景圖像5.3 背景屬性10.設(shè)置多重背景圖像在CSS3中，通過background-image、background-repeat、background-position和background-size等屬性提供多個屬性值可以實現(xiàn)多重背景圖像效果，各屬性值之間用逗號隔開。background-image:url(images/caodi.png),url(images/taiyang.png),url(images/tiankong.png);例如：5.3 背景屬性掌握使用background屬性綜合設(shè)置背景樣式的方法，能夠使用background屬性綜合設(shè)置背景樣

29、式。學習目標11.背景復合屬性5.3 背景屬性11.背景復合屬性CSS中的背景屬性也是一個復合屬性，可以將背景相關(guān)的樣式都綜合定義在一個復合屬性background中。background:background-color background-image background-repeat background-attachment background-position background-size background-clip background-origin;5.3 背景屬性使用背景圖像屬性定義列表樣式list-style是一個復合屬性，用于控制列表項目符號的樣式。在實際網(wǎng)頁制作

30、過程中，為了更高效地控制列表項目符號，通常將list-style的屬性值定義為none，然后通過為設(shè)置背景圖像的方式實現(xiàn)不同的列表項目符號。多學一招:CSS3漸變屬性5.4 CSS3 漸變屬性在CSS3之前如果需要添加漸變效果，通常要設(shè)置背景圖像來實現(xiàn)。而CSS3中增加了漸變屬性，通過漸變屬性可以輕松實現(xiàn)漸變效果。CSS3的漸變屬性主要包括線性漸變和徑向漸變，本節(jié)將對這兩種常見的漸變方式進行講解。5.4 CSS3 漸變屬性掌握實現(xiàn)線性漸變的方法，能夠通過“background-image:linear-gradient（參數(shù)值）;”樣式設(shè)置線性漸變。學習目標1. 線性漸變5.4 CSS3 漸變

31、屬性在線性漸變過程中，起始顏色會沿著一條直線按順序過渡到結(jié)束顏色。運用CSS3中的 “background-image:linear-gradient（參數(shù)值）;”樣式可以實現(xiàn)線性漸變效果。background-image:linear-gradient(漸變角度,顏色值1,顏色值2.,顏色值n);1. 線性漸變linear-gradient用于定義漸變方式為線性漸變，括號內(nèi)用于設(shè)定漸變角度和顏色值。5.4 CSS3 漸變屬性在線性漸變過程中，起始顏色會沿著一條直線按順序過渡到結(jié)束顏色。運用CSS3中的 “background-image:linear-gradient（參數(shù)值）;”樣式可以實

32、現(xiàn)線性漸變效果。1. 線性漸變 漸變角度指水平線和漸變線之間的夾角，可以是以deg為單位的角度數(shù)值或關(guān)鍵詞。漸變角度 顏色值用于設(shè)置漸變顏色，其中“顏色值1”表示起始顏色，“顏色值n”表示結(jié)束顏色，起始顏色和結(jié)束顏色之間可以添加多個顏色值，各顏色值之間用“,”隔開。顏色值5.4 CSS3 漸變屬性掌握實現(xiàn)徑向漸變的方法，能夠通過“background-image:radial-gradient（參數(shù)值）;”樣式設(shè)置徑向漸變。學習目標2. 徑性漸變5.4 CSS3 漸變屬性2. 徑性漸變徑向漸變是網(wǎng)頁中另一種常用的漸變，在徑向漸變過程中，起始顏色會從一個中心點開始，依據(jù)橢圓或圓形形狀進行擴張漸變

33、。運用CSS3中的“background-image:radial-gradient（參數(shù)值）;”樣式可以實現(xiàn)徑向漸變效果。background-image:radial-gradient(漸變形狀 圓心位置,顏色值1,顏色值2.,顏色值n);radial-gradient用于定義漸變的方式為徑向漸變，括號內(nèi)的參數(shù)值用于設(shè)定漸變形狀、圓心位置和顏色值。5.4 CSS3 漸變屬性2. 徑性漸變徑向漸變是網(wǎng)頁中另一種常用的漸變，在徑向漸變過程中，起始顏色會從一個中心點開始，依據(jù)橢圓或圓形形狀進行擴張漸變。運用CSS3中的“background-image:radial-gradient（參數(shù)值）;”樣式可以實現(xiàn)徑向漸變效果。 漸變形狀用來定義徑向漸變的形狀，其取值即可以是定義水平和垂直半徑的像素值或百分比，也可以是相應的關(guān)鍵詞。漸變形狀 圓心位置用于確定元素漸變的中心位置，使用“at”加上關(guān)鍵詞