原文
簡書原文：https://www.jianshu.com/p/366665ab9c1c
大綱
1、CSS盒子模型的概念
2、行內元素是否也屬於盒子模型呢？
3、標准盒子模型和IE盒子模型
4、box-sizing：設置盒子模型
5、盒子模型是有空間的
1、CSS盒子模型的概念
css盒子模型 又稱框模型 (Box Model)，是CSS中一個重要概念，文檔中的每個元素被描繪為矩形盒子，所有文檔元素都生成一個矩形框，這稱為元素框(element box)，它描述了一個元素在文檔布局中所占的空間大小，而且，每個框影響着其他元素框的位置和大小。
盒子模型包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。
渲染引擎的目的就是判定盒子的大小從而實現網頁的布局。
2、行內元素是否也屬於盒子模型呢？
盒子模型，意思是具備內容、填充、邊框、邊界這些屬性，也就是說，行內元素如span等也可以設置這些屬性，設置寬高那些的，叫文檔流，所以行內元素和塊狀元素的區別就是無法設置寬和高這些，但是是盒子模型，使用display：block后，那么它就和塊狀與元素具有相同的屬性了。
即只要具備了內容、填充、邊框、邊界這些屬性的元素，就可以將其看成盒子模型，而不是在於是否可以設置寬高。
3、標准盒子模型和IE盒子模型
盒子模型的本質是將頁面上的一個個元素看做是一個個盒子，渲染器通過分析這些盒子的大小從而來對整個網頁進行布局。
標准盒子模型和IE盒子模型的區別在於其對元素的width和height的不同解析：（元素的width和height的大小指的就是我們給元素設置的width和height的大小）。
標准盒模型：元素的width和height = content
IE盒模型：元素的width和height =( content+border+padding )
由於不同盒子模型對元素的大小的不同解析從而導致整個元素框的大小有不同的解析
標准盒子模型：
元素框的總寬度 =
元素（element）的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；
元素框的總高度 =
元素（element）的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度
IE盒子模型：
元素框的總寬度 = 元素（element）的width + margin的左邊距和右邊距的值； 元素框的總高度 = 元素（element）的height + margin的上下邊距的值；
4、box-sizing：設置盒子模型
CSS3中新增的屬性：box-sizing模擬了標准盒子模型和IE盒子模型box-sizing:content-box | bordrer-box | padding-box | inherit。
默認值：content-box:標准盒子模型(border和padding不計算入width之內)
border-box:IE盒子模型(border和padding計算入width之內，其實就是怪異模式了~)
padding-box:padding計算入width內
ie8+瀏覽器支持content-box和border-box；
ff則支持全部三個值,只有ff支持padding-box
IE瀏覽器在getComputedStyle得到width/height是按照標准模式計算的，而不論box-sizing的取值。
關於box-sizing的使用
<html>
<head>
<meta charset="UTF-8">
<title>
盒子模型
</title>
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
div{
width:200px;
height:200px;
background:red;
padding:10px;
border:10px solid red;
margin:10px auto;
text-align:center;
}
#div1{
box-sizing:content-box;
}
#div2{
box-sizing:border-box;
}
</style>
</head>
<body>
<div id="div1">
content-box(標准盒子模型)
</div>
<div id="div2">
border-box(IE盒子模型)
</div>
</body>
</html>
5、盒子模型是有空間的
盒子模型是有空間的，主要表現在組成盒子的各個部分的層次不同。他們從上到下的順序是: border=======>content、padding=======>background-image=======>background-color=======>margin
參考網址
http://www.jianshu.com/p/e06e5c07f741
http://www.cnblogs.com/clearsky/p/5696286.html
https://www.cnblogs.com/xiaohuochai/p/5202597.html
https://www.cnblogs.com/laobeiV5/p/5114202.html
http://bbs.csdn.net/topics/340182086