所有HTML元素可以看作盒子，在CSS中秧秉，"box model"這一術(shù)語是用來設(shè)計和布局時使用污桦。
- css盒子模型 又稱框模型 (Box Model)，是CSS中一個重要概念书幕，文檔中的每個元素被描繪為矩形盒子新荤，所有文檔元素都生成一個矩形框，這稱為元素框(element box)台汇，它描述了一個元素在文檔布局中所占的空間大小苛骨，每個框影響著其他元素框的位置和大小。它包括：外邊距（margin）苟呐，內(nèi)邊距（padding）痒芝，邊框（border），內(nèi)容（content）牵素。
- 標(biāo)準(zhǔn)w3c盒子模型和IE盒子模型
盒子模型的本質(zhì)是將頁面上的一個個元素看做是一個個盒子严衬，渲染器通過分析這些盒子的大小從而來對整個網(wǎng)頁進行布局。標(biāo)準(zhǔn)盒子模型和IE盒子模型的區(qū)別在于其對元素的width和height的不同解析：（元素的width和height的大小指的就是我們給元素設(shè)置的width和height的大邪蚀簟）请琳。
標(biāo)準(zhǔn)w3c盒子模型：元素的width和height = content
IE盒子模型：元素的width和height =( content+border+padding )
如下：
標(biāo)準(zhǔn)w3c盒子模型
標(biāo)準(zhǔn)w3c盒子模型.jpg
標(biāo)準(zhǔn)w3c盒子模型的width = content的widht
標(biāo)準(zhǔn)w3c盒子模型的height = content的height
// 所占區(qū)域
標(biāo)準(zhǔn)w3c盒子模型所占區(qū)域的總寬度 = content的widht + padding的左右邊距和 + 左右border和 + margin的左右邊距和
標(biāo)準(zhǔn)w3c盒子模型所占區(qū)域的總高度 = content的height + padding的上下邊距和 +上下border和 + margin的上下邊距和
IE盒子模型
IE盒子模型.jpg
IE盒子模型的width = content的widht + padding的左右邊距和 + 左右border和
IE盒子模型的height = content的height + padding的上下邊距和 +上下border和
// 所占區(qū)域
IE盒子模型所占區(qū)域的總寬度 = content的widht + margin的左右邊距和
IE盒子模型所占區(qū)域的總高度 = content的height + margin的上下邊距和
- box-sizing
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-box:IE盒子模型(怪異模式)
padding-box:padding計算入width內(nèi)
此處只列舉常用的兩種模式
//標(biāo)準(zhǔn)盒子模型
div{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
//IE盒子模型
div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
兼容：ie8+瀏覽器支持content-box和border-box赠幕，ff則支持全部三個值,只有ff支持padding-box俄精，IE瀏覽器在getComputedStyle得到width/height是按照標(biāo)準(zhǔn)模式計算的，而不論box-sizing的取值劣坊。
建議：使用w3c標(biāo)準(zhǔn)盒子嘀倒，對瀏覽器的兼容度較高，是網(wǎng)頁兼容各瀏覽器
-
盒子模型空間結(jié)構(gòu)
盒子模型空間結(jié)構(gòu).png
如圖局冰，盒子模型的空間結(jié)構(gòu)可以理解為测蘑，從上到下依次是,
???1. border
???2. content+padding
???3. background-image
???4. background-color
???5. margin
相關(guān)文章：
???http://www.reibang.com/p/6e7d830a5102
???http://www.reibang.com/p/366665ab9c1c
今天的成功是因為昨天的積累，明天的成功則依賴于今天的努力康二。成功需要一個過程碳胳。
