曹磊

摘要：利用DIV+CSS的方式進行網頁布局是現代網頁設計的常用方式，CSS定位是其應用的難點?？蚰Ｐ褪荂SS的基礎，以此為基礎詳細介紹了利用CSS進行網頁布局定位的四種方式和三種定位機制。通過討論父級框元素定位方式和定位機制的不同變化，闡述了CSS中position屬性與float屬性的組合使用時對網頁布局定位的影響。

關鍵詞：DIV+CSS；框模型；CSS定位；網頁布局

中圖分類號：T P 393.092文獻標識碼：A 文章編號：1009-3044（2012）30-7339-03

1 概述

DIV+CSS一種網頁的布局方法，這種方法有別于傳統的HTML網頁設計語言中的表格（table）布局方式，這種方式可實現網頁頁面內容與表現相分離。XHTML是The Extensible HyperText Markup Language（可擴展超文本標識語言）的縮寫。XHTML基于可擴展標記語言（XML），是一種在HTML 基礎上優(yōu)化和改進的的新語言，目的是基于XML應用與強大的數據轉換能力，適應未來網絡應用更多的需求。在XHTML網站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現各種定位。所以熟練掌握DIV+CSS定位方式是現代網頁布局設計必不可缺的技能。CSS有四種定位方式，這四種方式之間又可以組合從而呈現更多樣的網頁布局。為了理清這些CSS的定位方法，并且能夠實際應用這些定位方法，文章對CSS的定位方式和定位機制進行了一些較為全面的分析。

2 框模型

框模型是DIV+CSS布局的基礎概念之一，它規(guī)定元素如何顯示以及（在某種程度上）如何相互交互。頁面上的每個元素被看作一個矩形框，這個框由元素的內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成（見圖1）。 填充出現在內容區(qū)域的周圍。如果在元素上添加背景，那么背景會應用于由內容和填充組成的區(qū)域。因此，常常使用填充在內容周圍創(chuàng)建一個隔離帶，使內容不會與背景混在一起。添加邊框會在填充的區(qū)域外邊加一條線。這些線可以有多種樣式，比如實線、虛線或點線。在邊框外邊是空白邊，空白邊是透明的，一般使用它控制元素之間的間隔。

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容。塊級框從上到下一個接一個地排列，就是說塊級框會默認換行，框之間的垂直距離是由框的垂直外邊距計算出來。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。行內框在一行中水平排列，就是說行內框不自動換行除非人為添加換行或者行內框到達其父框元素的邊緣才會換行?？梢允褂盟絻冗吘?、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高（height）可以增加這個框的高度。

元素框的類型可以使用 display 屬性改變。這意味著，通過將 display 屬性設置為 block，可以讓行內元素（比如 元素）表現得像塊級元素一樣。將display屬性設置為inline，可以讓塊級元素表現得像行框一樣。還可以通過把 display 設置為 none，讓生成的元素不可見。這樣的話，該框及其所有內容就不再顯示，且不占用文檔流中的空間。

3 CSS 定位

CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成通常需要使用多個表格才能完成的任務。定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大。

CSS 有三種基本的定位機制：文檔流（普通流）、浮動和絕對定位。

除非專門指定，否則所有框都在文檔流中定位，也就是說，文檔流中的元素的位置由元素在 X（HTML） 中的位置決定。而絕對定位和浮動則是分別通過position和float屬性實現的。對這兩個屬性的不同設置，就會引起div元素的定位機制的變化，這是網頁設計者需要關注的地方。

3.1 CSS position 屬性

通過使用 position 屬性，可以選擇 4 種不同類型的定位static 、relative 、absolute 、fixed。這四種不同的定位方式同時影響了其不同的定位機制。

3.1.1 static靜態(tài)定位

這個是默認值，其實此時元素框是沒有定位的，因為top， bottom， left， right的設置不起作用。DIV為塊級框，在這種情況下，在文檔流中從上至下排列，如果是span元素，其默認為行框，在文檔流中從左至右排列。

3.1.2 relative 相對定位

元素框相對于自己在文檔流的原位置偏移某個距離。元素框仍保持其未定位前的形狀，它原本所占的空間仍然保留，但產生的新位置并不占用文檔流的空間。生成相對定位的元素，經由top，bottom，left，right的設置相對于其原位置進行定位。

如圖2三個DIV框默認情況下排列應該是從上至下排列，框2元素設置為相對定位后，即CSS樣式如下：

框2元素相對自己本來的位置（虛線部分）向左偏移了30像素，下偏移了20像素，但其原來的位置仍然是存在的并且該元素的新位置并不影響其它元素的位置（即其它元素當做該新位置不存在一樣）。如果有多個元素使用相對定位切相互重疊則可經z-index設置進行層疊分級。使用相對定位時要小心，否則容易將頁面弄得非常亂。相對定位的關鍵在于定位了的元素的位置是相對于它原本位置進行定位。如果你停止使用相對定位，則元素框的顯示位置將恢復正常。

3.1.3 absolute 絕對定位

定位為absolute的元素（CSS 樣式中position值為aboslute）脫離普通文檔流（如圖3，框2元素脫離文檔流），并相對于其已定位的第一個祖先元素定位。元素原先在普通文檔流中所占的空間會關閉，就好像元素原來不存在一樣。不論原來它在正常流中生成何種類型的框，元素定位后生成一個塊級框。 relative與absolute的差別：第一，相對定位的元素在普通文檔流中的位置保留，而絕對定位的元素在普通文檔流中的位置會被刪除。第二，relative定位的層是相對于自身，無論其父元素是何種定位方式，而absolute的定位是相對于最近的已定位祖先元素（已定位可以理解為position屬性不為static），如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（（document window）文檔窗口，注意既不是body元素也不是瀏覽器）。

3.1.4 fixed 固定定位

Position屬性為fixed的元素定位方式同absolute類似，但它的的定位是相對于WEB瀏覽器。在WEB瀏覽器中，元素在文檔滾動時，fixed定位元素不會再隨著文檔滾動而是相對于瀏覽器停在一個固的定位置。通過它可以讓HTML元素脫離文檔流固定在瀏覽器的某個位置。在 IE7，E8、Firefox、Opera、Google等瀏覽器中使用都沒有問題，唯獨低版本的IE中，這個屬性無效。不過隨著舊版本的淘汰，也沒有必要在這個兼容性問題上花太多的時間。

3.2 float浮動屬性

CSS1 中首次提出了浮動，它以Netscape 在 Web 發(fā)展初期增加的一個功能為基礎。浮動不完全是定位，不過，它也不是正常文檔流布局。float屬性有四個可用的值：Left 和Right 分別浮動元素到各自的方向，None （默認的） 使元素不浮動，Inherit 將會從父級元素獲取float值。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。元素設置成浮動以后，會生成一個塊級元素，而不論它本身是何種元素。該浮動元素將脫離文檔流（想象成其漂浮在文檔流之上），它將不再獨自占據一行。浮動元素可以設置向左或向右移動，直到它的外邊緣碰到包含它的框或另一個浮動塊的邊框時自動換行。

4 幾種定位方式的混合使用

4.1 父元素和子元素使用不同定位方式的組 合

在以上文章談到的定位方式中，除了 position 屬性為fixed的元素定位是相對于瀏覽器定位，其它的定位方式都是相對于其父元素或者祖先元素（absolute）進行定位。本節(jié)將對父元素對子元素的定位影響進行簡單闡述。以下幾種方式都是子元素可以參照父元素進行定位的情況。

4.1.1 父元素position屬性為默認值（static）

此時不管父元素是在普通文檔流中還是處在浮動狀態(tài)（float屬性不為none）下，其子元素的position屬性可以是static，relative，或者是浮動元素。

4.1.2 父元素position屬性為relative

此時不管父元素是在普通文檔流中還是處在浮動狀態(tài)下，其子元素的position屬性可以是static，relative，absolute或者是浮動元素。

4.1.3 父元素position屬性為或absolute或fixed

此時父元素是絕對定位，其float屬性是無效的。但子元素的position屬性可以是static，relative，absolute或者是浮動元素。

4.2 同級元素間的定位

同級元素間使用不同的定位方式時，可以使用left，top，right，bottom，margin等屬性來調整他們之間的位置，如果有重疊的元素，z-index可以調整重疊元素的重疊層次，但該屬性僅能在已定位的元素上奏效，即當元素的position屬性為static時z-index屬性是無效的。

5 總結

在DIV+CSS網頁布局方式中元素定位是比較晦澀的方面，即使有經驗的CSS開發(fā)人員也會遇到一些問題。文章試圖針對CSS定位的三種基本機制和四種定位方式進行一些深入的分析，使DIV+CSS網頁布局中的定位技術更容易被理解和應用。

參考文獻：

[1] Andy Budd，Cameron Moll，Simon Collison.精通CSS：高級Web標準解決方案[M].陳建甌，譯.北京：人民郵電出版社，2006：27-36.

[2] 張瑞，楚書來.CSS盒子模型在網頁布局中的應用研究[J].計算機光盤軟件與應用，2012（6）：133-134.

[3] 趙清華，林學華.基于DIV+CSS的網頁布局技術應用研究[J].現代計算機：專業(yè)版，2010（5）：140-142.