郭琳

（四川職業(yè)技術(shù)學(xué)院計(jì)算機(jī)科學(xué)系,四川 遂寧 629000）

基于CSS 盒模型的浮動(dòng)布局

郭琳

（四川職業(yè)技術(shù)學(xué)院計(jì)算機(jī)科學(xué)系,四川 遂寧 629000）

在web程序的前端實(shí)現(xiàn)過(guò)程中，如何進(jìn)行web頁(yè)面布局是至關(guān)重要的．常用的網(wǎng)頁(yè)布局技術(shù)有框架布局，表格布局，div布局．在這三種實(shí)現(xiàn)技術(shù)中，目前主要采用的是使用盒模型和css以及f loat浮動(dòng)布局技術(shù)，來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的布局．本文主要闡述如何運(yùn)用盒模型，結(jié)合css樣式表實(shí)現(xiàn)網(wǎng)頁(yè)布局．

盒模型；div；CSS:f loat浮動(dòng)布局.

1 盒模型

1.1 盒模型的概念

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

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

p a dd in g是盒子中內(nèi)容和盒子邊框的距離，又稱(chēng)填充距離．

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

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

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

1.2 兩個(gè)盒模型

一個(gè)盒子具有上面的這些屬性，如何確定一個(gè)盒子在網(wǎng)頁(yè)中總體尺寸，就非常的重要．在盒模型中有W3C標(biāo)準(zhǔn)盒模型和i e盒模型兩種.它們對(duì)盒模型的各個(gè)屬性的解釋是不同的.下面分別介紹這兩個(gè)盒模型.

1.2.1 W3C標(biāo)準(zhǔn)盒模型

一個(gè)標(biāo)準(zhǔn)的W3C盒子的寬度計(jì)算方式是：左外邊距+左邊框+左填充+w i dth+右填充+右邊框+右外邊距．其中的寬度是指co n te n t區(qū)域的寬．高度的計(jì)算原理一樣．

1.2.2 I E盒模型

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

1.3 實(shí)例分析

在不同的盒子模型下對(duì)上面這段代碼的解釋是不一樣的．W3C標(biāo)準(zhǔn)盒模型中，寬度的計(jì)算是：300+20*2+40*2+2*2=424p x．I E盒模型中，寬度的計(jì)算是：300+40*2=380p x．可以看出在不同的盒子模型下，相同的代碼，產(chǎn)生的結(jié)果是不一樣的．

1.4 瀏覽器兼容問(wèn)題

我們?cè)谶x擇盒模型時(shí)，要選擇標(biāo)準(zhǔn)的W3C盒模型．而I E瀏覽器對(duì)盒模型的理解，是沒(méi)有遵循W3C標(biāo)準(zhǔn)盒模型的．于是，盒模型在使用時(shí)，就會(huì)存在瀏覽器的兼容問(wèn)題．解決的辦法是為htm l文檔加上doctype聲明,把頁(yè)面設(shè)置為標(biāo)準(zhǔn)模式．在文檔的最前面加上． 這樣I E瀏覽器就會(huì)采用W3C的標(biāo)準(zhǔn)模式來(lái)解釋盒模型．

2 CSS樣式表

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

2.1 Id選擇器

I d選擇器，由自己命名，注意不要以數(shù)字開(kāi)頭，使用#符號(hào)進(jìn)行標(biāo)識(shí)，在一個(gè)網(wǎng)頁(yè)中只能使用一次．在布局時(shí)，需要唯一標(biāo)識(shí)的盒子，就用I d選擇器．

2.2 class選擇器

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

3 Float浮動(dòng)布局

3.1 float屬性

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

3.2 float屬性的實(shí)例

定義兩個(gè)盒子在H T M L代碼中：

運(yùn)行結(jié)果：

第二種布局：

運(yùn)行結(jié)果：

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

4 Clear清除浮動(dòng)

如果因?yàn)樘厥庠O(shè)計(jì)，不希望下面的對(duì)象繼續(xù)浮動(dòng)，便可以使用c l e a r屬性來(lái)拒絕某個(gè)方向的浮動(dòng)．也可以是在浮動(dòng)很多元素之后，突然需要另起一行，也可以使用c l e a r屬性來(lái)清除浮動(dòng)．下表是c l e a r屬性的取值．

5 布局實(shí)例

在下面這個(gè)布局實(shí)例中，使用i d選擇器和c la ss選擇器進(jìn)行布局．主要代碼如下：

5.1 Css樣式表

5.2 Htm l代碼

5.3 布局效果如下圖

使用該布局實(shí)現(xiàn)的頁(yè)面效果圖如下：

6 結(jié)束語(yǔ)

盒模型在we b頁(yè)的布局中是核心和關(guān)鍵.本文對(duì)W3C標(biāo)準(zhǔn)盒模型的布局，做了一個(gè)全面的基本介紹.盒模型在we b的前端開(kāi)發(fā)中，是出了名的易學(xué)難精，需要對(duì)css樣式表有深入的學(xué)習(xí).在了解原理的基礎(chǔ)上，如何運(yùn)行盒模型布局出有特點(diǎn)的網(wǎng)頁(yè)，還需要大量經(jīng)驗(yàn)的積累，本文只起到一個(gè)拋磚引玉的作用.

[1]袁磊.網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)例教程[M].北京:清華大學(xué)出版社，2013．

[2][美]達(dá)科特.H tm l&css設(shè)計(jì)與構(gòu)建網(wǎng)站[M].北京:清華大學(xué)出版社,2012．

[3]何麗.精通d i v+css網(wǎng)頁(yè)樣式與布局[M].北京:清華大學(xué)出版社,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

責(zé)任編輯：張隆輝

2017-01-03

郭 琳（1978-），女，四川遂寧人，四川職業(yè)技術(shù)學(xué)院講師.研究方向：J a v a W e b軟件開(kāi)發(fā).