摘 要：本文闡述網(wǎng)頁元素通過表格和Div+CSS樣式定位兩種方式優(yōu)缺點，重點介紹了CSS絕對定位、相對定位和浮動，以及他們之間關(guān)聯(lián)、應(yīng)用技巧和注意事項，只有深度了解才能靈活運用。

關(guān)鍵詞：CSS；定位；浮動

中圖分類號：TP393.09

掌握網(wǎng)頁元素定位是基本要點，只有網(wǎng)頁元素定位好了，網(wǎng)頁布局才會設(shè)計好，網(wǎng)頁的整體效果才好，但對于很多網(wǎng)頁設(shè)計初學(xué)者，不能靈活運用網(wǎng)頁元素定位技術(shù)，特別是利用CSS樣式定位網(wǎng)頁元素，常因瀏覽器版本不同，頁面變得雜亂無章，只有深入學(xué)習(xí)扎實掌握網(wǎng)頁元素定位技術(shù)，才能靈活運用。

1 網(wǎng)頁元素定位概述

在講網(wǎng)頁定位之前，我先來了解網(wǎng)頁中每個元素本身的自己定位方式是按照文檔流定位，body元素下的任意元素，根據(jù)其前后順序，組成一個個上下關(guān)系。在早期網(wǎng)頁定為方式表格、層（DIV的絕對定位）和框架，隨著CSS技術(shù)發(fā)展，現(xiàn)在網(wǎng)頁設(shè)計者對網(wǎng)頁元素定位常用方式有：一是利用表格對網(wǎng)頁元素定位；二框架；三是利用DIV對網(wǎng)頁元素定位?？蚣芏ㄎ灰恢睉?yīng)用不多，表格是早期定位常用方法，表格操作簡單易懂，表格的單元格可以放圖片、文字、表格等元素，通過控制表格單元格來控制元素位置。表格的單位有兩種方式一是百分比、二固定長度（像素、點等），利用表格布局時，最外面表格寬度固定，單元格嵌套表格的寬度設(shè)為百分比比較好（隨父單元格的寬度變化，便于須改），現(xiàn)在顯示器的分辨率大多是1024×768，最外表格的寬度可以設(shè)為小于等于1000像素，水平方向居中。另外，表格嵌套最好不要超過三層[1]，因網(wǎng)頁顯示時要等表格中所有的信息下載完后，才在客戶端顯示；一個單元格中不要同時出現(xiàn)文字和嵌套表格，這樣不利于排版，易錯位。表格與div定位各有優(yōu)缺點。表格的布局容易操作，簡單快速，也可以形成復(fù)雜的變化，更大優(yōu)勢是在不同的瀏覽器中能得到很好的兼容，垂直居中很容易實現(xiàn)，只要設(shè)置單元格垂直居中即可，但是若網(wǎng)站布局需要變更時，所有的布局就需要重新設(shè)計。Div+CSS就解決網(wǎng)頁布局更新問題，因CSS表現(xiàn)基于結(jié)構(gòu)控制布局，表現(xiàn)形式和內(nèi)容分離開得，若想修改布局，只需修改CSS即可，便于網(wǎng)頁樣式、布局變更，這也是為什么Div+CSS成為當(dāng)前主流，另外DIV+CSS將頁面獨立成更多的區(qū)域，在打開頁面的時候，逐層加載。而不像表格嵌套那樣將整個頁面圈在一個大表格里，使得加載速度很慢。下面我將詳細講解Div+CSS定位知識點。

2 利用Div+CSS網(wǎng)頁元素定位

Div這個標(biāo)簽沒有特定的含義，它屬于塊級元素，瀏覽器會在其前后顯示折行而已。如果與CSS一同使用，它的作用就非常大了，網(wǎng)頁元素定位主要依賴DIV+CSS控制，真正起作用的是CSS的定位原理。CSS有三種基本的定位機制：普通流、相對定位、絕對定位和浮動，其中普通流就是靜態(tài)文檔流。學(xué)習(xí)CSS定位前，須了解CSSposition屬性，它的值有static、relative、absolute、fixed。

2.1 相對定位。相對定位是指該對象相對本身起點移動，它原本所占的空間仍保留，例如設(shè)DIV1、DIV2和DIV3三個個DIV的寬高都是50PX，DIV2的定位為相對定位，其定位樣式為：{position：relative；left：40px；top：20px；}，如如圖1所示；若DIV2的定位為相對定位偏移（left：0；top：0；）都為0，則DIV2的現(xiàn)實效果和靜態(tài)文檔流效果一樣。

圖1 DIV2相對定位效果圖 圖2 DIV2絕對定位效果圖 圖3 DIV2向左浮動效果圖

2.2 絕對定位。絕對定位是指元素所占空間從靜態(tài)文檔流完全刪除，即元素原先在靜態(tài)文檔流中所占的空間會關(guān)閉，就像該元素脫離靜態(tài)文檔流，并相對于其包含塊定位，若該對象上級無定位對象就默認包含塊Body標(biāo)簽中，即相對文檔窗口定位；若上級有定位對象，該對象以上級對象為起點定位。例如設(shè)DIV1、DIV2和DIV3三個個DIV的寬高都是50PX，其中DIV2的定位為絕對定位，它定位樣式為：.div2{position：absolute；left：40px；top：20px；}，顯示結(jié)果如圖2所示，這時的DIV2就相當(dāng)于層。絕對定位還有一個重要的屬性z-index屬性，該屬性來控制絕對定位框的Z軸堆放次序，因絕對定位的框覆蓋頁面上的其它元素。

2.3 浮動。元素若為浮動對象，則它脫離標(biāo)準文檔流，它可以向左或向右浮動，直到它碰到包含框邊緣或另外浮動框等，就像海面浮飄一樣。例如假設(shè)DIV1、DIV2和DIV3三個個DIV的寬高都是50PX，其中DIV2的定位為浮動對象，其定位樣式為：.div2{float：left；}，其顯示效果如圖3所示，DIV2的右邊空間留出來了，DIV3移到DIV2一行；若DIV1也向左浮動，則DIV1、DIV2、DIV3三個Div都在同一行；若DIV2向右浮動則顯示效果如圖4所示，DIV2左側(cè)空間讓給DIV3，DIV3上移。

圖4 DIV2向右浮動效果圖 圖5 DIV2相對定位且向左浮動效果圖

3 相對定位、絕對定位、浮動之間的關(guān)聯(lián)

相對定位、絕對定位、浮動三種定位方式應(yīng)用比較多的是浮動。一個元素可以同時使用相對定位和浮動樣式，例如假設(shè)DIV1、DIV2和DIV3三個個DIV的寬高都是50PX，其中DIV2的定位為相對定位左浮動，其定位樣式為：.div2{float：left；position：relative；left：20px；top：20px；}，其顯示效果如圖5所示。一個元素若想以父DIV作為參照物絕對定位，則父DIV必須為相對定位或絕對行為屬性。

4 相對定位、絕對定位、浮動應(yīng)用技巧及注意事項

4.1 絕對定位應(yīng)用：若想做頁面飄動的廣告，則該DIV需絕對定位，且z-index值大于其他值，讓后利用javascript對其設(shè)置特效。注意z-index屬性只有當(dāng)position值為absolute時才生效。

4.2 相對定位應(yīng)用：若想利用層做二級菜單，又希望菜單導(dǎo)航無論在任何版本瀏覽器居中顯示，則可以在菜單層添加父DIV，設(shè)父DIV水平居中相對定位就可達到想要的效果，這是相對定位和絕對定位綜合應(yīng)用。

4.3 浮動應(yīng)用：圖文混排排版，只需設(shè)圖片左浮動或右浮動即可達到文字圍繞在圖片周圍；全圖排版，只需設(shè)圖片向左浮動或右浮動，另外設(shè)置每個圖片框的大?。▽抴idth、內(nèi)邊距padding、外邊距margin）即可設(shè)置每行顯示幾個圖片；網(wǎng)頁布局。

4.4 浮動應(yīng)用注意事項：（1）div設(shè)為浮動時，它的寬度自動隨內(nèi)容改變，一般布局時，浮動對象最好設(shè)置寬度，除圖片之外，因它的寬度隱含在內(nèi)。（2）父div的高度不會隨子浮動div的高度變化而變化，這主要是因為div浮動就脫離文檔流，解決這個問題的方法是在父div的底部添加一個空div，并設(shè)置該div清除浮動（clear：both；）即可。（3）塊狀對象浮動后就容許其他對象和它占用一行。

5 結(jié)束語

隨著網(wǎng)絡(luò)迅速發(fā)展及瀏覽器版本的增多，網(wǎng)頁設(shè)計者的挑戰(zhàn)越來越大，深入掌握網(wǎng)頁元素定位，才能靈活運用，為制作合適精美網(wǎng)站打下基礎(chǔ)。

參考文獻：

[1]淺淡網(wǎng)頁設(shè)計中的頁面布局[J].電腦學(xué)習(xí)，2012，02（1）.

作者簡介：葉良艷（1981.12-），女，碩士。

作者單位：安徽電子信息職業(yè)技術(shù)學(xué)院 計算機科學(xué)系，安徽蚌埠 233000