原文
大綱
1头谜、CSS盒子模型的概念
2私爷、行內(nèi)元素是否也屬于盒子模型呢煞聪？
3斗躏、標(biāo)準(zhǔn)盒子模型和IE盒子模型
4、box-sizing：設(shè)置盒子模型
5昔脯、盒子模型是有空間的
1啄糙、CSS盒子模型的概念
css盒子模型 又稱(chēng)框模型 (Box Model)，是CSS中一個(gè)重要概念云稚，文檔中的每個(gè)元素被描繪為矩形盒子隧饼，所有文檔元素都生成一個(gè)矩形框，這稱(chēng)為元素框(element box)静陈，它描述了一個(gè)元素在文檔布局中所占的空間大小燕雁，而且诞丽，每個(gè)框影響著其他元素框的位置和大小。
盒子模型包含了元素內(nèi)容（content）拐格、內(nèi)邊距（padding）僧免、邊框（border）、外邊距（margin）幾個(gè)要素捏浊。
渲染引擎的目的就是判定盒子的大小從而實(shí)現(xiàn)網(wǎng)頁(yè)的布局懂衩。
2、行內(nèi)元素是否也屬于盒子模型呢金踪？
盒子模型浊洞，意思是具備內(nèi)容、填充胡岔、邊框法希、邊界這些屬性，也就是說(shuō)靶瘸，行內(nèi)元素如span等也可以設(shè)置這些屬性苫亦，設(shè)置寬高那些的，叫文檔流奕锌，所以行內(nèi)元素和塊狀元素的區(qū)別就是無(wú)法設(shè)置寬和高這些著觉，但是是盒子模型村生，使用display：block后惊暴，那么它就和塊狀與元素具有相同的屬性了。
即只要具備了內(nèi)容趁桃、填充辽话、邊框、邊界這些屬性的元素卫病，就可以將其看成盒子模型油啤，而不是在于是否可以設(shè)置寬高。
3蟀苛、標(biāo)準(zhǔn)盒子模型和IE盒子模型
盒子模型的本質(zhì)是將頁(yè)面上的一個(gè)個(gè)元素看做是一個(gè)個(gè)盒子益咬，渲染器通過(guò)分析這些盒子的大小從而來(lái)對(duì)整個(gè)網(wǎng)頁(yè)進(jìn)行布局。
標(biāo)準(zhǔn)盒子模型和IE盒子模型的區(qū)別在于其對(duì)元素的width和height的不同解析：（元素的width和height的大小指的就是我們給元素設(shè)置的width和height的大兄钠健）幽告。
標(biāo)準(zhǔn)盒模型：元素的width和height = content
IE盒模型：元素的width和height =( content+border+padding )
由于不同盒子模型對(duì)元素的大小的不同解析從而導(dǎo)致整個(gè)元素框的大小有不同的解析
標(biāo)準(zhǔn)盒子模型：
元素框的總寬度 =
元素（element）的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；
元素框的總高度 =
元素（element）的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度
IE盒子模型：
元素框的總寬度 = 元素（element）的width + margin的左邊距和右邊距的值裆甩；
元素框的總高度 = 元素（element）的height + margin的上下邊距的值冗锁；
4、box-sizing：設(shè)置盒子模型
CSS3中新增的屬性：box-sizing模擬了標(biāo)準(zhǔn)盒子模型和IE盒子模型box-sizing:content-box | bordrer-box | padding-box | inherit嗤栓。
默認(rèn)值：content-box:標(biāo)準(zhǔn)盒子模型(border和padding不計(jì)算入width之內(nèi))
border-box:IE盒子模型(border和padding計(jì)算入width之內(nèi)冻河，其實(shí)就是怪異模式了~)
padding-box:padding計(jì)算入width內(nèi)
ie8+瀏覽器支持content-box和border-box箍邮；
ff則支持全部三個(gè)值,只有ff支持padding-box
IE瀏覽器在getComputedStyle得到width/height是按照標(biāo)準(zhǔn)模式計(jì)算的，而不論box-sizing的取值叨叙。
關(guān)于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(標(biāo)準(zhǔn)盒子模型)
</div>
<div id="div2">
border-box(IE盒子模型)
</div>
</body>
</html>
5锭弊、盒子模型是有空間的
盒子模型是有空間的，主要表現(xiàn)在組成盒子的各個(gè)部分的層次不同擂错。他們從上到下的順序是:
border=======>content廷蓉、padding=======>background-image=======>background-color=======>margin
參考網(wǎng)址
http://www.reibang.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
