DIV+CSS網頁布局技巧研究

劉海霞

摘 要： 分析并歸納了應用DIV+CSS進行布局的常用方法及技巧，提出常用的六種網頁布局形式，分別是：固定寬度的多列布局，完全按百分比布局，左側按百分比變動、右側固定寬度布局，右側按百分比變動、左側固定寬度布局，兩側按百分比變動、中間固定寬度布局和中間按百分比變動、兩側固定寬度布局。對盒子模型中的填充、邊框和邊界進行深入分析，對position屬性和float屬性使用技巧進行總結，以期對網頁制作者有所幫助。

關鍵詞： CSS； 網頁布局； float屬性； position屬性； 盒子模型

中圖分類號：TP391 文獻標志碼：A 文章編號：1006-8228（2015）03-14-04

Abstract： This paper analysis the commonly used methods and techniques in the DIV+CSS layout， presents six common forms of Web layout. And analysis of the padding， border and margin of the box model in-depth， the skills of using the position attributes and the float attributes are summarized in order to help Webpage maker.

Key words： CSS； Web layout； float attribute； position attribute； box model

0 引言

Web標準網頁由結構、表現和行為三部分組成。結構用來對網頁中的信息進行整理，常用的技術有HTML、XHTML和XML；表現用于對已經結構化的信息進行顯示上的修飾，包括版式、顏色、大小等，主要技術是CSS；行為是指對整個文檔內部的一個模型進行定義及交互行為的編寫，主要技術有DOM（文檔對象模型）、ECMAScript（JavaScript腳本語言）等?；赪EB標準的網站設計所研究的主要問題是如何使網頁的內容與表現分離，這樣做的好處有：網站開發效率高，維護簡單，信息可以跨平臺使用，服務器成本降低，網頁解析速度加快，而且可以提供良好的用戶體驗。CSS從真正意義上實現了網頁內容與它的外觀相分離。

DIV+CSS是目前主流的網頁布局技術，本文就使用DIV+CSS進行布局的常用方法及技巧進行分析、總結，以期對網頁制作者有所幫助。

1 常用的布局形式

1.1 固定寬度的多列布局

2 常用屬性的使用技巧

2.1 盒子模型

使用CSS布局網頁時一個很重要的概念就是盒子模型，只有很好地掌握盒子模型及每個元素的用法，才能真正地控制好頁面中的各個元素。所有網頁中的元素都可以看作是一個盒子，占據一定的頁面空間。一般來說，這些被占據的空間都要比單純的內容大。網頁由許多個盒子通過不同的排列方式（上下，并列，嵌套）堆積而成，這些盒子之間會互相影響，因此，既要理解盒子的內部結構，又要理解盒子之間的相互關系。其中有三個概念非常重要，即填充、邊框和邊界。盒子里面的內容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間的距離，稱為邊界（margin），默認情況下盒子的邊框是無，背景色是透明，所以，我們在默認情況下看不到盒子。

填充、邊框和邊界其屬性值可以簡寫，方法是按照規定的順序，給出2個、3個或4個屬性值，它們的含義將有所區別，具體含義如下：如果給出2個屬性值，前者表示上下邊框（填充或邊界）的屬性，后者表示左右邊框（填充或邊界）的屬性；如果給出3個屬性值，前者表示上邊框（填充或邊界）的屬性，中間的數值表示左右邊框（填充或邊界）的屬性，后者表示下邊框的屬性；如果給出4個屬性值，依次表示上（top）、右（right）、下（bottom）、左（left）邊框（填充或邊界）的屬性，即順時針排序。通常簡稱TRBL。

“標準文檔流”（Normal Document Stream），簡稱“標準流”，是指在不使用其他與排列和定位相關的特殊CSS規則時，各種元素的排列規則?！皦K級元素”（block level），即它們總是以一個塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。行內元素（inline），這種元素本身不占有獨立的區域，僅僅是在其他元素的基礎上指出了一定的范圍，如strong、a和span等標記。行內元素的盒子永遠只能在瀏覽器中得到一行高度的空間（行高由line-height屬性決定，如果沒設置該屬性，則是內容的默認高度），如果給它設置上下border，margin，padding等值，導致其盒子的高度超過行高，那么它的盒子上下部分將和其他元素的盒子重疊。因此，不推薦對行內元素直接設置盒子屬性，一般先設置行內元素以塊級元素顯示，再設置它的盒子屬性。通過display屬性可控制元素是以行內元素顯示或是以塊級元素顯示，或不顯示。

Display有4個值，分別為block、inline、none和list-item。block的特點是：總是在新行開始；高度，行高以及上下邊距都可控制；寬度缺省是它的容器的100%，除非用width設定一個寬度，div，p，h1，form， ul和li是block元素的例子。inline的特點是和其他元素都在一行上，高度，行高及上下邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。span，a，label，input，img，strong和em是inline元素的例子。在html中只有li元素默認是list-item類型，將元素設置為列表項元素后，將按列表元素顯示，再通過設置列表選項可使元素的左邊出現小黑點。當某個元素被設置成了none元素之后，瀏覽器會完全忽略掉這個元素，該元素將不會被顯示，也不會占據文檔中的位置。如title元素默認就是此類型。需要使用display屬性切換的情況有：讓一個inline元素從新行開始；讓塊元素和其他元素保持在一行上；控制inline元素的寬度；控制inline元素的高度（對導航條特別有用）；無須設定寬度即可為一個塊元素設定與文字同寬的背景色。

2.2 position屬性

position屬性有5個可選用的值，分別為：static，relative，absolute，fixed，inherit，其中“static”為默認值。當position的值為static或者沒有設置position屬性的時候，div的顯示方式為按文本流的順序從上至下，或者從左到右順序顯示。relative相對定位，元素將按照靜態定位時的位置進行調整，在靜態定位中分配給元素的空間仍然會分配給它，它兩邊的元素不會向它靠近來填充那個空間，但它們也不會從元素的新位置被擠走。absolute絕對定位，元素將按照包含它的元素的位置進行調整，比如它嵌套在另一個絕對定位的元素中，那么就相對于那個元素定位。fixed固定定位，元素將被設置在瀏覽器中一個固定位置，不會隨其他元素滾動。形象地說，上下拖動滾動條的時候，fixed的元素在屏幕上的位置不變。它的效果類似常見的浮動廣告，無論如何拖動瀏覽器的滾動條，浮動廣告始終懸浮在瀏覽器的某個位置。inherit繼承，與其他屬性的繼承一樣，是繼承父元素中的position值。

這里就relative和absolute進行詳細分析。如果用position來布局頁面，父級元素的position屬性必須為relative，而定位于父級內部某個位置的元素，最好用absolute。absolute絕對定位，其默認值參照瀏覽器的左上角，配合TRBL進行定位，有以下屬性。

⑴ 如果沒有TRBL，以父級的左上角為原點定位；在沒有父級的時候，是參照瀏覽器左上角；如果在沒有父級元素的情況下，存在文本，則以它前面的最后一個文字的右上角為原點進行定位但是不斷開文字，覆蓋于上方。

⑵ 如果設定TRBL，并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。

⑶ 如果設定TRBL，并且父級已經設定position屬性（無論是absolute還是relative），則以父級的左上角為原點進行定位，位置由TRBL決定。即使父級有padding屬性，對其也不起作用，也就是：它只堅持一點，即以父級左上角為原點進行定位，父級的padding對其根本沒有影響。

以上三點可以歸納為：若想把一個定位屬性為absolute的元素定位于其父級元素內，只有滿足兩個條件：第一，設定TRBL；第二，父級設定position屬性。

relative相對定位，其默認參照父級的原點為原點，無父級則以文本流的順序在上一個元素的底部為原點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原點則參照父級內容區的原點進行定位，有以下屬性。

⑴ 如果沒有TRBL，以父級的左上角，在沒有父級的時候，參照瀏覽器左上角，如果在沒有父級元素的情況下，存在文本，則以文本的底部為原點進行定位并將文字斷開。

⑵ 如果設定TRBL，并且父級沒有設定position屬性，仍然以父級的左上角為原點進行定位。

⑶ 如果設定TRBL，并且父級設定position屬性（無論是absolute還是relative），則以父級的左上角為原點進行定位，位置由TRBL決定。如果父級有padding屬性，那么就以內容區域的左上角為原點進行定位。

以上三點可以歸納為：無論父級存在與否，無論有沒有TRBL，均是以父級的左上角進行定位，但是父級的padding屬性會對其產生影響。

由此可見，只要將我們平時布局頁面的div的CSS屬性中加上position：relative，就不只是用float布局頁面了，還可以用TRBL布局頁面。但是position屬性為absolute不可以用來布局頁面，因為如果用來布局的話，所有的DIV都相對于瀏覽器的左上角定位了，所以只能用于將某個元素定位于屬性為absolute的元素的內部某個位置。這樣我們可以得出以下結論：如果用position來布局頁面，父級元素的position屬性必須為relative，而定位于父級內部某個位置的元素，最好用absolute，因為它不受父級元素的padding的屬性影響。

2.3 float屬性

float屬性有4個可選用的值：left、right、none和inherit，left和right分別是向左和向右浮動，none（默認）使元素不浮動，inherit將會從父級元素獲取float值。使用float可以制作文字環繞的效果，更多的是用于創建網頁布局，這點在前面已經詳細討論過。

經常和float屬性配合使用的還有clear屬性。clear用于控制浮動元素的后繼元素的行為。如果缺省，后繼元素將向上移動，以填補由于前面元素的浮動而空出的可用空間。clear屬性的值可以是left、right、both或none。規則是這樣的：如果一個盒子的clear屬性被設為“both”，那么該盒子的上邊距將始終處于前面的浮動盒子（如果存在的話）的下邊距之下。常用的清除浮動的方法有以下幾種。

⑴ 使用空標簽清除浮動。空標簽常用div或者p標簽，但理論上可以是任何標簽。這種方式是在需要清除浮動的父級元素內部的所有浮動元素后添加這樣一個標簽清除浮動，并為其定義CSS代碼：clear：both。此方法的弊端在于，增加了無意義的結構元素。

⑵ 使用overflow屬性。此方法有效地解決了通過空標簽清除浮動而不得不增加無意義代碼的弊端。使用該方法只需在需要清除浮動的元素中定義CSS屬性overflow：auto即可。

⑶ 使用after偽對象清除浮動。該方法只適用于非IE瀏覽器。使用中需注意兩點。一是該方法中必須為需要清除浮動元素的偽對象中設置height：0，否則該元素會比實際高出若干像素；二是content屬性是必須的，但其值可以為空。

以上三種方法中，第二種使用的比較多。

綜上所述，盒子模型是CSS控制網頁的重要概念，而在具體的網頁布局中，填充、邊框、邊界，位置、浮動等屬性的使用是非常靈活的，只有深入理解這些屬性的含義及使用方法，勤加練習，在實戰中總結使用技巧，不斷積累，才能不斷提升網頁制作水平。

參考文獻：

[1] 湯文飛.Dreamweaver CS4網站設計實例教程[M].機械工業出版社，

2010.

[2] 麥小霞.基于DIV+CSS網頁布局技術的應用研究[J].計算機時代，

2014.5.

[3] 范唐鶴.用DIV+CSS技術實現網頁設計[J].電子技術與軟件工程，

2014.5.

[4] 丁海燕.網頁設計布局方法的探討[J].云南大學學報（自然科學版），

2013.S1.

[5] 何勇.Web設計中CSS技術的應用研究[J].數字技術與應用，

2013.1.