CSS中，最重要的概念之一，就是盒模型。

盒模型由以下CSS屬性組成：

• 內(nèi)容
• padding 內(nèi)邊距
• border 邊框
• margin 外邊距

下面有一個最常見的例子，虛線不屬于盒模型，用于標(biāo)識范圍。

<div class="box"></div>

<style type="text/css">
    .box {
        width: 200px;
        height: 200px;
        background-color: green;
        padding: 20px;
        border: 5px solid red;
        margin: 50px;
    }
</style>

顯式效果：

Image 002.png

你可以使用Chrome（Ctrl + Shift + j）或者Firefox的firebug等開發(fā)者工具查看盒模型：

Image 001.png

我做了些簡單的標(biāo)記，黑色方框?qū)嵕€和最外邊的虛線一樣，都是為了標(biāo)識，而不是設(shè)置的樣式：

bo_副本.png

我們可以看到，div的內(nèi)容寬高度均為200px，對一個block或者inline-box元素設(shè)置內(nèi)邊距padding，內(nèi)邊距會影響一些CSS元素，比如說背景也會顯式在padding上。
紅色的為border，而border元素并不會算進(jìn)元素內(nèi)容，也就是說沒辦法獲得背景等。
margin元素一般是看不見的，也無法對其設(shè)置顏色等，margin常用來與其他元素分割一些距離。

通過DOM改變border的大小，或者顯式border，會改變元素的大小，可能會打亂布局，CSS中還有一個屬性outline，這個屬性和border相類似，也是可以作為邊框使用，但是和border不同的是，它是繪制在內(nèi)容上的，并不會改變盒子大小。IE7和更低版本不支持outline。

<br />

外邊據(jù)疊加

盒子模型還有一個特殊的東西，就是相鄰的外邊據(jù)相遇會進(jìn)行疊加，取最大的為最終外邊據(jù)。