DIV+CSS盒子模型、浮動與定位探究

陳書理，張書貴

（開封大學 信息工程學院，河南 開封 475004）

0 引言

作為瀏覽者，我們上網時看到的是網頁上的文字、圖片、視頻等網頁元素。那么，這些網頁元素是如何有組織地排列在一起，構成一個完整頁面的呢？網頁開發人員可以回答這一問題。網頁開發師不僅要完善網頁功能，還要給瀏覽者一個好的使用體驗。在網頁開發過程中，需要用到Div＋Css盒子模型、浮動和定位技術。下面來具體介紹。

1 盒子模型

Html頁面上的元素都可以看成是由框組成的，這些框通過浮動或者定位機制排列在一起，構成我們看到的網頁界面，而框就是盒子模型?，F實生活中，我們接收到的快遞、裝電腦的箱子、手機盒子，還有掛在墻上的畫框等，都可以看作盒子模型，它們都是用來封裝物品的。而網頁設計中的盒子模型是用來封裝周圍的Html元素的，它包括外邊距（Margin）、邊框（Border）、內邊距（Padding）、內容（Content）四部分［1］。盒子模型的結構如圖1所示。

圖1 盒子模型的結構

1.1 外邊距（Margin）

一幅畫與另一幅畫之間的距離，即一個盒子與另一個盒子之間的距離就是外邊距。

1.2 邊框（Border）

網頁中，用于分離和隔開不同元素的線（有粗細之分）就是邊框。

1.3 內邊距（Padding）

元素和邊框之間的距離就是內邊距。元素距離邊框的遠近可以被控制。

1.4 內容（Content）

盒子里裝的東西就是內容，它是網頁中最主要的部分。網頁中的主要元素，如文字、圖像、動畫、音視頻、表單等，都需要不斷輸出。

在你設計網頁元素所存在的空間的過程中，當你指定一個CSS元素的寬度和高度屬性時，要知道，你只是設置了內容區域的寬度和高度，你還必須添加內邊距、邊框和外邊距，這樣才能呈現一個有著完整大小的元素。實際寬度＝左右外邊距＋左右邊框＋左右內邊距＋內容寬度。實際高度＝上下外邊距＋上下邊框＋上下內邊距＋內容高度［2］。

依據上面盒子模型的實際寬度和實際高度來設置，其產生的效果如圖2所示。此盒子里放置2個元素，設置盒子的寬度為800px，高度為220px；邊框的寬度為1px，顏色為橙色，實線；內邊距為1px。

圖2 盒子模型效果舉例

2 浮動

網頁中的元素，按照上面介紹的盒子模型的原理，被封裝在了盒子里。在默認情況下，網頁中的元素是按照從上到下的順序羅列的，也就是我們在通常意義上所說的以流文檔的形式來顯現。這種顯示方式既單調又混亂，既不利于網頁的后期維護，也不符合瀏覽者的瀏覽習慣。為了使網頁的排版更加合理，使網頁更加清晰，我們要讓網頁上的元素浮動起來。設置了浮動屬性的元素會脫離標準文檔流的控制，移動到其父元素中指定的位置［3］。所謂元素的浮動，就是指這樣一個過程。需要注意的是，只有左右浮動，沒有上下浮動。在這里，以開封大學軟件學院網站的導航欄為例，說明浮動的意義，進一步闡明浮動的概念。

圖3為沒有設置浮動狀態的效果，網頁元素以無序列表的形式顯示出來。

圖3 沒有設置元素浮動的效果

圖4為使用代碼：float：left，設置元素浮動狀態。網頁元素由文檔流狀態過渡到浮動狀態，同時也實現了網頁中橫向導航欄的設計和制作。圖5為設置元素浮動后的效果。

圖4 設置元素浮動代碼

圖5 設置網頁元素浮動的效果

設置了網頁元素浮動之后，由于浮動元素不再占用原文檔的位置，所以它會對相鄰的固定元素產生影響。為了避免浮動對其他元素產生影響，我們要設置命令來清除浮動。清除浮動的方式通常有三種：

1）使用clear來清除浮動

選擇器｛clear：left＼right＼both；｝可以實現：不允許左側有浮動＼不允許右側有浮動＼同時清除左右兩側浮動。

2）使用overflow屬性清除浮動

對某元素應用overflow：hidden；樣式來設置，也可以消除浮動對該元素的影響。

3）使用after偽元素清除浮動

該方法只適用于IE8.0及以上版本的瀏覽器和其他非IE瀏覽器。

3 定位

上邊談到，在網頁設計中，可以把網頁元素封裝在盒子里，并且運用浮動來控制網頁元素的顯示。這樣做，雖然顯得靈活一些，但是無法對元素的位置進行精確的控制，無法對元素進行定位。若不能精確定位，就無法如愿制作出一個網頁來。在css3中，可以通過定位屬性來實現對元素的精準定位，讓元素準確地顯示在需要顯示的頁面位置。元素的定位主要涉及定位模式和邊偏移［4］。

3.1 定位模式

選擇器｛position：static＼relative＼absolute＼fixed｝可以實現：靜態定位、相對定位、絕對定位、固定定位。

3.1.1 靜態定位

網頁結構默認的文檔流的方式就是靜態定位方式。如果沒有指定元素的定位方式，就按照靜態定位的方式來顯示。

3.1.2 相對定位

相對定位是指相對于元素在標準文檔流中的位置進行定位。雖然元素有了新的定位，但是其在原來文檔流中的位置還保留。也就是說，相對定位占2個位置，原來的位置保留，又去開拓新的位置。

3.1.3 絕對定位

絕對定位是指相對于最近的有定位屬性的父元素進行定位。如果向上的父元素都沒有定位，那么就相對于body元素，以它為標準來進行定位。采用絕對定位的元素完全脫離文檔流，不再占用原來的位置。

3.2 邊偏移

定位模式僅僅用于表明元素以哪種方式定位，并不能確定元素的具體位置。在css3中，可以通過邊偏移屬性top、bottom、left、right來精確定義、定位，確定元素的位置。下面仍然以開封大學軟件學院的網站為例，來闡釋定位的概念，展示其應用。運用定位知識制作出的網頁，其效果和代碼如圖6所示。

圖6 定位機制及代碼

4 結語

由以上具體案例可見，盒子模型在Div＋Css網頁布局結構中起著舉足輕重的作用，它可以承裝網頁上面顯示的任何元素。浮動可以創造出不同于原始文檔流的顯示方式。打破原始狀態，讓網頁元素浮動起來，這樣可以更好地實現定位，發揮定位的作用。定位是指讓裝在盒子里的網頁元素準確地顯示在需要顯示的位置。Div＋Css盒子模型、浮動和定位三者共同發揮作用，可以實現網頁元素的合理組織和網頁的合理布局。