CSS框模型的原理和應(yīng)用

顧兆旭

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

關(guān)鍵詞：CSS；框模型；內(nèi)邊距；外邊距

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

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

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

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

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

1 元素的內(nèi)邊距（Padding）

內(nèi)邊距指的是內(nèi)容和邊框之間的距離，設(shè)置這個屬性，可以對內(nèi)容進行適當?shù)牧舭祝恢劣趦?nèi)容緊挨著邊框。可以設(shè)置padding為絕對值和相對值，但是不允許使用負值。

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

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

*{

margin：0；padding：0；

}

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

2 元素的邊框（Border）

CSS的border屬性可以設(shè)定元素邊框的樣式、寬度和顏色，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設(shè)置4個值，4個值分別代表上、右、下、左4個方向的邊框樣式，比如：border-style：soliddotteddasheddouble；如果不需要邊框，

則設(shè)置border-style：none。

2.2 邊框的寬度（border-width）

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

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

雖然給邊框?qū)挾仍O(shè)置為50px，但實際效果在p元素上根本沒有邊框出現(xiàn)，原因是給邊框樣式設(shè)置了none，即邊框根本不存在，那么邊框?qū)挾纫沧兂闪?。由于border-style的默認值是none，所以如果希望邊框出現(xiàn)，就必須聲明一個邊框樣式。

2.3 邊框的顏色（border-color）

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

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

3 元素的外邊距（Margin）

圍繞在元素邊框的空白區(qū)域是外邊距。設(shè)置外邊距會在元素外創(chuàng)建額外的“空白”。endprint

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

例如：

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

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

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，可以用來單獨設(shè)置某一方向的外邊距。

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

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

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

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

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

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

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

3.3 具有嵌套關(guān)系盒子之間的距離

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

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

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

[參考文獻]

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

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

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