盒模型在網頁設計中應用
前言：想要寫出一篇引人入勝的文章？我們特意為您整理了盒模型在網頁設計中應用范文，希望能給你帶來靈感和參考，敬請閱讀。
摘要本文將盒模型技術應用于布局網頁的頁面，摒棄了傳統表格布局網頁的方式并精簡了網頁代碼，使網頁布局格式更加趨于標準化。實踐結果表明，在網頁設計中采用盒模型技術DIV標簽位置更加靈活，網頁外觀修飾效果更加出眾，對網頁頁面元素排版精確度能夠達到像素級。
關鍵詞盒模型；網頁設計；CSS；應用研究
1引言
隨著社會的發展與進步，越來越多的行業開始制作個性化的網頁，以提高其宣傳力和影響力。為了更加靈活地對網頁進行布局，實現頁面的外觀修飾，使設計出的頁面結構更加清晰，更有利于搜索，方便重構和維護頁面，盒模型技術的使用必不可少。盒模型原理就是將層疊樣式表中的定位技術（DIV）標簽元素當作是有一點空間的盒子。采用盒模型技術來布局網頁頁面的主要方法就是在超文本標記語言（HTML）頁面文檔中先進行DIV標簽對象的插入，再使用層疊樣式表（CascadingStyleSheet，CSS）樣式規則對插入的的DIV標簽對象進行定位和樣式設置，從而實現網頁元素的布局和定位[1]。在網頁中使用多個DIV標簽進行分隔，加上CSS的定位和修飾，完全體現出了網頁設計中DIV+CSS盒模型布局的基本原理。
2盒模型技術
在使用盒模型技術設計網頁頁面時，應首先對DIV和CSS的使用非常熟練。其中DIV負責結構布局，CSS負責樣式的美化。使用DIV+CSS盒模型技術能夠準確和快速地定位網頁頁面中的各個元素[2]，并對各種元素的各種屬性進行相應的設置，從而達到整個頁面的布局和外觀的修飾。
2.1DIV技術
DIV技術不僅可以分割網頁頁面，而且網頁內容背景和總體結構也要依賴于作為標簽元素的div技術，從而達到網頁內容結構化、模塊化。DIV技術的使用標志著網頁設計技術從傳統的二維空間延伸至先進的三維空間。有了DIV，在網頁中可以輕松實現圖片和文本的各種運動效果[3]。DIV作為HTML標記語言中的格式標記，總是成對的出現，即出現的格式為<div></div>。該標記對的用法和<p></p>標記極為相似，包含有align對齊屬性。<div></div>標簽元素也稱為容器，其他的段落標記和文本標記等對象都可以放置于該標記對中[4]。
2.2CSS技術
CSS技術在網頁設計中的主要作用就是定義各種網頁標簽的樣式屬性。使用CSS技術可以使網頁更加的標準化和結構化，可以使樣式和代碼分離開，使得整個網頁代碼更加清晰。因此它在網頁設計領域備受推崇。網頁設計中擴展名為.css文件。可以把它當做是一種純文本文件來對待。其語法結構格式為selector{property:value}。同時根據CSS樣式規則的選擇符進行分類，可將CSS樣式分為類樣式、ID屬性標簽、標簽、復合內容4類。HTML的頭部包含所有類型的CSS樣式，包含在<head></head>標記代碼之中，開始代碼標記為<style>，結束的代碼標記為</style>。
3盒模型網頁設計
在DIV+CSS網頁設計技術中，盒模型是一個重要的概念，其結構圖如圖1所示。盒模型通常可以理解為把DIV元素當做一個有點空間的盒子來看待。盒子通常都有外層和里層，在這里Margin就是盒子的最外層；與之相對應的最里層便是content，其作用主要是存放具體的內容。從圖1可以看出，Border為盒模型的邊框，Padding為盒模型填充的內容。不管是哪種組成屬性，都是由于控制元素內容的布局及定位。打開CSS規則定義對話框，Top、Right、Bottom和Left參數值可以在方框選項中設置Margin欄中的Top、Right、Bottom和Left參數值。在邊框選項中，主要是對盒模型中Border的顏色、寬度和樣式的屬性值進行設置。網頁設計中，如果要改變content和Border距離，在盒模型中可以采取與Margin相同的設置方法。普通用戶看到網頁展示的全部內容為盒子包含的content部分，內容可以是包括網頁中塊元素、行內元素、文本元素和圖像元素等中的任一元素[5]。使用DIV+CSS技術設計網頁頁面，主要是通過CSS規則中的Position和Floatd屬性值快速進行定位。其中，Relative、absolute、fixed、static是Position定位中的四個屬性。Relative是指以起點為參照可以在水平方向和垂直方向上進行移動，從而達到相對定位的目的。Absolute在頁面中的作用是進行絕對定位，網頁設計過程中使用絕對定位同樣需要通過positon屬性值的設置來完成。若要在頁面中固定元素，則需要使用具有懸浮作用的fixed。Static在相應的四個屬性值中雖然具有靜態的意思，但實際上在網頁設計中并沒有定位的意思。通過對Position相應屬性值的改變，可以變換DIV的布局樣式。Float主要作用是對浮動屬性進行設置，以起到網頁中對另外的DIV進行定位的目的。
4盒模型布局設計
在網頁設計過程中，頁面上任何元素均可以通過盒模型、浮動、定位來控制它們的顯示方式。現主要介紹居中布局和浮動布局兩種方式。網頁中有眾多的布局方式，但總體來說較為常用的一種布局方式就是居中布局[6]，即DIV+CSS學習的重點。
4.1DIV容器居中顯示方法
使用該方法在瀏覽器中使用整個網頁布局居中顯示，具體做法可以先后分為對DIV容器的寬度進行定義，其次是對relative的屬性值進行設置，left賦值50%，即可完成網頁中間容器左邊緣的定位。<styletype="text/css">.main{position:relative;left:50%;width:720px;height:400px;background-color:#FFF}</style></head><body><divclass="main"><imgsrc="2"/></div></body>運行如圖2所示。如果想要在整個網頁呈居中顯示，可以通過一個負值的空白邊，把其寬度設置為整個容器寬帶的一半，再加上關鍵的“margin-left:-360px;”代碼，即可將整個網頁在瀏覽器中進行居中顯示。.main{position:relative;left:50%;width:720px;margin-left:-360px;height:400px;background-color:#FFF}其運行如圖3所示。同時在這里還應注意當在一個DIV容器中包含了其他DIV容器時，那么該DIV容器中具備了居中屬性的功能，如果設置其值為auto，則可將其中的div容器在該容器中居中顯示。
4.2DIV+CSS浮動布局
作為網頁的布局方式浮動布在使用中也不可小覷。各個容器之間的定位通過Float屬性值來控制，從而達到布局的目的，這就是浮動布局的原理。方法有兩種：固定寬度布局、寬度自適應布局[7]。4.2.1固定寬度布局。采用嵌套的方式進行布局，在網頁中定義DIV容器作為網頁的主體，在主體DIV容器中嵌套兩個或多個容器，使用CSS規則進行設置，可快速有效地達到容器的固定寬度的布局。如圖4所示。<body><divclass="box"><divclass="left">左側容器</div><divclass="right">右側容器</div></div></body>.left{float:left;height:400px;width:300px;border:1pxsolid#333;}.right{float:left;height:400px;width:300px;border:1pxsolid#333;4.2.2寬度自適應布局。容器寬度的百分比值的設置可以控制寬度自適應布局。因此，在寬度自適應布局中，只需使用CSS規則設置容器寬度的百分比即可，如圖5所示。<body><divclass="box"><divclass="left">左側容器</div><divclass="right">右側容器</div></div></body>.left{float:left;height:400px;width:20%;border:1pxsolid#333;}.right{float:left;height:400px;width:70%;border:1pxsolid#333;}圖5寬度自適應布局在這里需要注意的是當在一個DIV容器中嵌套多個DIV容器時，如果要設置寬度自適應大小，可固定其中的一個或多個DIV容器后，其他DIV容器則不設置其寬度即可使其自適應內容的大小。
5結束語
作為網頁標準之一的DIV+CSS技術，有著非常明顯的優點，能夠使網頁瀏覽的速度大大得到提升，頁面代碼的篇幅大幅減少，使用的范圍更加廣泛，適用于大多數瀏覽器[8]。同時修改也更加方便，更改版面的時間也更加短暫，查找使用的搜索引擎功能也更加方便。DIV+CSS技術功能強大，其眾多功能中分離結構與表現的功能，對于網頁設計初學者來說閱讀起來非常方便，因為它能夠對HTML文檔代碼進行大幅度的精簡，僅保留了一部分的網頁頁面結構代碼，同時網頁下載時的速度也得到了極大的提高。
參考文獻
[1]溫盛萍.DIV+CSS布局技術在網頁設計中的應用.信息化建設,2015(10):53-55
[2]楊米娜.DIV+CSS技術在網頁布局中的應用研究.電腦開發與應用,2012(04):64-66
[3]劉瑞新.網頁設計與制作教程.北京:機械工業出版,2013
[4]何福男.網站設計與網頁制作項目教程.北京:電子工業出版社,2014
[5]王國慶.探究基于DIV+CSS技術的網頁設計優化方法.信息與電腦(理論版),2016(04):140-141
[6]李澤響.基于購物網站的交互設設框架研究[碩士學位論文].華中科技大學,武漢,2011
[7]溫謙.網頁設計與布局項目化教程.北京:人民郵電出版社,2013
[8]李森,孫敏,許娜,劉凡濤,等.網頁瀏覽任務的用戶情感測量模型研究.工業工程與管理,2013(01):106-110
作者:辛浩 李玲玲 單位:淮北職業技術學院計算機科學技術系
