基于CSS+Div的盒模型網(wǎng)頁(yè)精確布局方法研究

高葵 付曉翠 李蔚妍

摘要：使用CSS+Div的盒模型可以實(shí)現(xiàn)網(wǎng)頁(yè)精確布局。通過(guò)css盒模型寬度，高度，內(nèi)邊距，外邊距，邊框等屬性設(shè)置，確定內(nèi)容區(qū)域的總尺寸和網(wǎng)頁(yè)元素的總尺寸，從而實(shí)現(xiàn)網(wǎng)頁(yè)精確布局。該文通過(guò)舉例，給出使用CSS+Div的盒模型進(jìn)行網(wǎng)頁(yè)精確布局使用方法和注意事項(xiàng)，舉一反三，到達(dá)掌握的目的。

關(guān)鍵詞：CSS+Div;盒模型;寬度;高度;內(nèi)邊距;外邊距;邊框

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）27-0191-03

開(kāi)放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

1 背景

在使用CSS+Div進(jìn)行布局的過(guò)程中，使用css盒模型可以實(shí)現(xiàn)網(wǎng)頁(yè)精確布局。盒模型的概念，盒模型的相關(guān)屬性（寬度，高度，內(nèi)邊距，外邊距，邊框等）都會(huì)影響著精確布局，如果使用不當(dāng)，都會(huì)導(dǎo)致在網(wǎng)頁(yè)布局中出現(xiàn)異常。本文通過(guò)實(shí)例，精確計(jì)算網(wǎng)頁(yè)區(qū)域，實(shí)現(xiàn)網(wǎng)頁(yè)精確布局。

2 使用舉例

2.1盒子模型

盒子模型是CSS+Div網(wǎng)頁(yè)布局的重要概念，網(wǎng)頁(yè)元素和它周?chē)臻g所形成的矩形區(qū)域稱(chēng)為盒子（ box）[1]，根據(jù)需要將網(wǎng)頁(yè)中的盒子進(jìn)行排列和分布，就形成了網(wǎng)頁(yè)布局。

盒子模型將頁(yè)面中的每個(gè)元素看作一個(gè)矩形框，這個(gè)框由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成[2]。按top、right、bottom、left的順時(shí)針?biāo)膫€(gè)方向，分別進(jìn)行定義和設(shè)置，描述盒子屬性。具體設(shè)置如圖1所示。

2. 2盒模型的寬度和高度

使用盒模型進(jìn)行精確的排版，有時(shí)候1像素都不能差，就需要理解其中的計(jì)算方法。

在盒子結(jié)構(gòu)中，元素內(nèi)容具有寬度和高度屬性，元素被包含在邊框（border）中，內(nèi)容和邊框之間有內(nèi)邊距（padding），邊框的外伸展為外邊距（margin），它們都有寬度，都會(huì)占據(jù)空間，在計(jì)算精細(xì)的版面時(shí)，一定要把這些屬性的影響考慮進(jìn)去，否則哪怕1像素的空間也會(huì)影響頁(yè)面的布局效果[3]。

盒子模型實(shí)際占有的空間可以用總高度和總寬度來(lái)描述。

盒子的總寬度=盒子左外邊距+盒子左邊框+盒子左內(nèi)邊距+內(nèi)容寬度+盒子右內(nèi)邊距+盒子右邊框+盒子右外邊距

盒子的總高度=盒子上外邊距+盒子上邊框+盒子上內(nèi)邊距+內(nèi)容高度+盒子下內(nèi)邊距+盒子下邊框+盒子下外邊距

2.3 應(yīng)用舉例

例題1：完成頁(yè)面，效果如圖2。

對(duì)應(yīng)的主要代碼如下：

分析：從上可以看到

1）整個(gè)頁(yè)面由6個(gè)盒模型構(gòu)成，分別為id名稱(chēng)為contamer，banner，link，content，right，footer的div標(biāo)簽加css屬性設(shè)置來(lái)實(shí)現(xiàn)。

2） container標(biāo)簽的寬度為800px，banner和footer沒(méi)有設(shè)置寬度，默認(rèn)和其所在的DIV標(biāo)簽寬度相同。當(dāng)設(shè)置了邊框，內(nèi)邊距，外邊距的數(shù)值時(shí)，banner和footer會(huì)自動(dòng)調(diào)整來(lái)適應(yīng)所在div標(biāo)簽區(qū)域大小，看似沒(méi)有設(shè)置，實(shí)則更靈活[4]。

3）link，content，right標(biāo)簽的只有寬度和高度屬性，沒(méi)有設(shè)置邊框，內(nèi)邊距和外邊距，其寬度之和為200px+450px+150px=800px，與外層的contamer的寬度一致，且三個(gè)div區(qū)域高度相同，所有緊密排列在一起，布局完整。

例題2：給例題1的所有區(qū)域添加紅色虛線(xiàn)邊框，效果圖3。

與布局效果1頁(yè)面相比，主要修改除contamer外每個(gè)區(qū)域部分的邊框?qū)傩?，給5個(gè)div簽添加如下css屬性：border： lpxdashed #FOO;同時(shí)修改中間部分區(qū)域的寬度。

分析：從上可以看到中間部分的水平方向區(qū)域尺寸除了link，content，right區(qū)域的寬度外，又多了這3個(gè)區(qū)域的邊框，一共6px，所有要讓這個(gè)三個(gè)區(qū)域還布局在同一行上，必須修改區(qū)域的寬度，如修改right的寬度由原來(lái)的150px，修改為144px，這個(gè)區(qū)域的總寬度變?yōu)?00px+450px+144px+6px=800px，與外層的container的寬度一致。如果不進(jìn)行精確計(jì)算，哪怕多l(xiāng)px也會(huì)出現(xiàn)布局異常。如圖4所示，right區(qū)域?qū)挾葹?45px，導(dǎo)致總寬度為200px+450px+145px+6px=80lpx，超出了外層的con-tainer的寬度，布局到了下一行，出現(xiàn)異常。

例題3：在布局效果2頁(yè)面的基礎(chǔ)上設(shè)置content區(qū)域的上外邊距，效果如圖5。

與布局效果2頁(yè)面相比，代碼部分主要修改除content區(qū)域部分的上外邊距屬性，給DIV標(biāo)簽添加如下css屬性

#content f

margin-top：lOpx;）

分析：從上可以看到content區(qū)域由于上外邊距的屬性，與上方區(qū)域有10px的空間，與左右2個(gè)區(qū)域發(fā)生了錯(cuò)位，可以同步修改link和right區(qū)域的上外邊距屬性為10px，使三個(gè)區(qū)域同步下移。效果如圖6所示。

同理若link，content區(qū)域增加了右外邊距Spx，若right區(qū)域?qū)挾炔贿M(jìn)行修改，則會(huì)出現(xiàn)總寬度=200px+450px+144px+6px+5px+5px=8lOpx，，超出了最外層contamer的寬度800px，效果如圖7所示。

可以修改right區(qū)域的寬度由原來(lái)的144px變?yōu)闇p少lOpx即134px，使布局精確正常，效果如圖8。

例題4：在布局效果7的頁(yè)面基礎(chǔ)上完成設(shè)置link區(qū)域的內(nèi)邊距頁(yè)面，效果圖9。

修改link區(qū)域的右內(nèi)邊距屬性，給div標(biāo)簽添加如下CSS屬性

分析：從上可以看到link區(qū)域由于右內(nèi)邊距的屬性，增加了5px的總寬度，導(dǎo)致三部分總寬度=200px+5px+450px+144px+6px+5px+5px=815px超過(guò)了contamer區(qū)域，出現(xiàn)異常?？梢孕薷膔ight區(qū)域的寬度為由原來(lái)的134px減少5px變?yōu)?29px，使布局精確正常，效果如圖10。

3 總結(jié)

通過(guò)以上網(wǎng)頁(yè)精確布局我們可以得出：

1）使用CSS+Div可以實(shí)現(xiàn)網(wǎng)頁(yè)精確布局。

2）每個(gè)div區(qū)域的尺寸除了本身的寬度和高度外，還要精確計(jì)算各個(gè)方向的邊框，內(nèi)邊距，外邊距對(duì)總寬度和總高度的影響[5]，只有這樣才能實(shí)現(xiàn)精確布局，否則哪怕lpx的空間也會(huì)使布局異常。

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

本文網(wǎng)頁(yè)精確布局進(jìn)行了舉例和分析，使用CSS盒模型并結(jié)合盒模型的各個(gè)屬性設(shè)置實(shí)現(xiàn)網(wǎng)頁(yè)精確布局，達(dá)到精確布局網(wǎng)頁(yè)的目的。

參考文獻(xiàn)：

[1] AdamFreeman.HTML5權(quán)威指南[M].北京：人民郵電出版社， 2014.

[2]溫謙.網(wǎng)頁(yè)設(shè)計(jì)css標(biāo)準(zhǔn)教程[M].北京：人民郵電出版社， 2015.

[3]劉瑞新，網(wǎng)頁(yè)設(shè)計(jì)與制作html+css+j avascript[M].北京：機(jī)械工業(yè)出版社，2013，2016.

[4]鄭陽(yáng)平.網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程[M].北京：清華大學(xué)出版社，2016，2011.

[5]張珈殉.HTML5+CSS3基礎(chǔ)開(kāi)發(fā)教程[M].北京：人民郵電出版社，2017，1996.

【通聯(lián)編輯：謝媛媛】