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