盒模型在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用研究,網(wǎng)頁(yè)設(shè)計(jì)論文內(nèi)容摘要：本文將盒模型技術(shù)應(yīng)用于布局網(wǎng)頁(yè)的頁(yè)面，摒棄了傳統(tǒng)表格布局網(wǎng)頁(yè)的方式并精簡(jiǎn)了網(wǎng)頁(yè)代碼，使網(wǎng)頁(yè)布局格式愈加趨于標(biāo)準(zhǔn)化。實(shí)踐結(jié)果表示清楚，在網(wǎng)頁(yè)設(shè)計(jì)中采用盒模型技術(shù)DIV標(biāo)簽位置愈加靈敏，網(wǎng)頁(yè)外觀修飾效果愈加出眾，對(duì)網(wǎng)頁(yè)頁(yè)面元素排版精到準(zhǔn)確度能夠到達(dá)像素級(jí)。本文關(guān)鍵詞語(yǔ)：盒模型;網(wǎng)頁(yè)設(shè)計(jì);CSS;應(yīng)用研究;Abstract：Thispaperappliestheboxmodeltechnologytothelayoutofwebpages,abandonsthetraditionalwayoftablelayoutofwebpages,simplifiesthewebpagecode,andmakesthewebpagelayoutformatmorestandardized.ThepracticalresultsshowthattheboxmodeltechnologyusedinwebpagedesignmakesthepositionofDIVtagsmoreflexible,theeffectofwebpageappearancemodificationmoreoutstanding,andtheaccuracyofwebpageelementtypesettingcanreachthepixellevel.Keyword：BoxModel;WebDesign;CSS;ApplicationResearch;1引言隨著社會(huì)的發(fā)展與進(jìn)步，越來(lái)越多的行業(yè)開場(chǎng)制作個(gè)性化的網(wǎng)頁(yè)，以提高其宣傳力和影響力。為了愈加靈敏地對(duì)網(wǎng)頁(yè)進(jìn)行布局，實(shí)現(xiàn)頁(yè)面的外觀修飾，使設(shè)計(jì)出的頁(yè)面構(gòu)造愈加清楚明晰，更有利于搜索，方便重構(gòu)和維護(hù)頁(yè)面，盒模型技術(shù)的使用必不可少。盒模型原理就是將層疊樣式表中的定位技術(shù)〔DIV〕標(biāo)簽元素當(dāng)作是有一點(diǎn)空間的盒子。采用盒模型技術(shù)來(lái)布局網(wǎng)頁(yè)頁(yè)面的主要方式方法就是在超文本標(biāo)記語(yǔ)言〔〕頁(yè)面文檔中先進(jìn)行DIV標(biāo)簽對(duì)象的插入，再使用層疊樣式表〔CascadingStyleSheet,CSS〕樣式規(guī)則對(duì)插入的的DIV標(biāo)簽對(duì)象進(jìn)行定位和樣式設(shè)置，進(jìn)而實(shí)現(xiàn)網(wǎng)頁(yè)元素的布局和定位[1]。在網(wǎng)頁(yè)中使用多個(gè)DIV標(biāo)簽進(jìn)行分隔，加上CSS的定位和修飾，完全具體表現(xiàn)出出了網(wǎng)頁(yè)設(shè)計(jì)中DIV+CSS盒模型布局的基本原理。2盒模型技術(shù)在使用盒模型技術(shù)設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面時(shí)，應(yīng)首先對(duì)DIV和CSS的使用非常熟練。華而不實(shí)DIV負(fù)責(zé)構(gòu)造布局，CSS負(fù)責(zé)樣式的美化。使用DIV+CSS盒模型技術(shù)能夠準(zhǔn)確和快速地定位網(wǎng)頁(yè)頁(yè)面中的各個(gè)元素[2]，并對(duì)各種元素的各種屬性進(jìn)行相應(yīng)的設(shè)置，進(jìn)而到達(dá)整個(gè)頁(yè)面的布局和外觀的修飾。2.1DIV技術(shù)DIV技術(shù)不僅能夠分割網(wǎng)頁(yè)頁(yè)面，而且網(wǎng)頁(yè)內(nèi)容背景和總體構(gòu)造也要依靠于作為標(biāo)簽元素的p技術(shù)，進(jìn)而到達(dá)網(wǎng)頁(yè)內(nèi)容構(gòu)造化、模塊化。DIV技術(shù)的使用標(biāo)志著網(wǎng)頁(yè)設(shè)計(jì)技術(shù)從傳統(tǒng)的二維空間延伸至先進(jìn)的三維空間。有了DIV，在網(wǎng)頁(yè)中能夠輕松實(shí)現(xiàn)圖片和文本的各種運(yùn)動(dòng)效果[3]。DIV作為標(biāo)記語(yǔ)言中的格式標(biāo)記，總是成對(duì)的出現(xiàn)，即出現(xiàn)的格式為p/p。該標(biāo)記對(duì)的用法和p/p標(biāo)記極為類似，包含有align對(duì)齊屬性。p/p標(biāo)簽元素也稱為容器，其他的段落標(biāo)記和文本標(biāo)記等對(duì)象都能夠放置于該標(biāo)記對(duì)中[4]。2.2CSS技術(shù)CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的主要作用就是定義各種網(wǎng)頁(yè)標(biāo)簽的樣式屬性。使用CSS技術(shù)能夠使網(wǎng)頁(yè)愈加的標(biāo)準(zhǔn)化和構(gòu)造化，能夠使樣式和代碼分離開，使得整個(gè)網(wǎng)頁(yè)代碼愈加清楚明晰。因而它在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域備受推崇。網(wǎng)頁(yè)設(shè)計(jì)中擴(kuò)展名為.css文件。能夠把它當(dāng)做是一種純文本文件來(lái)對(duì)待。其語(yǔ)法構(gòu)造格式為selector{property:value}。同時(shí)根據(jù)CSS樣式規(guī)則的選擇符進(jìn)行分類，可將CSS樣式分為類樣式、ID屬性標(biāo)簽、標(biāo)簽、復(fù)合內(nèi)容4類。的頭部包含所有類型的CSS樣式，包含在head/head標(biāo)記代碼之中，開場(chǎng)代碼標(biāo)記為style，結(jié)束的代碼標(biāo)記為/style。3盒模型網(wǎng)頁(yè)設(shè)計(jì)在DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)技術(shù)中，盒模型是一個(gè)重要的概念，其構(gòu)造圖如此圖1所示。盒模型通常能夠理解為把DIV元素當(dāng)做一個(gè)有點(diǎn)空間的盒子來(lái)看待。盒子通常都有外層和里層，在這里Margin就是盒子的最外層；與之相對(duì)應(yīng)的最里層便是content，其作用主要是存放詳細(xì)的內(nèi)容。從圖1能夠看出，Border為盒模型的邊框，Padding為盒模型填充的內(nèi)容。不管是哪種組成屬性，都是由于控制元素內(nèi)容的布局及定位。打開CSS規(guī)則定義對(duì)話框，Top、Right、Bottom和Left參數(shù)值能夠在方框選項(xiàng)中設(shè)置Margin欄中的Top、Right、Bottom和Left參數(shù)值。在邊框選項(xiàng)中，主要是對(duì)盒模型中Border的顏色、寬度和樣式的屬性值進(jìn)行設(shè)置。網(wǎng)頁(yè)設(shè)計(jì)中，假如要改變content和Border距離，在盒模型中能夠采取與Margin一樣的設(shè)置方式方法。普通用戶看到網(wǎng)頁(yè)展示的全部?jī)?nèi)容為盒子包含的content部分，內(nèi)容能夠是包括網(wǎng)頁(yè)中塊元素、行內(nèi)元素、文本元素和圖像元素等中的任一元素[5]。圖1盒模型構(gòu)造圖使用DIV+CSS技術(shù)設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面，主要是通過(guò)CSS規(guī)則中的Position和Floatd屬性值快速進(jìn)行定位。華而不實(shí)，Relative、absolute、fixed、static是Position定位中的四個(gè)屬性。Relative是指以起點(diǎn)為參照能夠在水平方向和垂直方向上進(jìn)行移動(dòng)，進(jìn)而到達(dá)相對(duì)定位的目的。Absolute在頁(yè)面中的作用是進(jìn)行絕對(duì)定位，網(wǎng)頁(yè)設(shè)計(jì)經(jīng)過(guò)中使用絕對(duì)定位同樣需要通過(guò)positon屬性值的設(shè)置來(lái)完成。若要在頁(yè)面中固定元素，則需要使用具有懸浮作用的fixed。Static在相應(yīng)的四個(gè)屬性值中固然具有靜態(tài)的意思，但實(shí)際上在網(wǎng)頁(yè)設(shè)計(jì)中并沒有定位的意思。通過(guò)對(duì)Position相應(yīng)屬性值的改變，能夠變換DIV的布局樣式。Float主要作用是對(duì)浮動(dòng)屬性進(jìn)行設(shè)置，以起到網(wǎng)頁(yè)中對(duì)另外的DIV進(jìn)行定位的目的。4盒模型布局設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)經(jīng)過(guò)中，頁(yè)面上任何元素均能夠通過(guò)盒模型、浮動(dòng)、定位來(lái)控制它們的顯示方式?，F(xiàn)主要介紹居中布局和浮動(dòng)布局兩種方式。網(wǎng)頁(yè)中有諸多的布局方式，但總體來(lái)講較為常用的一種布局方式就是居中布局[6]，即DIV+CSS學(xué)習(xí)的重點(diǎn)。4.1DIV容器居中顯示方式方法使用該方式方法在閱讀器中使用整個(gè)網(wǎng)頁(yè)布局居中顯示，詳細(xì)做法能夠先后分為對(duì)DIV容器的寬度進(jìn)行定義，其次是對(duì)relative的屬性值進(jìn)行設(shè)置，left賦值50%，即可完成網(wǎng)頁(yè)中間容器左邊緣的定位。運(yùn)行如此圖2所示。圖2網(wǎng)頁(yè)中間容器左邊緣定位圖假如想要在整個(gè)網(wǎng)頁(yè)呈居中顯示，能夠通過(guò)一個(gè)負(fù)值的空白邊，把其寬度設(shè)置為整個(gè)容器寬帶的一半，再加上關(guān)鍵的margin-left:-360px;代碼，即可將整個(gè)網(wǎng)頁(yè)在閱讀器中進(jìn)行居中顯示。其運(yùn)行如此圖3所示。同時(shí)在這里還應(yīng)注意當(dāng)在一個(gè)DIV容器中包含了其他DIV容器時(shí)，那么該DIV容器中具備了居中屬性的功能，假如設(shè)置其值為auto，則可將華而不實(shí)的p容器在該容器中居中顯示。圖3閱讀器中網(wǎng)頁(yè)居中顯示4.2DIV+CSS浮動(dòng)布局作為網(wǎng)頁(yè)的布局方式浮動(dòng)布在使用中也不可小覷。各個(gè)容器之間的定位通過(guò)Float屬性值來(lái)控制，進(jìn)而到達(dá)布局的目的，這就是浮動(dòng)布局的原理。方式方法有兩種：固定寬度布局、寬度自適應(yīng)布局[7]。4.2.1固定寬度布局采用嵌套的方式進(jìn)行布局，在網(wǎng)頁(yè)中定義DIV容器作為網(wǎng)頁(yè)的主體，在主體DIV容器中嵌套兩個(gè)或多個(gè)容器，使用CSS規(guī)則進(jìn)行設(shè)置，可快速有效地到達(dá)容器的固定寬度的布局。如此圖4所示。圖4容器固定寬度布局4.2.2寬度自適應(yīng)布局容器寬度的百分比值的設(shè)置能夠控制寬度自適應(yīng)布局。因而，在寬度自適應(yīng)布局中，只需使用CSS規(guī)則設(shè)置容器寬度的百分比即可，如此圖5所示。圖5寬度自適應(yīng)布局在這里需要注意的是當(dāng)在一個(gè)DIV容器中嵌套多個(gè)DIV容器時(shí)，假如要設(shè)置寬度自適應(yīng)大小，可固定華而不實(shí)的一個(gè)或多個(gè)DIV容器后，其他DIV容器則不設(shè)置其寬度即可使其自適應(yīng)內(nèi)容的大小。5結(jié)束語(yǔ)作為網(wǎng)頁(yè)標(biāo)準(zhǔn)之一的DIV+CSS技術(shù)，有著非常明顯的優(yōu)點(diǎn)，能夠使網(wǎng)頁(yè)閱讀的速度大大得到提升，頁(yè)面代碼的篇幅大幅減少，使用的范圍愈加廣泛，適用于大多數(shù)閱讀器[8]。同時(shí)修改也愈加方便，更改版面的時(shí)間也愈加短暫，查找使用的搜索引擎功能也愈加方便。DIV+CSS技術(shù)功能強(qiáng)大，其諸多功能中分離構(gòu)造與表現(xiàn)的功能，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者來(lái)講閱讀起來(lái)非常方便，由于它能夠?qū)ξ臋n代碼進(jìn)行大幅度的精簡(jiǎn)，僅保存了一部分的網(wǎng)頁(yè)頁(yè)面構(gòu)造代碼，同時(shí)網(wǎng)頁(yè)下載時(shí)的速度也得到了極大的提高。以下為參考文獻(xiàn)[1]溫盛萍.DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用信息化建設(shè),2021(10):53-55[2]楊米娜.DIV+CSS技術(shù)在網(wǎng)頁(yè)布局中的應(yīng)用研究電腦開發(fā)與應(yīng)用,2020(04):64-66[3]劉瑞新.網(wǎng)頁(yè)設(shè)計(jì)與制作教程.北京:機(jī)械工業(yè)出版,2020[4]何福男.網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)制作項(xiàng)目教程北京:電子工業(yè)出