基于CSS 盒模型的浮動布局

郭琳

（四川職業技術學院計算機科學系,四川 遂寧 629000）

基于CSS 盒模型的浮動布局

郭琳

（四川職業技術學院計算機科學系,四川 遂寧 629000）

在web程序的前端實現過程中，如何進行web頁面布局是至關重要的．常用的網頁布局技術有框架布局，表格布局，div布局．在這三種實現技術中，目前主要采用的是使用盒模型和css以及f loat浮動布局技術，來實現網頁的布局．本文主要闡述如何運用盒模型，結合css樣式表實現網頁布局．

盒模型；div；CSS:f loat浮動布局.

1 盒模型

1.1 盒模型的概念

盒模型是we b頁面排版布局的主流技術，對盒模型的理解主要是對co n te n t,b order,p a dd in g和m a rg in這四個概念的理解． 下圖描述出來了盒模型概念．

其中：co n te n t是盒子里放的內容．

p a dd in g是盒子中內容和盒子邊框的距離，又稱填充距離．

b order是盒子的邊框，這里的邊框是具有寬度的．

m a rg in是盒子的邊框和其他元素的距離，又稱外邊距．

注意：盒子的四個邊，四個方向的p a dd in g，四個方向的m a rg in都可以單獨控制．

1.2 兩個盒模型

一個盒子具有上面的這些屬性，如何確定一個盒子在網頁中總體尺寸，就非常的重要．在盒模型中有W3C標準盒模型和i e盒模型兩種.它們對盒模型的各個屬性的解釋是不同的.下面分別介紹這兩個盒模型.

1.2.1 W3C標準盒模型

一個標準的W3C盒子的寬度計算方式是：左外邊距+左邊框+左填充+w i dth+右填充+右邊框+右外邊距．其中的寬度是指co n te n t區域的寬．高度的計算原理一樣．

1.2.2 I E盒模型

在I E瀏覽器中，對盒子的寬度的計算是不一樣的，I E盒模型的寬度的計算就是：左外邊距+ w i dth+右外邊距，對高度的計算原理也是一樣．因為I E瀏覽器在解釋盒模型的時候，co n te n t的寬度包含了填充和邊框．

1.3 實例分析

在不同的盒子模型下對上面這段代碼的解釋是不一樣的．W3C標準盒模型中，寬度的計算是：300+20*2+40*2+2*2=424p x．I E盒模型中，寬度的計算是：300+40*2=380p x．可以看出在不同的盒子模型下，相同的代碼，產生的結果是不一樣的．

1.4 瀏覽器兼容問題

我們在選擇盒模型時，要選擇標準的W3C盒模型．而I E瀏覽器對盒模型的理解，是沒有遵循W3C標準盒模型的．于是，盒模型在使用時，就會存在瀏覽器的兼容問題．解決的辦法是為htm l文檔加上doctype聲明,把頁面設置為標準模式．在文檔的最前面加上． 這樣I E瀏覽器就會采用W3C的標準模式來解釋盒模型．

2 CSS樣式表

C a sc a d in g S ty l e S heet層疊樣式表，C SS就是讓內容和樣式分離開來．H T M L只控制網頁的內容（如文字、圖片和超鏈接等），而內容的樣式則由C SS來控制（如顏色、位置等）．C ss樣式表的種類很多，在盒模型中主要涉及到I d選擇器和c la ss選擇器．下面對這兩類選擇器做相應介紹．

2.1 Id選擇器

I d選擇器，由自己命名，注意不要以數字開頭，使用#符號進行標識，在一個網頁中只能使用一次．在布局時，需要唯一標識的盒子，就用I d選擇器．

2.2 class選擇器

C la ss選擇器，也是自己命名，使用.符號的形式定義，允許重復使用．因此在we b頁面中多個相同樣式的盒子在布局的時候，就使用c la ss選擇器．

3 Float浮動布局

3.1 float屬性

對于一個H T M L網頁,b ody元素下的任意元素，根據其前后順序，組成了一個上下關系，這便是文檔流．文檔流是瀏覽器的默認顯示規則．而f l o a t浮動屬性可以改變頁面對象的前后流動順序，讓排版更簡單，具有良好的伸縮性．下表是f l o a t屬性的取值．

3.2 float屬性的實例

定義兩個盒子在H T M L代碼中：

運行結果：

第二種布局：

運行結果：

通過上面的小實例，總結出通過f l o a t布局，可以在不改變H T M L代碼的情況下，調整盒子的顯示位置.因此使用f l o a t浮動布局可以隨心所欲的在頁面中放置盒子．

4 Clear清除浮動

如果因為特殊設計，不希望下面的對象繼續浮動，便可以使用c l e a r屬性來拒絕某個方向的浮動．也可以是在浮動很多元素之后，突然需要另起一行，也可以使用c l e a r屬性來清除浮動．下表是c l e a r屬性的取值．

5 布局實例

在下面這個布局實例中，使用i d選擇器和c la ss選擇器進行布局．主要代碼如下：

5.1 Css樣式表

5.2 Htm l代碼

5.3 布局效果如下圖

使用該布局實現的頁面效果圖如下：

6 結束語

盒模型在we b頁的布局中是核心和關鍵.本文對W3C標準盒模型的布局，做了一個全面的基本介紹.盒模型在we b的前端開發中，是出了名的易學難精，需要對css樣式表有深入的學習.在了解原理的基礎上，如何運行盒模型布局出有特點的網頁，還需要大量經驗的積累，本文只起到一個拋磚引玉的作用.

[1]袁磊.網頁設計與制作實例教程[M].北京:清華大學出版社，2013．

[2][美]達科特.H tm l&css設計與構建網站[M].北京:清華大學出版社,2012．

[3]何麗.精通d i v+css網頁樣式與布局[M].北京:清華大學出版社,2014．

On the Floating Layout BasedonCSSBoxModel

G U OL in
（C omputer S c i e n ceDep a r tme n t,S i chu an V oc a t i o nal an d T ech ni c al C o l l ege,S u inin g S i chu an629000）

I n the process o f thewe b f ro n t-e n d i mp l eme n t a t i o n,how to do thewe b p a ge la yout i s esse n t ial.C ommo nl y usedwe b p a ge la yout tech n o l og i es a re f r a mewor k la yout,t abl e la yout an d d i v la yout.I n these three tech n o l og i es,them ain use i s to use the b o x mode l,C SS an d the f l o a t in g la yout tech n o l ogy to a ch i e v e the la yout o f the p a ge.T h i s thes i s e lab or a tes how to use the b o x mode l an d combin ew i th C SS sheets to a ch i e v e the la yout o f thep a ge.

B o x M ode l;D i s;C SS;F l o a t in g L a yout

TP393

B

1672-2094（2017）02-0162-04

責任編輯：張隆輝

2017-01-03

郭 琳（1978-），女，四川遂寧人，四川職業技術學院講師.研究方向：J a v a W e b軟件開發.