項(xiàng)目五 盒子模型的使用

05盒子模型的使用281任務(wù)1制作注冊(cè)網(wǎng)頁(yè)任務(wù)2制作登錄網(wǎng)頁(yè)282制作注冊(cè)網(wǎng)頁(yè)任務(wù)1283●1.了解盒子模型的概念?！?.熟練運(yùn)用盒子模型相關(guān)屬性對(duì)網(wǎng)頁(yè)進(jìn)行布局。284本任務(wù)主要通過(guò)設(shè)置盒子的內(nèi)外邊距、邊框等屬性，布局繽購(gòu)樂(lè)食電子商務(wù)網(wǎng)站注冊(cè)網(wǎng)頁(yè)表單模塊，并對(duì)盒子進(jìn)行定位設(shè)置，完成繽購(gòu)樂(lè)食電子商務(wù)網(wǎng)站注冊(cè)網(wǎng)頁(yè)。該注冊(cè)網(wǎng)頁(yè)包括login-header、login-banner、login-footer三個(gè)盒子。圖所示為繽購(gòu)樂(lè)食電子商務(wù)網(wǎng)站注冊(cè)網(wǎng)頁(yè)。285286繽購(gòu)樂(lè)食電子商務(wù)網(wǎng)站注冊(cè)網(wǎng)頁(yè)287步驟一：在body標(biāo)簽中新建網(wǎng)頁(yè)頂部的大盒子div，命名為login-header，利用img標(biāo)簽在盒子中加入電商網(wǎng)站logo圖片。代碼如圖所示。288運(yùn)行上圖中的代碼，效果如圖所示。加入logo圖片效果289步驟二：在body標(biāo)簽的下部新建一個(gè)底部盒子并命名為login-footer，盒子包含2行內(nèi)容，上面一行命名為login-ftop，下面一行命名為login-fbottom，代碼如圖所示。加入html內(nèi)容290加入html內(nèi)容291使用CSS代碼為底部盒子中的元素設(shè)置字體顏色和字符間距，如圖所示。設(shè)置文字顏色和文字間距292步驟三：在body標(biāo)簽中，在login-header的下方、login-footer的上方新建一個(gè)盒子并命名為login-banner，盒子包含三個(gè)子盒子，第一個(gè)子盒子命名為login-main，login-main盒子下又包含兩個(gè)子盒子，分別命名為login-mleft、login-mright。首先在login-mleft盒子中使用img標(biāo)簽引入背景大圖，然后在login-mright盒子中添加form表單，在form表單中添加多個(gè)不同的input表單控件。代碼如圖所示。293加入login-banner盒子中的內(nèi)容294加入login-banner盒子中的內(nèi)容295步驟四：使用CSS代碼設(shè)置login-banner的寬度與瀏覽器同寬，高度為470像素；設(shè)置login-main的寬度為1000像素，居于login-banner的水平中間位置；盛放表單的盒子login-mright的寬度設(shè)置為360像素，高度設(shè)置為430像素。表單中每個(gè)input控件左側(cè)的圖標(biāo)都是通過(guò)使用background屬性設(shè)置的背景圖片。代碼如圖所示。296設(shè)置中間部分樣式297設(shè)置中間部分樣式298設(shè)置中間部分樣式299設(shè)置中間部分樣式300一、盒子模型什么是CSS的盒子模型呢？為什么稱為盒子？在網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的屬性名有內(nèi)容（content）、填充（padding）、邊框（border）、邊界（margin），CSS盒子模型具備以上這些屬性，通常又稱填充為內(nèi)邊距、稱邊界為外邊距。盒子模型平面圖如圖所示。301盒子模型平面圖302盒子模型層次3D示意圖303二、盒子模型相關(guān)屬性1.邊框?qū)傩詾榱朔指罹W(wǎng)頁(yè)中不同的盒子，常常需要給元素設(shè)置邊框效果。在CSS中邊框?qū)傩园ㄟ吙驑邮綄傩裕╞order-style）、邊框?qū)挾葘傩裕╞order-width）、邊框顏色屬性（border-color）、單側(cè)邊框的屬性、邊框的綜合屬性，CSS邊框類型及屬性見(jiàn)表。304CSS邊框類型及屬性305在上表中列出了所有的邊框?qū)傩?，?duì)于初學(xué)者來(lái)說(shuō)比較難以理解，下面對(duì)上表中的邊框?qū)傩赃M(jìn)行具體講解。（1）設(shè)置邊框樣式邊框樣式用于定義網(wǎng)頁(yè)中邊框的風(fēng)格，常用屬性值如下。none：沒(méi)有邊框，即忽略所有邊框的寬度（默認(rèn)值）。solid：邊框?yàn)閱螌?shí)線。dashed：邊框?yàn)樘摼€。dotted：邊框?yàn)辄c(diǎn)線。double：邊框?yàn)殡p實(shí)線。306在設(shè)置邊框樣式時(shí)，既可以對(duì)盒子的單邊進(jìn)行設(shè)置，又可以綜合設(shè)置四條邊的樣式，具體情況如下。border-top-style：上邊框樣式。border-right-style：右邊框樣式。border-bottom-style：下邊框樣式。border-left-style：左邊框樣式。border-style：上邊框樣式右邊框樣式下邊框樣式左邊框樣式。border-style：上邊框樣式左右邊框樣式下邊框樣式。border-style：上下左右邊框樣式。307使用border-style屬性綜合設(shè)置四條邊樣式時(shí)有兩個(gè)原則，一是必須按上右下左的順時(shí)針順序；二是省略時(shí)采用值復(fù)制的原則，即一個(gè)值為四條邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下。308（2）設(shè)置邊框?qū)挾萣order-width屬性用于設(shè)置邊框的寬度，其常用取值單位為像素px。同邊框樣式一樣，邊框?qū)挾纫部梢葬槍?duì)四條邊分別設(shè)置，或綜合設(shè)置四條邊的寬度，具體情況如下。border-top-width：上邊框?qū)挾?。border-right-width：右邊框?qū)挾?。border-bottom-width：下邊框?qū)挾?。border-left-width：左邊框?qū)挾取order-width：上邊框?qū)挾扔疫吙驅(qū)挾认逻吙驅(qū)挾茸筮吙驅(qū)挾取?09（3）設(shè)置邊框顏色border-color屬性用于設(shè)置邊框的顏色，其取值可以為預(yù)定義的顏色值、十六進(jìn)制#RRGGBB或RGB格式rgb（r,g,b）、rgb（r%,g%,b%），實(shí)際工作中最常用的是十六進(jìn)制#RRGGBB。邊框的默認(rèn)顏色為元素本身的文本顏色，對(duì)于沒(méi)有文本的元素，其默認(rèn)邊框顏色為父元素的文本顏色。邊框顏色的單邊與綜合設(shè)置如下。310border-top-color：上邊框顏色。border-right-color：右邊框顏色。border-bottom-color：下邊框顏色。border-left-color：左邊框顏色。border-color：上邊框顏色右邊框顏色下邊框顏色左邊框顏色。綜合設(shè)置邊框四條邊的顏色時(shí)，必須按照上右下左的順時(shí)針順序，省略時(shí)采用值復(fù)制的原則，即一個(gè)值為四條邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下。311（4）綜合設(shè)置邊框使用border-style、border-width、border-color雖然可以實(shí)現(xiàn)豐富的邊框效果，但是采用這種方式書(shū)寫(xiě)的代碼比較煩瑣，且不便于閱讀，為此CSS提供了更簡(jiǎn)單的邊框設(shè)置方式，其基本格式如下。采用上述設(shè)置方式時(shí)，寬度、樣式、顏色的順序不分先后，可以只指定需要設(shè)置的屬性，省略的部分將取默認(rèn)值（樣式不能省略）。312當(dāng)每一側(cè)的邊框樣式都不相同，或者只需單獨(dú)定義某一側(cè)的邊框時(shí)，可以使用單側(cè)邊框的綜合屬性border-top、border-bottom、border-left或border-right進(jìn)行設(shè)置。例如，單獨(dú)定義上邊框，代碼如圖所示。當(dāng)四條邊的邊框樣式都相同時(shí)，可以使用border屬性進(jìn)行綜合設(shè)置。單獨(dú)定義上邊框代碼313若要將二級(jí)標(biāo)題的邊框設(shè)置為雙實(shí)線、紅色、3像素寬，操作代碼如圖所示。能夠用一個(gè)屬性定義元素的多種樣式，如border、border-top等，在CSS中稱為復(fù)合屬性。常用的復(fù)合屬性有font、border、margin、padding和background等。實(shí)際工作中常使用復(fù)合屬性，它可以簡(jiǎn)化代碼，提高網(wǎng)頁(yè)的運(yùn)行速度。設(shè)置二級(jí)標(biāo)題的邊框代碼3142.內(nèi)邊距屬性在網(wǎng)頁(yè)設(shè)計(jì)中，為了調(diào)整內(nèi)容在盒子中的顯示位置，常常需要給元素設(shè)置內(nèi)邊距，所謂內(nèi)邊距指的是元素內(nèi)容之間的距離，也常常稱為內(nèi)填充。在CSS中，padding屬性之間的距離也常常被稱為內(nèi)填充。在CSS中，padding屬性用于設(shè)置內(nèi)邊距，同邊框?qū)傩詁order一樣，padding也是復(fù)合屬性，其相關(guān)設(shè)置方法如下。padding-top：上內(nèi)邊距。padding-right：右內(nèi)邊距。padding-bottom：下內(nèi)邊距。315padding-left：左內(nèi)邊距。padding：上內(nèi)邊距右內(nèi)邊距下內(nèi)邊距左內(nèi)邊距。在上面的設(shè)置中，padding相關(guān)屬性的取值可為auto（默認(rèn)值）、不同單位的數(shù)值、相對(duì)于父元素（或?yàn)g覽器）寬度的百分比（%），實(shí)際工作中最常用的是像素值（px），不允許使用負(fù)值。同邊框相關(guān)屬性一樣，使用復(fù)合屬性padding定義內(nèi)邊距時(shí)，必須按照順時(shí)針順序，省略時(shí)采用值復(fù)制的原則，一個(gè)值為四條邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下。3163.外邊距屬性網(wǎng)頁(yè)是由多個(gè)盒子排列而成的，要想拉開(kāi)盒子與盒子之間的距離，合理地布局網(wǎng)頁(yè)，就要為盒子設(shè)置外邊距。所謂外邊距，指的是元素邊框與相鄰元素之間的距離。在CSS中，margin屬性用于設(shè)置外邊距，它是一個(gè)復(fù)合屬性，與內(nèi)邊距padding的用法類似，設(shè)置外邊距的具體方法如下。317margin-top：上外邊距。margin-right：右外邊距。margin-bottom：下外邊距。margin-left：左外邊距。margin：上外邊距右外邊距下外邊距左外邊距。margin相關(guān)屬性的值以及復(fù)合屬性margin取1～4個(gè)值的情況與padding相同。但是外邊距可以使用負(fù)值，使相鄰元素重疊。3184.背景屬性網(wǎng)頁(yè)能通過(guò)背景圖像給讀者留下深刻的印象，如節(jié)日主題的網(wǎng)頁(yè)一般采用喜慶祥和的圖片來(lái)突出效果，所以在網(wǎng)頁(yè)設(shè)計(jì)中合理控制背景顏色和背景圖像至關(guān)重要。下面將詳細(xì)介紹用CSS控制背景樣式的方法。（1）設(shè)置背景顏色設(shè)置背景顏色需要通過(guò)background-color屬性來(lái)實(shí)現(xiàn)，關(guān)于該屬性在前面的項(xiàng)目中已經(jīng)做過(guò)詳細(xì)講解，這里不再做具體介紹。（2）設(shè)置背景圖像在CSS中，背景不僅可以設(shè)置為某種顏色，還可以將圖像作為網(wǎng)頁(yè)元素的背景，通過(guò)background-image屬性設(shè)置來(lái)實(shí)現(xiàn)。319（3）設(shè)置背景圖像平鋪默認(rèn)情況下，背景圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪，如果不希望背景圖像平鋪，或者只想沿著一個(gè)方向平鋪，可以通過(guò)background-repeat屬性來(lái)控制，該屬性的取值如下。Repeat：沿水平和豎直兩個(gè)方向平鋪（默認(rèn)值）。no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）。repeat-x：只沿水平方向平鋪。repeat-y：只沿豎直方向平鋪。320（4）設(shè)置背景圖像的不平鋪如果將背景圖像的平鋪屬性background-repeat定義為no-repeat，圖像將以不平鋪的方式顯示在body標(biāo)簽的左上角，代碼如圖所示。設(shè)置背景圖像不平鋪的代碼321（5）設(shè)置背景圖像的位置如果想改變背景圖像顯示的位置，就需要對(duì)另一個(gè)CSS屬性background-position進(jìn)行設(shè)置。background-position屬性的取值有多種，具體如下。1）使用不同單位（最常用的是像素px）的數(shù)值：直接設(shè)置圖像左上角在元素中的坐標(biāo)，例如“background-position:20px20px;”。2）使用預(yù)定義的關(guān)鍵字：指定背景圖像在元素中的對(duì)齊方式。3）使用百分比：按背景圖像和元素的指定點(diǎn)對(duì)齊。3225.盒子的寬與高網(wǎng)頁(yè)是由多個(gè)盒子排列而成的，每個(gè)盒子都有固定的大小。在CSS中使用寬度屬性width和高度屬性height可以對(duì)盒子的大小進(jìn)行控制。width和height的屬性值可以為不同單位的數(shù)值或相對(duì)于父元素的百分比。實(shí)際工作中，最常用的是像素值。制作登錄網(wǎng)頁(yè)任務(wù)2

323●1.熟悉元素的定位模式和邊偏移模式。●2.掌握靜態(tài)定位的用法?！?.掌握相對(duì)定位的用法。●4.掌握絕對(duì)定位的用法。●5.掌握固定定位的用法?！?.掌握行元素和塊元素之間的轉(zhuǎn)換方法。324本任務(wù)使用CSS定位對(duì)網(wǎng)頁(yè)中的“注冊(cè)”按鈕和“忘記密碼”超鏈接進(jìn)行了精確定位，制作完成的繽購(gòu)樂(lè)食電子商務(wù)網(wǎng)站登錄網(wǎng)頁(yè)如圖所示。325繽購(gòu)樂(lè)食電子商務(wù)網(wǎng)站登錄網(wǎng)頁(yè)326步驟一：由于本任務(wù)所制作的繽購(gòu)樂(lè)食電子商務(wù)網(wǎng)站登錄網(wǎng)頁(yè)與任務(wù)1中繽購(gòu)樂(lè)食電子商務(wù)網(wǎng)站注冊(cè)網(wǎng)頁(yè)的樣式相似，故把任務(wù)1中的代碼移植過(guò)來(lái)進(jìn)行修改。首先把“手機(jī)號(hào)注冊(cè)”改為“登錄商城”，并且在后面加上一個(gè)“注冊(cè)”按鈕。然后把input標(biāo)簽減少到兩個(gè)，并修改其中的圖標(biāo)與文字信息。最后把checkbox復(fù)選框后面的內(nèi)容改為“記住密碼”，并在其后加上一個(gè)“忘記密碼”超鏈接。修改后的代碼如圖所示。327登錄商城328未加定位相關(guān)CSS代碼的原表單效果如圖所示。未加定位相關(guān)CSS代碼的原表單效果329步驟二：通過(guò)圖可以看到，“注冊(cè)”按鈕沒(méi)有顯示按鈕效果，且位置不對(duì)。使用絕對(duì)定位后的CSS代碼330設(shè)置好定位相關(guān)代碼之后，運(yùn)行代碼，定位后的登錄表單效果如圖所示。定位后的登錄表單效果331步驟三：步驟二已完成登錄網(wǎng)頁(yè)的內(nèi)容，想要實(shí)現(xiàn)注冊(cè)網(wǎng)頁(yè)與登錄網(wǎng)頁(yè)之間的跳轉(zhuǎn)，有兩種很好的跳轉(zhuǎn)方式：一是在表單form標(biāo)簽的屬性action里面設(shè)置跳轉(zhuǎn)目標(biāo)網(wǎng)頁(yè)地址；二是在a標(biāo)簽的href屬性里面設(shè)置跳轉(zhuǎn)目標(biāo)網(wǎng)頁(yè)地址?，F(xiàn)在要實(shí)現(xiàn)在注冊(cè)網(wǎng)頁(yè)單擊“注冊(cè)”按鈕跳轉(zhuǎn)到登錄網(wǎng)頁(yè)，采用第一種跳轉(zhuǎn)方式；在登錄網(wǎng)頁(yè)單擊“登錄”按鈕跳轉(zhuǎn)到注冊(cè)網(wǎng)頁(yè)，采用第二種跳轉(zhuǎn)方式，具體操作如下。332注冊(cè)網(wǎng)頁(yè)333登錄網(wǎng)頁(yè)334在注冊(cè)網(wǎng)頁(yè)上設(shè)置跳轉(zhuǎn)代碼，如圖所示。在登錄網(wǎng)頁(yè)上設(shè)置跳轉(zhuǎn)代碼，如圖所示。這樣設(shè)置好后，兩個(gè)網(wǎng)頁(yè)之間就可以進(jìn)行跳轉(zhuǎn)了。注冊(cè)網(wǎng)頁(yè)上的跳轉(zhuǎn)登錄網(wǎng)頁(yè)上的跳轉(zhuǎn)335一、元素的定位屬性元素的定位屬性主要包括定位模式和邊偏移兩部分。1.定位模式在CSS中，position屬性用于定義元素的定位模式，其基本語(yǔ)法格式如下。336position屬性值及含義其中，position屬性值有static、relative、absolute、?xed，具體見(jiàn)表。337從表中可以看出，元素的定位主要分為四類，下面針對(duì)每一種定位方式進(jìn)行詳細(xì)講解。（1）靜態(tài)定位當(dāng)用于定位的元素的position屬性值為static時(shí)，稱此定位模式為靜態(tài)定位，元素所在的位置也就是在文檔流中的位置。（2）相對(duì)定位當(dāng)用于定位的元素的position屬性值為relative時(shí)，稱此定位模式為相對(duì)定位。338（3）絕對(duì)定位當(dāng)用于定位的元素的position屬性值為absolute時(shí)，稱此定位模式為絕對(duì)定位。絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)定位、固定定位或相對(duì)定位）的父元素進(jìn)行定位，若所有元素都沒(méi)有定位，則依據(jù)根元素body（瀏覽器窗口）進(jìn)行定位。339（4）固定定位當(dāng)網(wǎng)頁(yè)元素的position屬性值為?xed時(shí)，稱此定位模式為固定定位。固定定位的元素特性如下。1）固定定位是相對(duì)于“當(dāng)前瀏覽器窗口”來(lái)進(jìn)行的定位。2）固定定位元素不再占空間，層級(jí)要高于普通元素，跟“浮動(dòng)”很像。3）行內(nèi)元素使用?xed定位，將轉(zhuǎn)成“塊元素”。4）如果只指定了?xed定位屬性，并沒(méi)有設(shè)置偏移量，則“原地不動(dòng)”。340邊偏移屬性及描述2.邊偏移定位模式僅用于定義元素以哪種方式定位，并不能確定元素的具體位置。在CSS中，通過(guò)邊偏移屬性top、bottom、left或right來(lái)精確定義定位元素的位置，具體見(jiàn)表。341二、元素的轉(zhuǎn)換html中的網(wǎng)頁(yè)元素被定義成不同的類型，大致分為塊元素和行內(nèi)元素兩大類，也稱塊標(biāo)簽和行內(nèi)標(biāo)簽。通過(guò)學(xué)習(xí)它們的特性，可以為使用CSS設(shè)置樣式和布局打下基礎(chǔ)。1.塊元素塊元素在頁(yè)面中以區(qū)域塊的形式出現(xiàn)，其特點(diǎn)有：獨(dú)自占據(jù)一整行或多行；可對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性；可以容納行內(nèi)元素和其他塊元素。常見(jiàn)的塊元素有h1～h6、p、div、ul、ol、li等，其中div標(biāo)簽是最典型的塊元素。3422.行內(nèi)元素行內(nèi)元素也稱內(nèi)聯(lián)元素或內(nèi)嵌元素，其特點(diǎn)有：和其他行內(nèi)元素都在同一行上顯示，不會(huì)獨(dú)自換行；寬度就是它的文字或圖片的寬度，默認(rèn)不可改變；設(shè)置