淺談DIV+CSS頁面布局在教學中的體會

茆榮海

【摘 要】DIV+CSS成為目前網站的主要布局手段，越來越受重視。這種網頁布局和以前教材中表格方式的布局有著很大的區別，它不僅是頁面展示核心技術的進步，更對一線教師提出了更高的要求。

【關鍵詞】DIV+CSS 頁面布局 盒模型 頁面元素

一、引言

簡單地講，DIV+CSS是一種網頁全新布局的方法，與傳統的用表格方式來定位網頁元素不同的是，它把頁面的內空和網頁的美化分開了，形成了兩個方面的分支。在教學中，有一位學生問過我這樣一個問題：“老師，每逢遇到重大節日，那些大型網站是如何做到不改變架構的情況下，還能表現出節日渲染的氣氛呢？”

二、了解盒子模型

上述問題的答案就是：頁面內容與樣式分離的技術，大大提高了頁面不同風格的應用率。要明白這個理論，首先就要了解DIV+CSS的盒子模型。盒子模型是學習DIV+CSS布局的基礎，它非常像我們生活中從網上購物后商家包裝物品的盒子。商家在給商品發貨時要將紙盒裝在包裝袋里，這個袋子就是盒子的“邊距”，紙箱就是“邊框”，那么防止紙箱在運輸過程出現碰撞而增加的泡沫墊就可以看成“補白”。簡單來說：盒子模型就是加了幾層東西的容器，它比我們日常生活單純的盒子要多出一些內容。例如，p標簽是個能盛文字的容器，它的高度就是文字的實際高度，但別忘了文字高度的外表還有三層裝飾的東西呢。在實際教學過程中，大部分學生想到的盒子就只是DIV，其實很多元素都可以當作盒子來處理。圖1所示為基本教學中常用的盒子模型，頁面中的所有元素都遵循該模型的設置方式。

（一）邊距

邊距是網頁元素之間的間隔。CSS的margin屬性用于設置邊距距離。其通用語法如下：margin：length。其中，length的值可以用長度單位，也可以用百分比定義，還可以使用關鍵字auto定義。

（二）補白

如果你設置了邊框顏色，那么文本和邊框太靠近就不好看了。CSS的padding屬性用于設置補白。其通用語法如下：padding：length。其中，length的值可以用長度單位，也可以用百分比定義，還可以使用關鍵字auto定義。

（三）邊框

邊框是頁面元素獨立體范圍的最外圈。邊框所包圍的是補白+內容，CSS中設置邊框的屬性有三個，分別是：borde-width：設置邊框寬度；borde-color：設置邊框顏色；border-style：設置邊框樣式。

1.border-width屬性用于改變邊框的寬度，其通用語法如下：Border-width：width。

2.border-color屬性用于改變邊框的顏色，其通用語法如下：Border-color：color。

3.border-style屬性用于改變邊框的樣式，其通用語法如下：Border-style：style。

三、頁面元素的布局

有了上面的學習后，對頁面的布局就有了更好的理解。根據多屆教學經驗，DIV+CSS布局方式是學生反應比較難學的知識點，其內容對初學者而言比較深。根據教學經驗，提煉出實質的知識要點：頁面元素布局的定位和浮動；塊級元素和行內元素的區別與聯系。掌握了這些知識點后，就能對DIV+CSS的布局有了個清晰的認識。

（一）塊級元素與行內元素

在CSS頁面布局中，我們把HTML標簽按照一定的特性分成兩種。一種是塊級元素，這種元素是按照垂直方式來布局的，例如div標簽和p標簽。另一種是行內元素，按照小平方式布局的，一般是基于語義級的基本元素，只能容納文本和其他行內元素，例如超鏈接a和span標簽，它們可以通過元素的.display屬性相互轉換。

（二）CSS布局方式的常規流

CSS+DIV頁面布局的學習中有三種常用的模式，分別是常規流、浮動和定位。常規流（normal flow）是網頁開發工具默認的方式，塊按照從上到下的順序排版，就像瀑布流下一樣。

（三）CSS布局方式的浮動

如果要實現塊的水平方向排列，必須使用塊的浮動屬性，有了它我們就可以隨心所欲地排版了。在CSS中，所有元素都可以設置成浮動的方式來展現，它可以使排版更加簡單，易于控制。CSS的float屬性是設置元素的浮動，它有三個值：left、right和none。Left是左邊浮動；right代表右邊浮動；none表示沒有。

使用浮動定位方式，可以實現到一塊到多塊的固定寬度。如果需要幾個塊水平方向排列且居中顯示，可以使用志的嵌套形式設計。先用一個塊作為容器且居中顯示，再將幾個塊水平排列放置在容器中之中，這樣幾個塊就被綁定并居中顯示了。

（四）CSS布局方式：相對定位

最后一種常用的頁面布局方式，就是頁面的定位。CSS的position屬性用于定位，可用position屬性來精確定位元素相對其父元素或者其他元素的位置。Position屬性共有四個關鍵字值，分別是static、absolute、relative和fixed。Static是默認值，表示是靜態的不動；relative代表相對定位，其意就是相對他人而言。

（五）CSS布局方式：絕對定位

Position屬性中的absolute代表絕對定位，使用絕對定位的子元素時候，其移動是相對父元素來說的，也就是它必須有一個參考對象的問題。注意，它始終要相對父元素來絕對定位的。通常這個最初的包含塊是html標簽。

四、DIV+CSS頁面布局應用舉例

以下以一個藝術宣傳網頁為例來討論一下DIV+CSS頁面布局的架構原理。在設計前，應該遵循簡潔明了的要求，頁面不應該雜亂無序，布局應該合理，有個性，區塊劃分要合理，布局可以按照各欄目的內容來進行區塊劃分。根據站點及欄目的分類，筆者對主頁進了如下的布局及有布局時各塊的嵌套和命名：

通過以上頁面中塊的嵌套關系，我們對比分析就能清楚地看出，這種分塊根據板塊內容來安排的邏輯性很合理。其中，我們可以把“box”看成最大的一塊，它包括了所有頁面元素。從上面的塊的架構分析，我們還可以知道：“banner”塊、“main”塊和“footer”塊這三塊是按照CSS的常規流去布局的，而“main”主塊中的“navigation”塊和“right”塊卻是按照水平方式來排版，這里就要用到上面講的CSS布局方式的浮動。最后，“right”塊中又返回了常規流的布局方式。每種塊的CSS樣式的詳細代碼定義這里就不再說明了?？偠灾?，網頁的總體架構決定著一個網站成敗，它就像我們蓋高樓的框架結構。

五、結論

CSS+DIV是頁面布局的一種方式，DIV可看成網頁中的“塊”，相當于一個容器，網頁中的元素均可以劃分到不同的塊中。以塊為單位，塊及塊中的所包含元素的屬性通過CSS進行控制，從而實現整個頁面的布局。與表格布局相比，代碼簡潔，結構清晰，易于搜索引擎檢索。且通過修改CSS就能完成批量頁面的變化，修改方便，維護成本低。

【參考文獻】

[1]曾順.精通CSS+DIV網頁樣式與布局[M].北京：人民郵電出版社，2007.

[2]劉紅梅.網頁設計與制作[M].南京：江蘇教育出版社，2013.