黃雪琴　耿強(qiáng)

摘要：現(xiàn)今的網(wǎng)頁(yè)制作不僅要有完善的網(wǎng)頁(yè)功能，還要考慮良好的用戶體驗(yàn)。利用DIV+CSS來布局頁(yè)面已是網(wǎng)頁(yè)設(shè)計(jì)的主流，而CSS盒子模型的定位在其應(yīng)用中是一難點(diǎn)，該文從CSS盒子模型的幾種定位方法進(jìn)行解析，體現(xiàn)其特點(diǎn)。

關(guān)鍵詞：CSS盒子模型；float定位；relative定位； absolute定位

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）04-0747-02

CSS是一種叫做樣式表（stylesheet）的技術(shù)。也有人稱為層疊樣式表（Cascading Stylesheet）。盒子模型是CSS中的一個(gè)重要概念，雖然CSS中沒有盒子這個(gè)單獨(dú)的屬性對(duì)象，但它卻是CSS中無處不在的一個(gè)重要組成部分。CSS假定所有的HTML文檔元素都生成了一個(gè)描述該元素在HTML文檔布局中所占空間的矩形元素框（element box），可以形象地將其看作是一個(gè)盒子。CSS圍繞這些盒子產(chǎn)生了一種“盒子模型”概念，掌握盒子模型的原理和使用方法可以極大地豐富HTML元素的表現(xiàn)效果，同時(shí)對(duì)于整個(gè)HTML文檔的布局也會(huì)產(chǎn)生很大的幫助和促進(jìn)。

1 CSS盒子模型

圖1 CSS盒子模型基本結(jié)構(gòu)

CSS的盒子模型很簡(jiǎn)單的可以理解為一幅畫（如圖1），對(duì)于每幅畫（content）來說，都有一個(gè)畫框（border），每個(gè)畫框中畫和邊框之間一般都有間距（padding），將各幅畫掛到墻上，通常畫與畫之間也會(huì)有一些距離（margin）。在CSS中，一個(gè)盒子模型由內(nèi)之外有content（內(nèi)容），padding（填充）， border（邊框）和margin（邊界）這4個(gè)部分組成。

2 CSS盒子模型定位方法

定位的基本思想很簡(jiǎn)單，它允許定義元素相對(duì)于其正常位置（應(yīng)該出現(xiàn)的位置），或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的新位置。

CSS 有三種基本的定位機(jī)制：標(biāo)準(zhǔn)流、float定位和position定位。除非專門指定，否則所有元素都在標(biāo)準(zhǔn)流中定位。也就是說，標(biāo)準(zhǔn)流中的元素的位置由元素在 （X）HTML 中的位置決定。

2.1 float定位

CSS盒子模型的float屬性的值很簡(jiǎn)單，可以設(shè)置為left、right或者默認(rèn)值none。默認(rèn)的none值，也就是標(biāo)準(zhǔn)流通常的情況，一個(gè)元素在水平方向會(huì)自動(dòng)伸展，直到包含它的元素的邊界，而在豎直方向和兄弟元素依次排列，不能并排。當(dāng)對(duì)一個(gè)元素設(shè)置了left或right的浮動(dòng)后，元素的表現(xiàn)會(huì)有所不同，元素就會(huì)向其父元素的左側(cè)或右側(cè)靠近，同時(shí)如果沒有設(shè)置元素的height和width屬性，元素會(huì)根據(jù)盒子里面的內(nèi)容寬度來確定。另外當(dāng)浮動(dòng)到的位置不足夠元素的存放空間時(shí)，它會(huì)往下尋找，直到有足夠存放它的空間為止。

2.2 position定位

position定位和float一樣，也是CSS排版中非常重要的概念。position定位就是指定塊級(jí)元素的位置，即塊級(jí)元素相對(duì)于其父塊的位置或相對(duì)于自身在標(biāo)準(zhǔn)流的位置。

position屬性共有4個(gè)值，分別是static、absolute、relative和fixed，各屬性值描述如表1。

相對(duì)定位，盒子相對(duì)于它原來的在標(biāo)準(zhǔn)流或浮動(dòng)后的位置偏移指定的距離，盒子仍保持其未定位前的形狀，它原本所占的空間仍保留。＼&absolute＼&絕對(duì)定位，盒子的位置以它的包含框?yàn)榛鶞?zhǔn)偏移。絕對(duì)定位的盒子標(biāo)準(zhǔn)流完全脫離，就好像盒子原來不存在一樣。＼&fixed＼&固定定位。盒子的表現(xiàn)類似于absolute，只是以瀏覽器窗口或其他顯示設(shè)備的窗口為基準(zhǔn)進(jìn)行定位。＼&]

與position屬性配合使用的有top、left、right和bottom，這4個(gè)屬性只有當(dāng)position屬性設(shè)置為absolute、relative或fixed時(shí)才有效。而且，在position屬性取值不同時(shí)，它們的含義也不同。

在網(wǎng)頁(yè)布局設(shè)計(jì)中，使用比較多的還是relative定位和absolute定位。

2.2.1 relative定位

相對(duì)定位是一個(gè)非常容易掌握的概念。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”標(biāo)準(zhǔn)流中或浮動(dòng)后的位置進(jìn)行移動(dòng)。

例如，在一個(gè)頁(yè)面中設(shè)計(jì)三個(gè)大小為50px50px的DIV，都給三個(gè)子DIV設(shè)置float：left屬性，頁(yè)面顯示如圖2所示。給框2添加css類樣式block2，block2的樣式主要代碼為：

在IE瀏覽器中顯示的定位效果如圖3所示，從圖示中可以看到，對(duì)設(shè)置浮動(dòng)的框2進(jìn)行相對(duì)定位，相對(duì)的基準(zhǔn)依然是“原本的位置”，并且相對(duì)定位后的框2原本的位置并沒有被釋放。對(duì)于框1與框3，位置沒有任何的偏移。

2.2.2 absolute定位

絕對(duì)定位使元素的位置與標(biāo)準(zhǔn)流無關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同。絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊。

在圖3的效果基礎(chǔ)上，添加一個(gè)父DIV將原先三個(gè)DIV包含著，并將block2的樣式主要代碼修改為absolute的定位。

在IE瀏覽器中的顯示效果如圖4所示，這時(shí)父DIV的position屬性為默認(rèn)值，框2是以瀏覽器為基準(zhǔn)，處在距離瀏覽器頂端30px、距離瀏覽器左端20px處。如果將父DIV的position屬性設(shè)置為relative值，block2樣式保持不變，網(wǎng)頁(yè)在IE瀏覽器顯示效果如圖5所示。這時(shí)框2的絕對(duì)定位相對(duì)于圖4已有所偏移，框2此時(shí)不再以瀏覽器的框?yàn)榛鶞?zhǔn)定位，而是以與其最近的父框?yàn)榛鶞?zhǔn)進(jìn)行定位。如果將父框position的relative定位屬性消除，此時(shí)框2再次與瀏覽器基準(zhǔn)定位。

3 結(jié)束語

在實(shí)際的網(wǎng)頁(yè)布局設(shè)計(jì)中，一般使用多種定位方法相結(jié)合，掌握好CSS盒子的對(duì)定位方法，才能夠靈活的對(duì)頁(yè)面元素進(jìn)行布局，DIV+CSS靈活的布局設(shè)計(jì)技術(shù)能夠滿根據(jù)用戶的瀏覽器設(shè)備自動(dòng)布局，提高用戶友好性。同時(shí)，利用DIV+CSS可以將頁(yè)面顯示與內(nèi)容分開，使頁(yè)面代碼精簡(jiǎn)，用戶在瀏覽頁(yè)面時(shí)載入頁(yè)面速度加快，更可以提供搜索引擎的搜索效率。

參考文獻(xiàn)：

[1] 謝曉丹.深入理解CSS盒子模型[J].福建電腦，2011（7）：91-92.

[2] 溫謙.CSS設(shè)計(jì)徹底研究[M].北京：人民郵電出版社，2008.

[3] 曾順.精通CSS+DIV網(wǎng)頁(yè)樣式與布局[M].北京：人民郵電出版社，2007.