組成：
内容區（content）
内容區是盒子模型的中心，它呈現了盒子的主要資訊内容，這些内容可以是文本、圖檔等多種類型。内容區有三個屬性，width、height 和overflow。使用width和height屬性可以指定盒子内容區的高度和寬度，當内容資訊太多，超出内容區所占範圍時，可以使用overflow 溢出屬性來指定處理方法。當overflow 屬性值為hidden時，溢出部分将不可見；為visible時，溢出的内容資訊可見，隻是被呈現在盒子的外部；當為scroll時，滾動條将被自動添加到盒子中，使用者可以通過拉動滾動條顯示内容資訊；當為auto時，将由浏覽器決定如何處理溢出部分。
填充（padding）
填充是内容區和邊框之間的空間。填充的屬性有五種 ，即padding -top、padding -bottom、padding -left、padding-right 以及綜合了以上四種方向的快捷填充屬性padding。使用這五種屬性可以指定内容區資訊内容與各方向邊框間的距離。設定盒子背景色屬性時，可使背景色延伸到填充區域。
邊框（border）
邊框是環繞内容區和填充的邊界。邊框的屬性有border-style、border-width和border-color 以及綜合了以上三類屬性的快捷邊框屬性 border。border-style 屬性是邊框最重要的屬性，如果沒有指定邊框樣式，其他的邊框屬性都會被忽略，邊框将不存在。CSS規定了dotted（點線）、dashed（虛線）、solid(實線)等九種邊框樣式。使用border-width屬性可以指定邊框的寬度，其屬性值可以是長度計量值，也可以是CSS規定的thin、medium 和thick。使用border-color屬性可以為邊框指定相應的顔色，其屬性值可以是RGB值，也可以是CSS 規定的17個顔色名 。在設定以上三種邊框屬性時，既可以進行邊框四個方向整體的快捷設定，也可以進行四個方向的專向設定，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。設定盒子背景色屬性時，在IE中背景不會延伸到邊框區域，但在FF等标準浏覽器中，背景顔色可以延伸到邊框區域，特别是單邊框設定為點線或虛線時能看到效果 。
空白邊（margin）
空白邊位于盒子的最外圍，是添加在邊框外周圍的空間。空白邊使盒子之間不會緊湊地連接配接在一起，是CSS 布局的一個重要手段。空白邊的屬性有五種 ，即margin-top、margin-bottom、margin- left、margin-right以及綜合了以上四種方向的快捷空白邊屬性margin，其具體的設定和使用與填充屬性類似。對于兩個相鄰的（水準或垂直方向 ）且設定有空白邊值的盒子，他們鄰近部分的空白邊将不是二者空白邊的相加，而是二者的并集。若二者鄰近的空白邊值大小不等，則取二者中較大的值。同時，CSS 容許給空白邊屬性指定負數值，當指定負空白邊值時，整個盒子将向指定負值方向的相反方向移動，以此可以産生盒子的重疊效果。采用指定空白邊正負值的方法可以移動網頁中的元素，這是CSS 布局技術中的一個重要方法。
盒模型是有兩種标準的，一個是W3C标準模型，一個是IE模型。
差別：
在 标準盒子模型中，width 和 height 指的是内容區域的寬度和高度。增加内邊距、邊框和外邊距不會影響内容區域的尺寸，但是會增加元素框的總尺寸。
IE盒子模型中，width 和 height 指的是内容區域+border+padding的寬度和高度。
css如何設定兩種模型
這裡用到了CSS3 的屬性 box-sizing
/* 标準模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box; 複制
為什麼會出現不同模型？
當年微軟的IE浏覽器占據超過80%市場佔有率的時候，想自己獨立制定一套浏覽器标準，其中就包括IE的盒模型，但是有很多公司不同意IE的做法，他們遵循的是W3C的标準來定制浏覽器，也就造成了現在浏覽器不同的CSS盒模型，但是仍有很多老網站采用的是老IE的标準(怪異模式)，是以很多浏覽器保留了IE的怪異模式。
content-box的缺點
目前任何浏覽器預設使用的都是content-box，但是這個内容盒子有一個缺點，舉個栗子
假設我們想要兩個子容器float:left，寬度各50%，然後給一點padding，最後讓子容器并排充滿父容器，代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father-box{
width: 500px;
background: #0ba1b5;
}
.left-box{
width: 50%;
padding: 10px;
height: 100px;
float: left;
background: #b23e35;
}
.right-box{
width: 50%;
padding: 10px;
float: left;
height: 100px;
background:#77b55a;
}
</style>
</head>
<body>
<div class="father-box">
<div class="left-box">left-box</div>
<div class="right-box">right-box</div>
</div>
</body>
</html> 複制
我們在浏覽器中運作之後發現，想象的很美好 結果卻并不美好，因為兩個子元素寬度超過了50%，導緻了折行，于是寬度就不能設定為50%了，隻能将寬度減去padding的值，在這種時候，border-sizing就派上用場了。
border-sizing的優點
border-sizing的誕生就是為了解決content-sizing的缺點，border－sizing意味着子容器的padding和border厚度都算在50%内，這樣你就可以随意修改padding和border的值，而不用擔心父容易被撐爆
border-box的使用場合
目前最流行的css架構幾乎都采用了border－sizing，架構想要具備栅格系統，肯定要用border－sizing
通常情況下 你隻需要在必須使用border－sizing元素的身上使用這個屬性，其他元素都保持content－sizing就好了
子元素有padding和border，或者至少有其一，并且需要給子元素設定100%寬度（或者50%寬度等等），這時候顯然需要border-box。設為border-box之後，padding和border的厚度可以随意調，并不會溢出父元素。如果是content-box，那麼，寬度必然會溢出，而且，為了不溢出，你設定子元素的寬度就隻能是一個定值，或者是一個計算值（比如calc(100%- 20px)）。