第4章 盒子模型

了解盒子模型的概念掌握盒子的相關(guān)屬性了解元素的類型與轉(zhuǎn)換第4章盒子模型學(xué)習(xí)目標(biāo)：第4章盒子模型盒子模型是CSS網(wǎng)頁(yè)布局的一個(gè)很關(guān)鍵的概念。只有掌握了盒子模型的各種規(guī)律和特征，才可以更好地控制網(wǎng)頁(yè)中各個(gè)元素所呈現(xiàn)的效果。本章將對(duì)盒子模型的概念、盒子相關(guān)屬性及元素的類型和轉(zhuǎn)換進(jìn)行詳細(xì)講解。4.1案例：學(xué)院簡(jiǎn)介頁(yè)面4.1案例：學(xué)院簡(jiǎn)介頁(yè)面

制作學(xué)院簡(jiǎn)介頁(yè)面。將學(xué)院簡(jiǎn)介內(nèi)容放入定義的盒子中，并設(shè)置盒子模型的相關(guān)屬性。要求如下：（1）頁(yè)面背景為祥云圖案（bodybg.jpg）。（2）盒子的寬度為720像素、高度自動(dòng)適應(yīng)文字內(nèi)容、邊框?yàn)?像素、藍(lán)色、實(shí)線。（3）正文標(biāo)題采用二級(jí)標(biāo)題、標(biāo)題行高度為30像素、文字顏色為黑色、在瀏覽器中居中顯示。（4）段落文字采用宋體、大小14像素、

文字顏色為黑色、行高25px、首行縮進(jìn)2個(gè)

字符、段落的下外邊距為20像素。4.2知識(shí)準(zhǔn)備4.2.1盒子模型的概念所謂盒子模型就是把HTML頁(yè)面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容（content）、內(nèi)邊距（padding）、邊框(border)和外邊距(margin)組成。下面通過(guò)一個(gè)具體實(shí)例認(rèn)識(shí)到底什么是盒子模型。例4-1

認(rèn)識(shí)盒子模型。創(chuàng)建一個(gè)網(wǎng)頁(yè)，定義一個(gè)盒子，并設(shè)置盒子的相關(guān)屬性。文件名：4-1.html。代碼：4.2知識(shí)準(zhǔn)備<divid="box">盒子中的內(nèi)容</div>body中HTML代碼：4.2知識(shí)準(zhǔn)備Head中CSS代碼：<styletype="text/css">#box{ width:200px;/*盒子的寬度*/ height:200px;/*盒子的高度*/ border:5pxsolidred;/*盒子的邊框?yàn)?個(gè)像素、實(shí)線邊框、紅色*/ background:#ccc;/*盒子的背景色為灰色*/ padding:20px;/*盒子的內(nèi)邊距*/ margin:30px;/*盒子的外邊距*/}</style>4.2知識(shí)準(zhǔn)備外邊距(margin)邊框(border)內(nèi)邊距(padding)寬度(width)高度(height)一個(gè)盒子實(shí)際寬度（或高度）是由“內(nèi)容+內(nèi)邊距+邊框+外邊距”組成的。因此，例4-1中定義的盒子box的實(shí)際寬度和高度均是310px。1．邊框（border）屬性邊框（border）屬性設(shè)置方式如下：border-top：上邊框?qū)挾?/p>

樣式

顏色border-right：右邊框?qū)挾?/p>

樣式

顏色border-bottom：下邊框?qū)挾?/p>

樣式

顏色border-left：左邊框?qū)挾?/p>

樣式

顏色若四個(gè)邊框具有相同的寬度、樣式和顏色，則可以一個(gè)次設(shè)置如下：border：邊框?qū)挾?/p>

樣式

顏色例如，將盒子box的下邊框設(shè)置為2個(gè)像素、實(shí)線、紅色，則可用代碼：若將盒子box的四個(gè)邊框均設(shè)置為2個(gè)像素、實(shí)線、紅色，則可用代碼：

4.2.2盒子模型的相關(guān)屬性4.2知識(shí)準(zhǔn)備#box{border-bottom:2pxsolid#f00;}#box{border:2pxsolid#f00;}2．內(nèi)邊距（padding）屬性內(nèi)邊距用于設(shè)置盒子中內(nèi)容與邊框之間的距離，也常常稱為內(nèi)填充。其設(shè)置方法類似于邊框（border）屬性的設(shè)置，其設(shè)置方式如下：padding-top：上內(nèi)邊距大??；padding-right：右內(nèi)邊距大小padding-bottom：下內(nèi)邊距大?。籶adding-left：左內(nèi)邊距大小若四個(gè)內(nèi)邊距具有相同的大小，則可以一個(gè)次設(shè)置。例如，將盒子box的上右下左四個(gè)內(nèi)邊距分別設(shè)置為10、20、30、40像素，則可以用如下代碼：4.2知識(shí)準(zhǔn)備#box{Padding-top:10px;Padding-right:20px;Padding-bottom:30px;Padding-left:40px;}也可以簡(jiǎn)寫成：若寫成：若寫成：若寫成：4.2知識(shí)準(zhǔn)備#box{padding:10px20px30px40px;}#box{padding:10px20px30px;}/*表示上內(nèi)邊距10px、左右內(nèi)邊距20px、下內(nèi)邊距30px*/#box{padding:10px20px;}/*表示上下內(nèi)邊距均為10px、左右內(nèi)邊距均為20px*/#box{padding:10px;}/*表示上右下左四個(gè)內(nèi)邊距均為10px*/3．外邊距（margin）屬性外邊距用于設(shè)置盒子與其他盒子之間的距離。其設(shè)置方式如下：margin-top：上外邊距大小；margin-right：右外邊距大小margin-bottom：下外邊距大?。籱argin-left：左外邊距大小若四個(gè)外邊距具有相同的大小，則可以一個(gè)次設(shè)置。例如，將盒子box的上右下左四個(gè)外邊距分別設(shè)置為10、20、30、40個(gè)像素，則可以用如下代碼：也可以簡(jiǎn)寫成：

4.2知識(shí)準(zhǔn)備#box{margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px;}#box{margin:10px20px30px40px;}若寫成：若寫成：若寫成：若寫成：4.2知識(shí)準(zhǔn)備#box{margin:10px20px30px;}/*表示上外邊距10px、左右外邊距20px、下外邊距30px*/#box{margin:10px20px;}/*表示上下外邊距均為10px、左右外邊距均為20px*/#box{margin:10px;}/*表示上右下左四個(gè)外邊距均為10px*/#box{margin:0auto;}/*表示上下外邊距為0px、左右外邊距為自動(dòng)均勻分布，盒子在瀏覽器居中顯示*/網(wǎng)頁(yè)能通過(guò)背景顏色或背景圖像給人留下第一印象，如節(jié)日題材的網(wǎng)站一般采用喜慶祥和的圖片來(lái)突出效果，所以在網(wǎng)頁(yè)設(shè)計(jì)中，控制背景顏色和圖像是一個(gè)很重要的步驟。1.設(shè)置背景顏色格式：background-color：#RRGGBB或#rgb(r,g,b)或預(yù)定義的顏色值例4-2創(chuàng)建網(wǎng)頁(yè)，分別設(shè)置網(wǎng)頁(yè)的背景顏色和標(biāo)題行的背景顏色。文件名：4-2.html。4.2.3CSS設(shè)置背景4.2知識(shí)準(zhǔn)備<styletype="text/css">body{ background-color:#CCC;/*設(shè)置網(wǎng)頁(yè)的背景顏色*/}h2{ text-align:center; background-color:#009;/*設(shè)置標(biāo)題行的背景顏色*/ color:#FFF;}4.2知識(shí)準(zhǔn)備Head中添加的CSS代碼為：<divid="box"><h2>山東信息職業(yè)技術(shù)學(xué)院簡(jiǎn)介</h2><p>山東信息職業(yè)技術(shù)學(xué)院是山東省人民政府批準(zhǔn)設(shè)立、教育部......</p></div>body中代碼為：2.設(shè)置背景圖像格式：background-image：URL（圖像來(lái)源）例4-3修改4-2的代碼，設(shè)置網(wǎng)頁(yè)的背景圖像。將文件另存為：4-3.html。修改body的CSS代碼如下：4.2知識(shí)準(zhǔn)備body{ background-image:url(images/bodybg.jpg);/*設(shè)置網(wǎng)頁(yè)的背景圖像為祥云圖案*/}body{ background:url(images/bg1.jpg)repeat-x;/*設(shè)置網(wǎng)頁(yè)的背景圖像沿X軸平鋪*/}h2{ text-align:center; background:#009;/*設(shè)置標(biāo)題行的背景顏色*/ color:#FFF;}4.2知識(shí)準(zhǔn)備例4-4繼續(xù)修改例4-3，設(shè)置網(wǎng)頁(yè)中標(biāo)題的背景色和網(wǎng)頁(yè)的背景圖像。將文件另存為：4-4.html。修改CSS代碼為：例4-5繼續(xù)修改例4-4，設(shè)置網(wǎng)頁(yè)的背景圖像在網(wǎng)頁(yè)右下角。修改4-4.html文件，將文件另存為：4-5.html。4.2知識(shí)準(zhǔn)備修改背景像的平鋪和定位參數(shù)會(huì)有什么不同的效果？body{ background:url(images/school4.jpg)no-repeatleftbottom;/*設(shè)置網(wǎng)頁(yè)的背景圖像在網(wǎng)頁(yè)左下角*/}h2{ text-align:center; background:#009;/*設(shè)置標(biāo)題行的背景顏色*/ color:#FFF;}HTML提供了豐富的標(biāo)記，用于組織頁(yè)面結(jié)構(gòu)。HTML標(biāo)記一般分為塊標(biāo)記和行內(nèi)標(biāo)記，也稱塊元素和行內(nèi)元素。1.塊元素塊元素在頁(yè)面中以區(qū)域塊的形式出現(xiàn)，其特點(diǎn)是：每個(gè)塊元素通常都會(huì)占據(jù)一整行或多行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性，常用于網(wǎng)頁(yè)布局和網(wǎng)頁(yè)結(jié)構(gòu)的搭建。常見(jiàn)的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。2.行內(nèi)元素行內(nèi)元素也稱為內(nèi)聯(lián)元素或內(nèi)嵌元素，其特點(diǎn)是：不必在新的一行開(kāi)始，同時(shí)，也不強(qiáng)迫其他元素在新的一行顯示。一般不可以設(shè)置寬度、高度和對(duì)齊等屬性，常用于控制頁(yè)面中的特殊文本的樣式。4.2.4

元素的類型與轉(zhuǎn)換4.2知識(shí)準(zhǔn)備常見(jiàn)的行內(nèi)元素有<strong>、<b>、<em>、<i>、<a>、<span>等，其中<span>標(biāo)記是最典型的行內(nèi)元素。<span>標(biāo)記與<div>標(biāo)記一樣，作為容器標(biāo)記而被廣泛應(yīng)用在HTML語(yǔ)言中。在<span>與</span>中間同樣可以容納各種HTML元素，從而形成獨(dú)立的對(duì)象。<div>與<span>的區(qū)別在于，<div>是一個(gè)塊級(jí)元素，它包圍的元素會(huì)自動(dòng)換行。而<span>僅僅是一個(gè)行內(nèi)元素（inlineelements），在它的前后不會(huì)換行。<span>沒(méi)有結(jié)構(gòu)上的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，就可以使用<span>元素。4.2知識(shí)準(zhǔn)備例4-6創(chuàng)建網(wǎng)頁(yè)，在源文件中添加<span>標(biāo)記，設(shè)置CSS樣式使<span>標(biāo)記中的文字為紅色。文件名4-6.html4.2知識(shí)準(zhǔn)備<styletype="text/css">body{ background:url(images/bodybg.jpg);/*設(shè)置網(wǎng)頁(yè)的背景圖像*/}h2{ text-align:center; font-family:"微軟雅黑";}pspan{ color:#F00;/*設(shè)置文字顏色*/ font-weight:bold;/*設(shè)置文字的粗體效果*/}</style>4.2知識(shí)準(zhǔn)備<divid="box"><h2>山東信息職業(yè)技術(shù)學(xué)院簡(jiǎn)介</h2><p><span>山東信息職業(yè)技術(shù)學(xué)院</span>是山東省人民政府批準(zhǔn)設(shè)立、......</p></div>CSS樣式代碼：Body中代碼：3.元素的轉(zhuǎn)換網(wǎng)頁(yè)是由多個(gè)塊元素和行內(nèi)元素構(gòu)成的盒子排列而成的。如果希望行內(nèi)元素具有塊元素的某些特性，例如可以設(shè)置寬高，或者需要塊元素具有行內(nèi)元素的某些特性，例如不獨(dú)占一行排列，可以使用display屬性對(duì)元素的類型進(jìn)行轉(zhuǎn)換。display屬性常用的屬性值及含義如下：inline：行內(nèi)元素block：塊元素inline-block：行內(nèi)塊元素，可以對(duì)其設(shè)置寬高和對(duì)齊等屬性，但是該元素不會(huì)獨(dú)占一行。none：元素被隱藏、不顯示。4.2知識(shí)準(zhǔn)備1.塊元素間的垂直外邊距當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則它們之間的垂直間距不是兩者的和，而是兩者中的較大者。下面舉例說(shuō)明。例4-7創(chuàng)建網(wǎng)頁(yè)，在網(wǎng)頁(yè)中定義兩個(gè)塊，并設(shè)置它們的外邊距。文件名4-7.html4.2.5塊元素間的外邊距4.2知識(shí)準(zhǔn)備<styletype="text/css">#one{width:200px;height:100px;background:#FF0;margin-bottom:10px;/*定義第一個(gè)塊的下外邊距*/}#two{width:200px;height:100px;background:#C60;margin-top:30px;/*定義第二個(gè)塊的上外邊距*/}</style>4.2知識(shí)準(zhǔn)備<divid="one">第一個(gè)塊</div><divid="two">第二個(gè)塊</div>Head中CSS代碼：Body中代碼：2.塊元素間的水平外邊距當(dāng)兩個(gè)相鄰的塊元素水平排列時(shí)，如果左面的元素有右外邊距margin-right，右面的元素有左外邊距margin-left，則它們之間的水平間距是兩者的和。例4-8創(chuàng)建網(wǎng)頁(yè)，在網(wǎng)頁(yè)中定義兩個(gè)塊，并設(shè)置它們的外邊距。文件名4-8.html。4.2知識(shí)準(zhǔn)備<title>兩元素間的水平外邊距</title><styletype="text/css">#one{ width:200px; height:100px; background:#FF0; float:left;/*設(shè)置塊左浮動(dòng)*/ margin-right:10px;/*定義第一個(gè)塊的右外邊距*/}4.2知識(shí)準(zhǔn)備代碼如下：#two{ width:200px; height:100px; background:#C60; float:left;/*設(shè)置塊左浮動(dòng)*/ margin-left:30px;/*定義第二個(gè)塊的左外邊距*/}</style></head><body><divid="one">第一個(gè)塊</div><divid="two">第二個(gè)塊</div></body></html>本案例新建一個(gè)網(wǎng)頁(yè)文件，在文件中首先添加頁(yè)面內(nèi)容即結(jié)構(gòu)，然后再定義網(wǎng)頁(yè)元素的樣式。4.3.1制作頁(yè)面結(jié)構(gòu)4.3案例實(shí)現(xiàn)4.3案例實(shí)現(xiàn)分析學(xué)院簡(jiǎn)介頁(yè)面效果圖，該頁(yè)面中主要有標(biāo)題和段落文字組成。所有文字內(nèi)容放入一個(gè)塊中。標(biāo)題文字使用標(biāo)記<h2>，段落文字使用標(biāo)記<p>。因此首先在頁(yè)面中要使用DIV定義一個(gè)塊，將標(biāo)題和段落內(nèi)容放入塊中。網(wǎng)頁(yè)元素的樣式使用CSS樣式設(shè)置。新建一個(gè)網(wǎng)頁(yè)文件，文件名稱為：intr.html。雙擊文件intr.html，打開(kāi)該文件，添加頁(yè)面結(jié)構(gòu)代碼。4.2知識(shí)準(zhǔn)備<title>學(xué)院介紹</title></head><body><divid="box"><h2>山東信息職業(yè)技術(shù)學(xué)院簡(jiǎn)介</h2><p>山東信息職業(yè)技術(shù)學(xué)院是山東省人民政府批準(zhǔn)設(shè)立、......</p>......</div></body></html>4.3.2添加CSS樣式添加頁(yè)面內(nèi)容后，使用CSS內(nèi)部樣式表設(shè)置頁(yè)面各元素樣式，將該部分代碼放入<head>和</head>標(biāo)記之間，代碼如下：4.3案例實(shí)現(xiàn)<styletype="text/css">body,h2,p{ margin:0;/*設(shè)置元素的外邊距為0*/ padding:0/*設(shè)置元素的內(nèi)邊距為0*/}body{ background:url(images/bodybg.jpg);/*設(shè)置背景圖像為祥云圖案，并使圖像平鋪*/}#box{ width:720px;/*設(shè)置寬度*/ height:auto;/*設(shè)置高度為自動(dòng)值*/ border:1pxsolid#0080FF;/*設(shè)置邊距為1像素、實(shí)線、藍(lán)色*/