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

高葵 付曉翠 李蔚妍

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

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

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2020）27-0191-03

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

1 背景

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

2 使用舉例

2.1盒子模型

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

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

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

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

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

盒子模型實際占有的空間可以用總高度和總寬度來描述。

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

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

2.3 應(yīng)用舉例

例題1：完成頁面，效果如圖2。

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

分析：從上可以看到

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

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

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

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

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

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

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

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

#content f

margin-top：lOpx;）

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

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

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

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

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

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

3 總結(jié)

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

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

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

4 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

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

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