CSS框模型的原理和應用

顧兆旭

摘要：框模型是網頁制作中一個很重要的概念，css+div布局主要就是利用框模型的原理。文章闡述了CSS框模型的含義以及它所具有的要素的原理和應用，包括內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）。

關鍵詞：CSS；框模型；內邊距；外邊距

框模型（BoxModel，BM）也稱為盒模型。在網頁制作過程中，通常將網頁中的頁面分成若干個盒子，每個盒子放入內容并設置樣式。框模型的要素包括元素內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）[1_2]。結構如圖1所示。

元素框的最內部分是實際的內容，width和height指的是內容區域的寬度和高度；直接包圍內容的是內邊距padding，內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外

增加內邊距、邊框和外邊距不會改變內容區域的尺寸，但是會增加元素框的總尺寸。比如有如下代碼：

#box{width：70px；margin：10px；padding：5px；}

內容區域的寬度為70px，元素框（盒子）的寬度為width+margin-left+margin-right+padding-left+padding-right=70+10+10+5+5=100px。

1 元素的內邊距（Padding）

內邊距指的是內容和邊框之間的距離，設置這個屬性，可以對內容進行適當的留白，不至于內容緊挨著邊框。可以設置padding為絕對值和相對值，但是不允許使用負值。

在頁面中加入padding實例，并添加hi邊框，得到的效果如圖2所示。

是外邊距margin，外邊距默認是透明的，因此不會遮擋其后的任何元素。內邊距、邊框和外邊距都是可選的，默認值是零。許多瀏覽器對margin和paddmg設置了一個默認值，瀏覽器不同，這個默認值也不相同。為了瀏覽器的兼容性，通常在樣式的開始使用通用選擇器對所有元素的外邊距和內邊距設置為0，代碼如下：

*{

margin：0；padding：0；

}

當元素4個方向的內邊距不一樣時，采用padding：10px，15px，20px，25px；順序為上、右、下、左，即元素上內邊距為10px，右內邊距為15px，下內邊距為20px，左內邊距為25px。當給元素設置padding：10px，15px，20px；則表示上內邊距為10px，下內邊距為20px，左、右內邊距為15px。當設置padding：10px，15px；表示元素上下內邊距為10px，元素左右內邊距為15px。如果需要單獨設置某一個方向的內邊距，則采用4個單獨的屬性：padding-top，padding-right，padding-bottom和padding-left，分別表示上、右、下、左4個方向的內邊距。

2 元素的邊框（Border）

CSS的border屬性可以設定元素邊框的樣式、寬度和顏色，border屬性可以分解為：border-style，border-width和border-color〇

2.1 邊框的樣式（border-style）

CSS中使用border-style屬性定義邊框的樣式，如果沒有樣式，將根本沒有邊框顯示。

該屬性可以分解為4個方向的單邊樣式：1）01（161*-1；0卩-style，border-right-style，border-bottom-style和border-left-style。當4個方向的邊框樣式不一樣的時候，可以采用4個方向的單邊樣式進行定義，也可以給border-style設置4個值，4個值分別代表上、右、下、左4個方向的邊框樣式，比如：border-style：soliddotteddasheddouble；如果不需要邊框，

則設置border-style：none。

2.2 邊框的寬度（border-width）

通過border-width屬性為邊框指定寬度。比如設置p{border_width：5px；}。border-width可以分解為4個方向的單邊寬度：border-top-width，border-right-width，border-bottom-width，border-left-width。

在實際使用中，比如對p的樣式進行如下設置：p{border-style：none；border-width：50px}

雖然給邊框寬度設置為50px，但實際效果在p元素上根本沒有邊框出現，原因是給邊框樣式設置了none，即邊框根本不存在，那么邊框寬度也變成了0。由于border-style的默認值是none，所以如果希望邊框出現，就必須聲明一個邊框樣式。

2.3 邊框的顏色（border-color）

設置邊框顏色非常簡單。CSS使用一個簡單的border-color屬性，它一次可以接受最多4個顏色值。可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進制和RGB值。border-color可以分角軍為4個單邊|?ft：border-top-color，border-right-color，border-bottom-color和border-left-color。對4個方向的邊框顏色進行單獨定義。

如果希望創建一個不可見的邊框，可以使用邊框顏色值transparent，這個值用于創建有寬度的不可見邊框。

3 元素的外邊距（Margin）

圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的“空白”。endprint

使用margm屬性設置外邊距，這個屬性接受任何長度單位、百分數值甚至負值。使用margm屬性設置元素的外邊S巨。margin屬性接受任何長度單位，可以是像素、英寸、毫米、em、百分比或auto。

例如：

hi{margin：10px，0px，15px，5px}

4個值的順序上外邊距（top）開始圍著元素順時針旋轉的，即上、右、下、左。

hi{margin：10px，15px，5px}

3個值的順序是：上外邊距為10px，左、右外邊距為15px，下外邊距為5px。

hi{margin：10px，5px}

2個值的順序是：上下外邊距為10px，左右外邊距為

5px。

hi{margin：10px}

1個值表不4個方向的外邊距一樣。margin屬性可以分解為4個方向的外邊距：margin-top，margin-right，margin-bottom，margin-left，可以用來單獨設置某一方向的外邊距。

3.1 水平方向兩個盒子的距離

在頁面布局中，通常頁面需要放入多個盒子，此時需要考慮兩個盒子之間的距離。頁面中放入兩個盒子boxl和box2，如圖4所示。

設置兩個盒子浮動屬性[3]，如圖5所示。

則兩個盒子之間的距離為boxl的margin-right加上box2的margin-left等于30px。

3.2 垂直方向兩個盒子的距離

將兩個盒子垂直方向排列，設置兩個盒子的樣式，如圖6所示。

此時，兩個盒子之間的距離20px，原因是當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

3.3 具有嵌套關系盒子之間的距離

在頁面中放入兩個盒子，兩個盒子為嵌套關系，如圖7所示。

設置兩個盒子的樣式，如圖8所示。

此時，兩個盒子之間的距離是boxl盒子的padding加上box2盒子的margin為30px〇4結語框模型是網頁制作中一個很重要的概念，CSS+div布局主要就是利用框模型的原理。通過文本可以詳細了解CSS框模型的含義以及它所具有的要素：內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）的原理和應用，從而在網頁制作中靈活運動框模型進行布局設計。

[參考文獻]

[1]喻浩.CSS+DIV網頁樣式與布局從入門到精通[M].北京：清華大學出版社，2013.

[2]前沿科技.精通CSS+DIV網頁樣式與布局[M].北京：人民郵電出版社，2007.

[3]郭巧麗，曹宏舉.基于CSS+DIV的float技術在網頁制作中的應用[J].軟件工程師，2015（5）：24-26.endprint