淺談網(wǎng)頁設(shè)計(jì)中元素定位

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

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

中圖分類號(hào)：TP393.09

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

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

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

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

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

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

圖1 DIV2相對(duì)定位效果圖 圖2 DIV2絕對(duì)定位效果圖 圖3 DIV2向左浮動(dòng)效果圖

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

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

圖4 DIV2向右浮動(dòng)效果圖 圖5 DIV2相對(duì)定位且向左浮動(dòng)效果圖

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

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

4 相對(duì)定位、絕對(duì)定位、浮動(dòng)應(yīng)用技巧及注意事項(xiàng)

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

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

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

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

5 結(jié)束語

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

參考文獻(xiàn)：

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

作者簡(jiǎn)介：葉良艷（1981.12-），女，碩士。

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