黃雪琴　耿強

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

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

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2014）04-0747-02

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

1 CSS盒子模型

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

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

2 CSS盒子模型定位方法

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

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

2.1 float定位

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

2.2 position定位

position定位和float一樣，也是CSS排版中非常重要的概念。position定位就是指定塊級元素的位置，即塊級元素相對于其父塊的位置或相對于自身在標準流的位置。

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

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

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

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

2.2.1 relative定位

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

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

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

2.2.2 absolute定位

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

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

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

3 結(jié)束語

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

參考文獻：

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

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

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