了解盒子模型的概念掌握盒子的相關屬性了解元素的類型與轉換第4章盒子模型學習目標：第4章盒子模型盒子模型是CSS網頁布局的一個很關鍵的概念。只有掌握了盒子模型的各種規律和特征，才可以更好地控制網頁中各個元素所呈現的效果。本章將對盒子模型的概念、盒子相關屬性及元素的類型和轉換進行詳細講解。4.1案例：學院簡介頁面4.1案例：學院簡介頁面

制作學院簡介頁面。將學院簡介內容放入定義的盒子中，并設置盒子模型的相關屬性。要求如下：（1）頁面背景為祥云圖案（bodybg.jpg）。（2）盒子的寬度為720像素、高度自動適應文字內容、邊框為1像素、藍色、實線。（3）正文標題采用二級標題、標題行高度為30像素、文字顏色為黑色、在瀏覽器中居中顯示。（4）段落文字采用宋體、大小14像素、

文字顏色為黑色、行高25px、首行縮進2個

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

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

樣式

顏色border-right：右邊框寬度

樣式

顏色border-bottom：下邊框寬度

樣式

顏色border-left：左邊框寬度

樣式

顏色若四個邊框具有相同的寬度、樣式和顏色，則可以一個次設置如下：border：邊框寬度

樣式

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

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

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

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