WEB入門.六 盒子模型
學(xué)習(xí)內(nèi)容
CSS盒子模型
盒子之間的關(guān)系
頁面元素定位
能力目標(biāo)
理解盒子模型
理解內(nèi)容與表現(xiàn)分離的優(yōu)點(diǎn)
理解并掌握盒子之間的關(guān)系
理解并掌握絕對(duì)定位與相對(duì)定位的用法
本章簡(jiǎn)介
上一章節(jié)中已經(jīng)講解了頁面布局的基礎(chǔ)知識(shí)，了解了設(shè)計(jì)一個(gè)標(biāo)準(zhǔn)的 XHTML頁面需要遵循的規(guī)范，例如：標(biāo)簽需要關(guān)閉、使用 id 屬性代替 name 屬性、屬性值需要使用雙引號(hào)等。另外，上一章內(nèi)容講解了 XHTML 基本標(biāo)簽的用法。
頁面是 Web 站點(diǎn)與用戶交互的接口，它能夠引起用戶對(duì) Web 的興趣并且加入自己電腦的夾。為達(dá)到這一目的，頁面設(shè)計(jì)需要注意兩點(diǎn)：頁面布局設(shè)計(jì)和頁面的內(nèi)容設(shè)計(jì)。頁面布局的效果將直接影響用戶瀏覽的視覺體驗(yàn)。
本章內(nèi)容將詳細(xì)講解布局設(shè)計(jì)的基本原理，包括布局設(shè)計(jì)模型、背景特效、元素定位、導(dǎo)航欄等。其次，本章內(nèi)容涉及網(wǎng)頁布局設(shè)計(jì)的基礎(chǔ)模型——盒子模型。盒子模型的概念來源于生活中的物品裝箱原理，可以通過盒子模型劃分頁面中的板塊，重點(diǎn)在于講解盒子模型中常用的定位方式：絕對(duì)定位、相對(duì)定位、靜態(tài)定位、浮動(dòng)定位。最后，本章將講解頁面中如果存在多個(gè)盒子，應(yīng)該如何理解它們之間的關(guān)系。
核心技能部分
2.1 盒子模型概述
傳統(tǒng)的網(wǎng)頁一般采用table布局，將內(nèi)容與頁面效果混雜在一起，導(dǎo)致頁面代碼冗余，布局結(jié)構(gòu)不清晰，不易于網(wǎng)站版面修改。基于div + css 布局技術(shù)的盒子模型的出現(xiàn)替代了傳統(tǒng)的 table表格嵌套，它不但彌補(bǔ)了table布局的缺陷，而且在頁面加載速度和搜索引擎的支持方面有顯著的改善。
2.1.1????? 內(nèi)容與表現(xiàn)的分離
1.??????什么是內(nèi)容與表現(xiàn)
網(wǎng)頁設(shè)計(jì)的一個(gè)重要概念是保證頁面內(nèi)容和表現(xiàn)分離。其中內(nèi)容是頁面實(shí)際要傳達(dá)給用戶的信息 (包含數(shù)據(jù)、文檔、圖片等)，指純粹的數(shù)據(jù)信息，不包含任何輔助信息 (如顏色、字體大小、背景等)；表現(xiàn)是指內(nèi)容的修飾性部分，例如標(biāo)題字體的大小、背景、顏色等。
2.??????如何實(shí)現(xiàn)內(nèi)容與表現(xiàn)分離
假設(shè)p是塊狀標(biāo)簽，現(xiàn)在須使某段落右縮進(jìn)2個(gè)字高的大小，很多人通常在段落前加空格，而后不斷重復(fù)該動(dòng)作。如果給p標(biāo)簽指定一個(gè)CSS樣式：p {text-indent：2em;}，在沒有外加任何表現(xiàn)控制標(biāo)簽的情況下，body內(nèi)容部分顯示如下：
如果該段落另需修飾字體、字號(hào)、背景、行距等，只需要將對(duì)應(yīng) CSS樣式屬性加進(jìn)p樣式中。
以上代碼將內(nèi)容和表現(xiàn)混合在一起。DIV + CSS設(shè)計(jì)布局的思路遵循內(nèi)容與表現(xiàn)分離的原則。
實(shí)現(xiàn)步驟如下：
（1）???????使用DIV定義語義結(jié)構(gòu)，其中只添加網(wǎng)頁的內(nèi)容，如文字、圖片等。
（2）???????使用 CSS美化網(wǎng)頁，如加入背景、線條邊框、對(duì)齊屬性等。
3.??????內(nèi)容與表現(xiàn)分離的優(yōu)勢(shì)
（1）???????網(wǎng)頁文件代碼量小，可被快速下載。
（2）???????數(shù)據(jù)顯示多樣化，不同的樣式表適應(yīng)不同的設(shè)備，其內(nèi)容與設(shè)備無關(guān)。
（3）???????整個(gè)站點(diǎn)的視覺效果一致，修改樣式表即可輕松實(shí)現(xiàn)網(wǎng)站改版。
（4）???????頁面結(jié)構(gòu)簡(jiǎn)潔，數(shù)據(jù)的集成、更新和處理更為方便靈活。
（5）???????便于搜索引擎的搜索。
2.1.2????? 盒子的結(jié)構(gòu)
在CSS中，所有的網(wǎng)頁元素都被看作一個(gè)矩形框，或者是元素框。盒子模型描述了元素在網(wǎng)頁布局中所占的空間和位置。現(xiàn)實(shí)生活中的盒子是一個(gè)常見物品，如我們到商場(chǎng)買禮品，售貨員會(huì)先用一個(gè)箱子將禮品裝好。為防止禮品在運(yùn)輸過程中損壞，再用一些泡沫型材料隔在禮品與箱子之間。這就是一個(gè)最典型的盒子，如圖 2.1.1 所示。
圖2.1.1??? 生活中的盒子
網(wǎng)頁設(shè)計(jì)將生活中裝箱子的做法抽象成頁面設(shè)計(jì)模型——盒子模型。在CSS 中，一個(gè)獨(dú)立的盒子模型由 content (內(nèi)容)、border (邊框)、padding (內(nèi)邊距)、margin (外邊距)四部分構(gòu)成，如圖 2.1.2所示。
圖2.1.2 ?盒子模型
盒子模型是CSS 中一個(gè)重要的概念，理解了盒子模型才能更好地排版。盒子模型分為 標(biāo)準(zhǔn)W3C盒子模型和IE 盒子模型兩種。
1.????????標(biāo)準(zhǔn)W3C盒子
標(biāo)準(zhǔn)W3C 盒子模型的范圍包括 margin、border、padding、content，且 content部分不包含 border和 padding，如圖 2.1.3所示。
圖2.1.3 標(biāo)準(zhǔn)W3C盒子
2.????????IE盒子
IE 盒子模型的范圍同樣包括margin、border、padding、content，它與標(biāo)準(zhǔn) W3C 盒子模型的區(qū)別在于，IE 盒子模型的 content部分包含了 border 和 padding，如圖 2.1.4所示。
2.1
一個(gè)盒子的 margin 為20px，border 為1px，padding 為 10px，content 的寬度為200px、高為 50px。
標(biāo)準(zhǔn)W3C 盒子模型，盒子需要占據(jù)的位置為：
寬：20*2 + 1*2 +10*2 + 200 = 262px
高：20*2 + 1*2 +10*2 + 50=112px;
盒子的實(shí)際大小為：
寬：1*2 + 10*2 + 200= 222px
高：1*2 + 10*2 + 50=72px;
IE盒子模型，盒子占據(jù)的位置為：
寬：20*2 + 200 =240px
高：20*2 + 50 =90px;
盒子的實(shí)際大小為：寬 200px、高 50px。
設(shè)計(jì)師設(shè)計(jì)頁面時(shí)，如果在頁面頂部沒有加 DOCTYPE 聲明，那么瀏覽器會(huì)根據(jù)自己的行為理解網(wǎng)頁，即 IE 瀏覽器會(huì)采用 IE 盒子模型解釋設(shè)計(jì)師的盒子。而 Firefox采用標(biāo)準(zhǔn) W3C 盒子模型解釋盒子，所以網(wǎng)頁在不同瀏覽器中的顯示效果不一致。反之，如果添加 DOCTYPE 聲明，那么所有瀏覽器都會(huì)采用標(biāo)準(zhǔn)W3C 盒子模型去解釋盒子，網(wǎng)頁在各瀏覽器中顯示效果將變得一致。
2.1.3????? 盒子之間的關(guān)系
在設(shè)計(jì)網(wǎng)頁時(shí)，如果只針對(duì)一個(gè)盒子，可以很輕松地運(yùn)用上述知識(shí)。但實(shí)際網(wǎng)頁設(shè)計(jì)中會(huì)遇到大量的盒子，所以只有理解盒子之間的關(guān)系才能適應(yīng)各種復(fù)雜的布局需求。
1.????????水平盒子
當(dāng)兩個(gè)盒子同行顯示時(shí)，其距離為 BOXI 的 margin-right和 BOX2 的 margin-left之和，如圖 2.1.5所示。
圖2.1.5??? 水平盒子的距離
2.????????垂直盒子
當(dāng)兩個(gè)盒子在垂直顯示時(shí)，其距離為 BOXI 的margin-bottom和 BOX2 的 margin-top 中較大者，而不是兩者之和。
2.2