基于CSS+Div的盒模型網頁精確布局方法研究

高葵 付曉翠 李蔚妍

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

關鍵詞：CSS+Div;盒模型;寬度;高度;內邊距;外邊距;邊框

中圖分類號：TP311 文獻標識碼：A

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

開放科學（資源服務）標識碼（OSID）：

1 背景

在使用CSS+Div進行布局的過程中，使用css盒模型可以實現網頁精確布局。盒模型的概念，盒模型的相關屬性（寬度，高度，內邊距，外邊距，邊框等）都會影響著精確布局，如果使用不當，都會導致在網頁布局中出現異常。本文通過實例，精確計算網頁區域，實現網頁精確布局。

2 使用舉例

2.1盒子模型

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

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

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

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

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

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

盒子的總寬度=盒子左外邊距+盒子左邊框+盒子左內邊距+內容寬度+盒子右內邊距+盒子右邊框+盒子右外邊距

盒子的總高度=盒子上外邊距+盒子上邊框+盒子上內邊距+內容高度+盒子下內邊距+盒子下邊框+盒子下外邊距

2.3 應用舉例

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

對應的主要代碼如下：

分析：從上可以看到

1）整個頁面由6個盒模型構成，分別為id名稱為contamer，banner，link，content，right，footer的div標簽加css屬性設置來實現。

2） container標簽的寬度為800px，banner和footer沒有設置寬度，默認和其所在的DIV標簽寬度相同。當設置了邊框，內邊距，外邊距的數值時，banner和footer會自動調整來適應所在div標簽區域大小，看似沒有設置，實則更靈活[4]。

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

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

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

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

例題3：在布局效果2頁面的基礎上設置content區域的上外邊距，效果如圖5。

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

#content f

margin-top：lOpx;）

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

同理若link，content區域增加了右外邊距Spx，若right區域寬度不進行修改，則會出現總寬度=200px+450px+144px+6px+5px+5px=8lOpx，，超出了最外層contamer的寬度800px，效果如圖7所示。

可以修改right區域的寬度由原來的144px變為減少lOpx即134px，使布局精確正常，效果如圖8。

例題4：在布局效果7的頁面基礎上完成設置link區域的內邊距頁面，效果圖9。

修改link區域的右內邊距屬性，給div標簽添加如下CSS屬性

分析：從上可以看到link區域由于右內邊距的屬性，增加了5px的總寬度，導致三部分總寬度=200px+5px+450px+144px+6px+5px+5px=815px超過了contamer區域，出現異常。可以修改right區域的寬度為由原來的134px減少5px變為129px，使布局精確正常，效果如圖10。

3 總結

通過以上網頁精確布局我們可以得出：

1）使用CSS+Div可以實現網頁精確布局。

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

4 結束語

本文網頁精確布局進行了舉例和分析，使用CSS盒模型并結合盒模型的各個屬性設置實現網頁精確布局，達到精確布局網頁的目的。

參考文獻：

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

[2]溫謙.網頁設計css標準教程[M].北京：人民郵電出版社， 2015.

[3]劉瑞新，網頁設計與制作html+css+j avascript[M].北京：機械工業出版社，2013，2016.

[4]鄭陽平.網頁設計與制作實用教程[M].北京：清華大學出版社，2016，2011.

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

【通聯編輯：謝媛媛】