任務(wù)9

首頁頁頭板塊的設(shè)計與制作任務(wù)任務(wù)9首頁頁頭板塊的設(shè)計與制作任務(wù)9

首頁頁頭板塊的設(shè)計與制作任務(wù)9

首頁頁頭板塊的設(shè)計與制作知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)（1）掌握盒模型的基本概念。（2）掌握盒模型組成和基本屬性。（3）掌握盒模型寬度和高度的計算。（1）能夠靈活運用盒模型的各個屬性。（2）能夠使用盒模型的屬性完成頁面的相關(guān)區(qū)域排版。（3）能夠根據(jù)結(jié)構(gòu)圖或效果圖建立盒模型。（1）掌握并遵循Web開發(fā)標(biāo)準(zhǔn)，培養(yǎng)嚴(yán)謹(jǐn)?shù)墓ぷ髯黠L(fēng)。（2）提升邏輯思維能力及實踐能力。（3）加強實踐教育，培養(yǎng)嚴(yán)謹(jǐn)?shù)拇a書寫習(xí)慣。盒模型簡介盒模型屬性任務(wù)實現(xiàn)任務(wù)9

首頁頁頭板塊的設(shè)計與制作1.盒模型簡介1.1什么是盒模型1.2盒模型的本質(zhì)1.3盒模型的組成任務(wù)9

首頁頁頭板塊的設(shè)計與制作1.1什么是盒模型

盒模型就是所有HTML元素可以看做一個裝了東西的盒子。1.盒模型簡介1.2盒模型的本質(zhì)CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括外邊距、邊框、內(nèi)邊距和實際內(nèi)容。

1.盒模型簡介1.3盒模型的組成大多數(shù)瀏覽器都采用W3C規(guī)范，一個標(biāo)準(zhǔn)的W3C盒子模型由內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）這4個屬性組成，如圖9-2所示。1.盒模型簡介圖9-2盒模型簡介盒模型屬性任務(wù)實現(xiàn)任務(wù)9

首頁頁頭板塊的設(shè)計與制作2.盒模型屬性2.1盒模型屬性簡介2.2width屬性和height屬性2.3內(nèi)邊距2.4外邊距2.5盒模型的寬度與高度的計算任務(wù)9

首頁頁頭板塊的設(shè)計與制作2.1盒模型屬性簡介

盒模型最里面的部分就是實際內(nèi)容有屬性“寬（width）”和“高（height）”。

盒子里面的內(nèi)容到盒子的邊框之間的距離叫“內(nèi)邊距（padding）”，內(nèi)邊距緊緊包圍在內(nèi)容區(qū)域的周圍。在內(nèi)邊距的外側(cè)邊緣是屬性“邊框（border）”，邊框的作用就是在內(nèi)外邊距之間創(chuàng)建一個隔離帶，以避免視覺上的混淆。

而盒子邊框外和其他盒子的距離叫“外邊距（margin）”。盒模型屬性具體如圖所示：2.盒模型屬性2.2width屬性和height屬性2.盒模型簡介

在CSS中width屬性和height屬性經(jīng)常被用到，它們分別表示內(nèi)容區(qū)域的寬度和高度。內(nèi)容是盒子里的“物品”，可以是網(wǎng)頁上的任何元素，如文本、圖片等各種數(shù)據(jù)信息。語法格式如下：屬性值的含義如表所示：

width:auto|length|%;height:auto|length|%;width和height屬性值及其含義值描述auto默認(rèn)值，瀏覽器會計算出實際的寬度和高度length使用px、cm等單位定義高度%基于包含它的塊級元素的百分比高度2.3內(nèi)邊距2.盒模型簡介

內(nèi)邊距是指元素內(nèi)容與邊框之間的距離，這個距離可以調(diào)整內(nèi)容在盒子中的位置，也稱142之為填充。內(nèi)邊距的設(shè)置屬性有padding-top、padding-right、padding-bottom、padding-left，可分別設(shè)置，也可以用padding屬性，一次設(shè)置所有內(nèi)邊距。1.單邊的內(nèi)邊距CSS可以為元素的每一側(cè)指定內(nèi)邊距的屬性，語法格式如下：

padding-top:length|%;padding-right:length|%;padding-bottom:length|%;padding-left:length|%;所有內(nèi)邊距屬性都可以設(shè)置如表所示的值：值描述length使用px、cm等單位定義高度%基于包含它的塊級元素的百分比高度padding屬性值及其含義需要注意的是，內(nèi)邊距的值不允許負(fù)值。2.3內(nèi)邊距2.盒模型簡介

2.簡寫屬性padding

padding屬性是一個復(fù)合屬性，遵循值復(fù)制的原則，可以有1到4個值。（1）設(shè)置1個值：上下左右內(nèi)邊距的值都相同。

【例如】padding:25px;表示上下左右四個方向的內(nèi)邊距的值都是25px。（2）設(shè)置2個值：第1個值為上下內(nèi)邊距的值，第2個值為左右內(nèi)邊距的值。

【例如】padding:25px50px;表示上下內(nèi)邊距的值為25px，左右內(nèi)邊距的值為50px。（3）設(shè)置3個值：第1個值為上內(nèi)邊距的值，第2個值為左右內(nèi)邊距的值，第3個為下內(nèi)邊距的值。

【例如】padding:25px50px75px;表示內(nèi)邊距的值為25px，左右內(nèi)邊距的值為50px，下內(nèi)邊距的值為75px。（4）設(shè)置4個值：第1個值為上內(nèi)邊距的值，第2個值為右內(nèi)邊距的值，第3個為下內(nèi)邊距的值，第4個為左內(nèi)邊距的值。

【例如】padding:25px50px75px100px;表示上內(nèi)邊距的值為25px，右內(nèi)邊距的值為50px，下內(nèi)邊距的值為75px，左內(nèi)邊距的值為100px。2.4外邊距2.盒模型簡介外邊距指的是元素邊框與相鄰元素之間的距離。在CSS中，margin屬性用于設(shè)置外邊距來控制盒子與盒子之間的距離。

1.單邊的外邊距

CSS可以為元素的每一側(cè)指定外邊距的屬性，語法格式如下：

margin-top:auto|length|%;margin-right:auto|length|%;

margin-bottom:auto|length|%;margin-left:auto|length|%;屬性值的含義如所示：值描述length使用px、cm等單位定義高度%基于包含它的塊級元素的百分比高度margin屬性值及其含義2.4外邊距2.盒模型簡介2.簡寫屬性margin為了縮減代碼，可以在一個屬性margin中指定所有外邊距屬性。margin屬性是一個復(fù)合屬性，屬性值可以有1到4個值。與內(nèi)邊距padding的用法類似。使用margin注意以下兩點：（1）外邊距可以為負(fù)值，使相鄰元素重疊。（2）當(dāng)使用盒元素進行布局時，使用了寬度屬性，同時將margin的左右外邊距設(shè)置為auto時，可以實現(xiàn)盒元素的居中。該盒元素將占據(jù)指定的寬度，并且剩余空間將在左右邊界之間平均分配。3.外邊距的合并

外邊距合并（疊加）是一個相當(dāng)簡單的概念。但是，在實踐中對網(wǎng)頁進行布局時，它會造成許多混淆。（1）外邊距合并指是指當(dāng)兩個垂直方向的外邊距相鄰時,它們將合并成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并，如圖所示：2.4外邊距2.盒模型簡介上下相鄰元素的外邊距合并2.4外邊距2.盒模型簡介上下相鄰元素的外邊距合并（2）當(dāng)一個元素包含在另一個元素中時，如果沒有內(nèi)邊距或邊框把外邊距分隔開，它們的上外邊距或下外邊距也會發(fā)生合并，如所示。2.4外邊距2.盒模型簡介空元素自身的上下外邊距合并（3）一個元素外邊距甚至可以與自身發(fā)生合并。當(dāng)一個空元素有外邊距，但是沒有邊框或填充的情況下，上外邊距與下外邊距就碰到了一起，它們也會發(fā)生合并。如所示。2.4外邊距2.盒模型簡介空元素和相鄰元素的外邊距合并如果這個外邊距遇到另一個元素的外邊距，它還會發(fā)生合并，如圖所示。2.4外邊距2.盒模型簡介外邊距的應(yīng)用外邊距合并在實際應(yīng)用中是非常有意義的。如圖所示，由幾個段落組成的典型文本頁面為例，第一個段落上面的空間高度等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰的上外邊距和下外邊距之和，這也就意味著段落之間的空間高度是頁面頂部的兩倍。而如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距會合并在一起，這樣各處的距離就一致了?！咀⒁狻恐挥衅胀ㄎ臋n流中塊元素的垂直相鄰?fù)膺吘嗖艜l(fā)生外邊距合并，行元素、浮動元素或絕對定位元素之間的外邊距是不會合并的。2.5盒模型的寬度與高度的計算2.盒模型簡介

CSS代碼中的寬度和高度，指的是填充以內(nèi)的內(nèi)容范圍。比如【案例9-1】example9-1.html中設(shè)置的width和height是內(nèi)容區(qū)域的寬度和高度，而不是盒模型的寬度與高度，不是盒模型實際所占的位置。盒模型的寬度與高度的計算方法如下：盒模型的