DIV+CSS網(wǎng)頁(yè)布局技巧研究

劉海霞

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

關(guān)鍵詞： CSS； 網(wǎng)頁(yè)布局； float屬性； position屬性； 盒子模型

中圖分類號(hào)：TP391 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：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標(biāo)準(zhǔn)網(wǎng)頁(yè)由結(jié)構(gòu)、表現(xiàn)和行為三部分組成。結(jié)構(gòu)用來(lái)對(duì)網(wǎng)頁(yè)中的信息進(jìn)行整理，常用的技術(shù)有HTML、XHTML和XML；表現(xiàn)用于對(duì)已經(jīng)結(jié)構(gòu)化的信息進(jìn)行顯示上的修飾，包括版式、顏色、大小等，主要技術(shù)是CSS；行為是指對(duì)整個(gè)文檔內(nèi)部的一個(gè)模型進(jìn)行定義及交互行為的編寫(xiě)，主要技術(shù)有DOM（文檔對(duì)象模型）、ECMAScript（JavaScript腳本語(yǔ)言）等?；赪EB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)所研究的主要問(wèn)題是如何使網(wǎng)頁(yè)的內(nèi)容與表現(xiàn)分離，這樣做的好處有：網(wǎng)站開(kāi)發(fā)效率高，維護(hù)簡(jiǎn)單，信息可以跨平臺(tái)使用，服務(wù)器成本降低，網(wǎng)頁(yè)解析速度加快，而且可以提供良好的用戶體驗(yàn)。CSS從真正意義上實(shí)現(xiàn)了網(wǎng)頁(yè)內(nèi)容與它的外觀相分離。

DIV+CSS是目前主流的網(wǎng)頁(yè)布局技術(shù)，本文就使用DIV+CSS進(jìn)行布局的常用方法及技巧進(jìn)行分析、總結(jié)，以期對(duì)網(wǎng)頁(yè)制作者有所幫助。

1 常用的布局形式

1.1 固定寬度的多列布局

2 常用屬性的使用技巧

2.1 盒子模型

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

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

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

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

2.2 position屬性

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

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

⑴ 如果沒(méi)有TRBL，以父級(jí)的左上角為原點(diǎn)定位；在沒(méi)有父級(jí)的時(shí)候，是參照瀏覽器左上角；如果在沒(méi)有父級(jí)元素的情況下，存在文本，則以它前面的最后一個(gè)文字的右上角為原點(diǎn)進(jìn)行定位但是不斷開(kāi)文字，覆蓋于上方。

⑵ 如果設(shè)定TRBL，并且父級(jí)沒(méi)有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定。

⑶ 如果設(shè)定TRBL，并且父級(jí)已經(jīng)設(shè)定position屬性（無(wú)論是absolute還是relative），則以父級(jí)的左上角為原點(diǎn)進(jìn)行定位，位置由TRBL決定。即使父級(jí)有padding屬性，對(duì)其也不起作用，也就是：它只堅(jiān)持一點(diǎn)，即以父級(jí)左上角為原點(diǎn)進(jìn)行定位，父級(jí)的padding對(duì)其根本沒(méi)有影響。

以上三點(diǎn)可以歸納為：若想把一個(gè)定位屬性為absolute的元素定位于其父級(jí)元素內(nèi)，只有滿足兩個(gè)條件：第一，設(shè)定TRBL；第二，父級(jí)設(shè)定position屬性。

relative相對(duì)定位，其默認(rèn)參照父級(jí)的原點(diǎn)為原點(diǎn)，無(wú)父級(jí)則以文本流的順序在上一個(gè)元素的底部為原點(diǎn)，配合TRBL進(jìn)行定位，當(dāng)父級(jí)內(nèi)有padding等CSS屬性時(shí)，當(dāng)前級(jí)的原點(diǎn)則參照父級(jí)內(nèi)容區(qū)的原點(diǎn)進(jìn)行定位，有以下屬性。

⑴ 如果沒(méi)有TRBL，以父級(jí)的左上角，在沒(méi)有父級(jí)的時(shí)候，參照瀏覽器左上角，如果在沒(méi)有父級(jí)元素的情況下，存在文本，則以文本的底部為原點(diǎn)進(jìn)行定位并將文字?jǐn)嚅_(kāi)。

⑵ 如果設(shè)定TRBL，并且父級(jí)沒(méi)有設(shè)定position屬性，仍然以父級(jí)的左上角為原點(diǎn)進(jìn)行定位。

⑶ 如果設(shè)定TRBL，并且父級(jí)設(shè)定position屬性（無(wú)論是absolute還是relative），則以父級(jí)的左上角為原點(diǎn)進(jìn)行定位，位置由TRBL決定。如果父級(jí)有padding屬性，那么就以內(nèi)容區(qū)域的左上角為原點(diǎn)進(jìn)行定位。

以上三點(diǎn)可以歸納為：無(wú)論父級(jí)存在與否，無(wú)論有沒(méi)有TRBL，均是以父級(jí)的左上角進(jìn)行定位，但是父級(jí)的padding屬性會(huì)對(duì)其產(chǎn)生影響。

由此可見(jiàn)，只要將我們平時(shí)布局頁(yè)面的div的CSS屬性中加上position：relative，就不只是用float布局頁(yè)面了，還可以用TRBL布局頁(yè)面。但是position屬性為absolute不可以用來(lái)布局頁(yè)面，因?yàn)槿绻脕?lái)布局的話，所有的DIV都相對(duì)于瀏覽器的左上角定位了，所以只能用于將某個(gè)元素定位于屬性為absolute的元素的內(nèi)部某個(gè)位置。這樣我們可以得出以下結(jié)論：如果用position來(lái)布局頁(yè)面，父級(jí)元素的position屬性必須為relative，而定位于父級(jí)內(nèi)部某個(gè)位置的元素，最好用absolute，因?yàn)樗皇芨讣?jí)元素的padding的屬性影響。

2.3 float屬性

float屬性有4個(gè)可選用的值：left、right、none和inherit，left和right分別是向左和向右浮動(dòng)，none（默認(rèn)）使元素不浮動(dòng)，inherit將會(huì)從父級(jí)元素獲取float值。使用float可以制作文字環(huán)繞的效果，更多的是用于創(chuàng)建網(wǎng)頁(yè)布局，這點(diǎn)在前面已經(jīng)詳細(xì)討論過(guò)。

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

⑴ 使用空標(biāo)簽清除浮動(dòng)?？諛?biāo)簽常用div或者p標(biāo)簽，但理論上可以是任何標(biāo)簽。這種方式是在需要清除浮動(dòng)的父級(jí)元素內(nèi)部的所有浮動(dòng)元素后添加這樣一個(gè)標(biāo)簽清除浮動(dòng)，并為其定義CSS代碼：clear：both。此方法的弊端在于，增加了無(wú)意義的結(jié)構(gòu)元素。

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

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

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

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

參考文獻(xiàn)：

[1] 湯文飛.Dreamweaver CS4網(wǎng)站設(shè)計(jì)實(shí)例教程[M].機(jī)械工業(yè)出版社，

2010.

[2] 麥小霞.基于DIV+CSS網(wǎng)頁(yè)布局技術(shù)的應(yīng)用研究[J].計(jì)算機(jī)時(shí)代，

2014.5.

[3] 范唐鶴.用DIV+CSS技術(shù)實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)[J].電子技術(shù)與軟件工程，

2014.5.

[4] 丁海燕.網(wǎng)頁(yè)設(shè)計(jì)布局方法的探討[J].云南大學(xué)學(xué)報(bào)（自然科學(xué)版），

2013.S1.

[5] 何勇.Web設(shè)計(jì)中CSS技術(shù)的應(yīng)用研究[J].數(shù)字技術(shù)與應(yīng)用，

2013.1.