《CSS盒子模型》

1、讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效第第四四章章 CSS盒子模型盒子模型盒子模型相關(guān)盒子模型相關(guān)屬性屬性塊元素與行內(nèi)元素的區(qū)別塊元素與行內(nèi)元素的區(qū)別讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4 4.2 .2【案例8】：用戶中心4 4.1 .1【案例7】：音樂盒4 4.3 .3【案例9】：咖啡店banner目錄目錄4.44.4【案例10】：圖標(biāo)導(dǎo)航欄讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.1 【案例案例7】音樂盒音樂盒音樂可以陶冶情操，為我們帶來(lái)聽覺上的享受，隨著互聯(lián)網(wǎng)的普及，在網(wǎng)絡(luò)上聽音樂變得越來(lái)越方便。本節(jié)將通過(guò)盒子模型及其邊框?qū)傩灾谱?/p>

2、一個(gè)音樂盒，如下圖所示。案例引入案例引入讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.1 【案例案例7】知識(shí)引入知識(shí)引入1 1認(rèn)識(shí)盒子模型認(rèn)識(shí)盒子模型2 2標(biāo)記標(biāo)記3 3邊框?qū)傩赃吙驅(qū)傩灾R(shí)知識(shí)引入引入讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.1 【案例案例7】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解所謂盒子模型就是把HTML頁(yè)面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。1、認(rèn)識(shí)盒子模型認(rèn)識(shí)盒子模型讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.1 【案例案例7】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解div是英文division的縮寫，意為

3、“分割、區(qū)域”。標(biāo)記簡(jiǎn)單而言就是一個(gè)區(qū)塊容器標(biāo)記，可以將網(wǎng)頁(yè)分割為獨(dú)立的、不同的部分，以實(shí)現(xiàn)網(wǎng)頁(yè)的規(guī)劃和布局。與之間相當(dāng)于一個(gè)容器，可以容納段落、標(biāo)題、圖像等各種網(wǎng)頁(yè)元素，也就是說(shuō)大多數(shù)HTML標(biāo)記都可以嵌套在標(biāo)記中，中還可以嵌套多層。標(biāo)記非常強(qiáng)大，通過(guò)與id、class等屬性配合，然后使用CSS設(shè)置樣式，來(lái)替代大多數(shù)的文本標(biāo)記。 2、標(biāo)記標(biāo)記讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.1 【案例案例7】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解3、邊框?qū)傩?、邊框?qū)傩栽O(shè)置內(nèi)容設(shè)置內(nèi)容樣式屬性樣式屬性常用屬性值常用屬性值上邊框上邊框border-top-style:樣式; border-top-width:寬度; bord

4、er-top-color:顏色; border-top:寬度 樣式 顏色; 下邊框下邊框border-bottom-style:樣式; border- bottom-width:寬度; border- bottom-color:顏色; border-bottom:寬度 樣式 顏色; 左邊框左邊框border-left-style:樣式; border-left-width:寬度; border-left-color:顏色; border-left:寬度 樣式 顏色; 右邊框右邊框border-right-style:樣式; border-right-width:寬度; border-right

5、-color:顏色; border-right:寬度 樣式 顏色; 樣式綜合設(shè)置樣式綜合設(shè)置border-style:上邊 右邊 下邊 左邊;none無(wú)（默認(rèn)）、solid單實(shí)線、dashed虛線、dotted點(diǎn)線、double雙實(shí)線寬度綜合設(shè)置寬度綜合設(shè)置border-width:上邊 右邊 下邊 左邊;像素值顏色綜合設(shè)置顏色綜合設(shè)置border-color:上邊 右邊 下邊 左邊;顏色值、#十六進(jìn)制、rgb(r,g,b)、rgb(r%,g%,b%)邊框綜合設(shè)置邊框綜合設(shè)置border:四邊寬度 四邊樣式 四邊顏色; 讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.1 【案例案例7】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講

6、解（1）設(shè)置邊框樣式（）設(shè)置邊框樣式（border-style）邊框樣式用于定義頁(yè)面中邊框的風(fēng)格，常用屬性值如下：none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）solid：邊框?yàn)閱螌?shí)線dashed：邊框?yàn)樘摼€dotted：邊框?yàn)辄c(diǎn)線double：邊框?yàn)殡p實(shí)線3、邊框?qū)傩?、邊框?qū)傩宰孖T教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.1 【案例案例7】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解（1）設(shè)置邊框樣式（）設(shè)置邊框樣式（border-style）在設(shè)置邊框樣式時(shí)，既可以對(duì)盒子的單邊進(jìn)行設(shè)置，也可以綜合設(shè)置四條邊的樣式，具體如下：border-top-style:上邊框樣式;border-right-style:右邊框樣式;

7、border-bottom-style:下邊框樣式;border-left-style:左邊框樣式;border-style:上邊框樣式 右邊框樣式 下邊框樣式 左邊框樣式;border-style:上邊框樣式 左右邊框樣式 下邊框樣式;border-style:上下邊框樣式 左右邊框樣式;border-style:上下左右邊框樣式;3、邊框?qū)傩?、邊框?qū)傩宰孖T教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.1 【案例案例7】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解（1）設(shè)置邊框樣式（）設(shè)置邊框樣式（border-style）使用border-style屬性綜合設(shè)置四邊樣式時(shí)，必須按上右下左的順時(shí)針順序，省略時(shí)采用值復(fù)制的原則，

8、即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下。例如只有上邊為虛線dashed，其他三邊為單實(shí)線solid，可以使用border-style綜合屬性分別設(shè)置各邊樣式：或綜合設(shè)置四條邊，然后采用上邊覆蓋：3、邊框?qū)傩浴⑦吙驅(qū)傩詐 borer-style:dashed solid solid solid;p border-style:solid; /*綜合設(shè)置四邊樣式*/p border-top-style:dashed; /*上邊樣式覆蓋*/讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.1 【案例案例7】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解（2）設(shè)置邊框?qū)挾龋ㄔO(shè)置邊框?qū)挾龋╞order-width）borde

9、r-width屬性用于設(shè)置邊框的寬度，其常用取值單位為像素px。同邊框樣式一樣，邊框?qū)挾纫部梢葬槍?duì)四條邊分別設(shè)置，或綜合設(shè)置四條邊的寬度，具體如下：border-top-width：上邊框?qū)挾?border-right-width：右邊框?qū)挾?border-bottom-width：下邊框?qū)挾?border-left-width：左邊框?qū)挾?border-width：上邊框?qū)挾?右邊框?qū)挾?下邊框?qū)挾?左邊框?qū)挾?3、邊框?qū)傩?、邊框?qū)傩宰孖T教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.1 【案例案例7】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解（3）設(shè)置邊框顏色（設(shè)置邊框顏色（border-color）邊框的默認(rèn)顏色為元素本身

10、的文本顏色，對(duì)于沒有文本的元素，其默認(rèn)邊框顏色為父元素的文本顏色。與邊框樣式和寬度相同，邊框顏色的單邊與綜合設(shè)置如下：border-top-color:上邊框顏色;border-right-color:右邊框顏色;border-bottom-color:下邊框顏色;border-left-color:左邊框顏色;border-color:上邊框顏色 右邊框顏色 下邊框顏色 左邊框顏色; 3、邊框?qū)傩?、邊框?qū)傩宰孖T教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.1 【案例案例7】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解（4）綜合設(shè)置綜合設(shè)置邊框邊框使用border-style、border-width、border-color雖

11、然可以實(shí)現(xiàn)豐富的邊框效果，但是這種方式書寫的代碼繁瑣，且不便于閱讀，其實(shí)CSS提供了更簡(jiǎn)單的邊框設(shè)置方式，具體如下：border-top:上邊框?qū)挾?樣式 顏色;border-right:右邊框?qū)挾?樣式 顏色;border-bottom:下邊框?qū)挾?樣式 顏色;border-left:左邊框?qū)挾?樣式 顏色;border:四邊寬度 樣式 顏色;3、邊框?qū)傩?、邊框?qū)傩宰孖T教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.1 【案例案例7】案例實(shí)現(xiàn)案例實(shí)現(xiàn)讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.2 【案例案例8】用戶中心用戶中心注冊(cè)和登錄一些網(wǎng)站時(shí)，經(jīng)常需要填寫用戶信息?！坝脩糁行摹蹦K用于對(duì)用戶個(gè)人信息進(jìn)行管理

12、和存儲(chǔ)。本節(jié)將通過(guò)盒子模型內(nèi)邊距及外邊距屬性制作一個(gè)“用戶中心”界面，如下圖所示。案例引入案例引入讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.2 【案例案例8】知識(shí)引入知識(shí)引入1 1內(nèi)邊距屬性內(nèi)邊距屬性2 2外邊距屬性外邊距屬性知識(shí)知識(shí)引入引入讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.2 【案例案例8】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解為了調(diào)整內(nèi)容在盒子中的顯示位置，常常需要給元素設(shè)置內(nèi)邊距，所謂內(nèi)邊距指的是元素內(nèi)容與邊框之間的距離，也常常稱為內(nèi)填充。在CSS中padding屬性用于設(shè)置內(nèi)邊距，同邊框?qū)傩詁order一樣，padding也是復(fù)合屬性，其相關(guān)設(shè)置如下：padding-top:上內(nèi)邊距;padding-r

13、ight:右內(nèi)邊距;padding-bottom:下內(nèi)邊距;padding-left:左內(nèi)邊距;padding:上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距;1、內(nèi)邊內(nèi)邊距屬性距屬性讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.2 【案例案例8】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解網(wǎng)頁(yè)是由多個(gè)盒子排列而成的，要想拉開盒子與盒子之間的距離，合理地布局網(wǎng)頁(yè)，就需要為盒子設(shè)置外邊距，所謂外邊距指的是元素邊框與相鄰元素之間的距離。在CSS中margin屬性用于設(shè)置外邊距，它是一個(gè)復(fù)合屬性，與內(nèi)邊距padding的用法類似，設(shè)置外邊距的方法如下：margin-top:上外邊距;margin-right:右外邊距;margin-bot

14、tom:下外邊距;margin-left:左外邊距;margin:上外邊距 右外邊距 下外邊距 左外邊距; 2、外邊距屬性、外邊距屬性讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.2 【案例案例8】案例實(shí)現(xiàn)案例實(shí)現(xiàn)讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.3 【案例案例9】咖啡店咖啡店banner隨著生活水平的提高以及生活節(jié)奏的加快，咖啡走進(jìn)了人們的日常生活，優(yōu)雅的咖啡店也逐漸成為人們商務(wù)、休閑的首選場(chǎng)所。本節(jié)將使用如下圖所示的素材，結(jié)合盒子模型的背景屬性，制作一款咖啡店banner。案例引入案例引入讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.3 【案例案例9】知識(shí)引入知識(shí)引入1 1設(shè)置背景顏色設(shè)置背景顏色2

15、2設(shè)置背景圖像設(shè)置背景圖像知識(shí)知識(shí)引入引入3 3設(shè)置背景圖像平衡設(shè)置背景圖像平衡4 4設(shè)置背景圖像的位置設(shè)置背景圖像的位置5 5設(shè)置背景圖像固定設(shè)置背景圖像固定6 6綜合設(shè)置元素的背景綜合設(shè)置元素的背景讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.3 【案例案例9】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解在CSS中，網(wǎng)頁(yè)元素的背景顏色使用background-color屬性來(lái)設(shè)置，其屬性值與文本顏色的取值一樣，可使用預(yù)定義的顏色值、十六進(jìn)制#RRGGBB或RGB代碼rgb(r,g,b)。background-color的默認(rèn)值為transparent，即背景透明，這時(shí)子元素會(huì)顯示其父元素的背景。了解了背景顏色屬性back

16、ground-color，下面來(lái)演示其用法。1、設(shè)置背景顏色設(shè)置背景顏色讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.3 【案例案例9】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解背景不僅可以設(shè)置為某種顏色，在CSS中，還可以將圖像作為網(wǎng)頁(yè)元素的背景，通過(guò)background-image屬性實(shí)現(xiàn)。以【demo4-6】為基礎(chǔ)，準(zhǔn)備一張背景圖像，如下圖所示。將圖像放在【demo4-6】文件所在的文件夾中，然后更改body元素的CSS樣式代碼：2、設(shè)置設(shè)置背景背景圖像圖像bodybackground-color:#CCC; /*設(shè)置網(wǎng)頁(yè)的背景顏色*/background-image:url(images/jianbian.jpg)

17、; /*設(shè)置網(wǎng)頁(yè)的背景圖像*/ 讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.3 【案例案例9】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解保存HTML頁(yè)面，刷新網(wǎng)頁(yè)，效果如下圖所示。2、設(shè)置設(shè)置背景背景圖像圖像讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.3 【案例案例9】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解默認(rèn)情況下，背景圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪，如果不希望背景圖像平鋪，或者只沿著一個(gè)方向平鋪，可以通過(guò)background-repeat屬性來(lái)控制，該屬性的取值如下：repeat：沿水平和豎直兩個(gè)方向平鋪（默認(rèn)值）no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）repeat-x：只沿水平方向平鋪repeat-y：只沿豎直方

18、向平鋪3、設(shè)置設(shè)置背景背景圖像平鋪圖像平鋪?zhàn)孖T教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.3 【案例案例9】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解background-position屬性的取值有多種，具體如下：（1）使用不同單位（最常用的是像素px）的數(shù)值：直接設(shè)置圖像左上角在元素中的坐標(biāo)。例如：（2）使用預(yù)定義的關(guān)鍵字：指定背景圖像在元素中的對(duì)齊方式。水平方向值：left、center、right。垂直方向值：top、center、bottom。4、設(shè)置設(shè)置背景背景圖像的位置圖像的位置“background-position:20px 20px;”讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.3 【案例案例9】知識(shí)點(diǎn)講解知識(shí)

19、點(diǎn)講解（3）使用百分比：按背景圖像和元素的指定點(diǎn)對(duì)齊。0% 0% 表示圖像左上角與元素的左上角對(duì)齊。50% 50% 表示圖像50% 50%中心點(diǎn)與元素50% 50%的中心點(diǎn)對(duì)齊。20% 30% 表示圖像20% 30%的點(diǎn)與元素20% 30%的點(diǎn)對(duì)齊。100% 100% 表示圖像右下角與元素的右下角對(duì)齊，而不是圖像充滿元素。如果只有一個(gè)百分?jǐn)?shù)，將作為水平值，垂直值則默認(rèn)為50%。4、設(shè)置設(shè)置背景背景圖像的位置圖像的位置讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.3 【案例案例9】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解如果希望背景圖像固定在屏幕上，不隨著頁(yè)面元素滾動(dòng)，可以使用background-attachment屬性

20、來(lái)設(shè)置，其屬性值如下：scroll：圖像隨頁(yè)面元素一起滾動(dòng)（默認(rèn)值）。fixed：圖像固定在屏幕上，不隨頁(yè)面元素滾動(dòng)。5、設(shè)置設(shè)置背景背景圖像固定圖像固定讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.3 【案例案例9】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解同邊框?qū)傩砸粯?，在CSS中背景屬性也是一個(gè)復(fù)合屬性，可以將背景相關(guān)的樣式都綜合定義在一個(gè)復(fù)合屬性background中。使用background屬性綜合設(shè)置背景樣式的語(yǔ)法格式如下：在上面的語(yǔ)法格式中，各個(gè)樣式順序任意，中間用空格隔開，不需要的樣式可以省略。但實(shí)際工作中通常按照背景色、url(圖像)、平鋪、定位、固定的順序來(lái)書寫。6、綜合設(shè)置元素的背景綜合設(shè)置元素的背景

21、background:背景色 url(圖像) 平鋪 定位 固定;讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.3 【案例案例9】案例實(shí)現(xiàn)案例實(shí)現(xiàn)讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.4 【案例案例10】圖標(biāo)導(dǎo)航欄圖標(biāo)導(dǎo)航欄導(dǎo)航菜單是網(wǎng)站的重要組成部分，關(guān)系著網(wǎng)站的可用性和用戶體驗(yàn)。一個(gè)有吸引力的圖標(biāo)導(dǎo)航欄不僅可以給用戶帶來(lái)良好的體驗(yàn)，而且使網(wǎng)站看上去更加生動(dòng)、有趣。本節(jié)將使用“塊元素”與“行內(nèi)元素”間的轉(zhuǎn)換來(lái)制作一款圖標(biāo)導(dǎo)航欄，如下圖所示。案例引入案例引入讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.4 【案例案例10】知識(shí)引入知識(shí)引入1 1元素的類型元素的類型2 2標(biāo)記標(biāo)記3 3元素的轉(zhuǎn)換元素的轉(zhuǎn)換知識(shí)知識(shí)

22、引入引入讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.4 【案例案例10】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解HTML標(biāo)記語(yǔ)言提供了豐富的標(biāo)記，用于組織頁(yè)面結(jié)構(gòu)。為了使頁(yè)面結(jié)構(gòu)的組織更加輕松、合理，HTML標(biāo)記被定義成了不同的類型，一般分為塊標(biāo)記和行內(nèi)標(biāo)記，也稱塊元素和行內(nèi)元素。了解它們的特性可以為使用CSS設(shè)置樣式和布局打下基礎(chǔ)，具體如下：1、元素元素的類型的類型讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.4 【案例案例10】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解塊元素塊元素在頁(yè)面中以區(qū)域塊的形式出現(xiàn)，其特點(diǎn)是，每個(gè)塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性，常用于網(wǎng)頁(yè)布局和網(wǎng)頁(yè)結(jié)構(gòu)的搭建。常見的塊元素有、等，其中標(biāo)記是最典型的塊元素。1、元素元素的類型的類型讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效4.4 【案例案例10】知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解行內(nèi)元素行