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

劉海霞

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

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

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

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

1 常用的布局形式

1.1 固定寬度的多列布局

2 常用屬性的使用技巧

2.1 盒子模型

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

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

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

Display有4個值，分別為block、inline、none和list-item。block的特點(diǎn)是：總是在新行開始；高度，行高以及上下邊距都可控制；寬度缺省是它的容器的100%，除非用width設(shè)定一個寬度，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)元素后，將按列表元素顯示，再通過設(shè)置列表選項(xiàng)可使元素的左邊出現(xiàn)小黑點(diǎn)。當(dāng)某個元素被設(shè)置成了none元素之后，瀏覽器會完全忽略掉這個元素，該元素將不會被顯示，也不會占據(jù)文檔中的位置。如title元素默認(rèn)就是此類型。需要使用display屬性切換的情況有：讓一個inline元素從新行開始；讓塊元素和其他元素保持在一行上；控制inline元素的寬度；控制inline元素的高度（對導(dǎo)航條特別有用）；無須設(shè)定寬度即可為一個塊元素設(shè)定與文字同寬的背景色。

2.2 position屬性

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

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

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

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

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

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

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

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

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

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

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

由此可見，只要將我們平時布局頁面的div的CSS屬性中加上position：relative，就不只是用float布局頁面了，還可以用TRBL布局頁面。但是position屬性為absolute不可以用來布局頁面，因?yàn)槿绻脕聿季值脑挘械腄IV都相對于瀏覽器的左上角定位了，所以只能用于將某個元素定位于屬性為absolute的元素的內(nèi)部某個位置。這樣我們可以得出以下結(jié)論：如果用position來布局頁面，父級元素的position屬性必須為relative，而定位于父級內(nèi)部某個位置的元素，最好用absolute，因?yàn)樗皇芨讣壴氐膒adding的屬性影響。

2.3 float屬性

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

2010.

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

2014.5.

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

2014.5.

[4] 丁海燕.網(wǎng)頁設(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.