參考博文：點(diǎn)擊這里
作者：KwooJan
出處： http://www.w3cfuns.com本文版權(quán)歸作者和w3cfuns共有喧枷，歡迎轉(zhuǎn)載马靠，但未經(jīng)作者同意必須保留此段聲明方面，且在文章頁面明顯位置給出原文鏈接仿耽，否則保留追究法律責(zé)任的權(quán)利眯搭。
盒子模型，是XHTML+CSS布局頁面中的核心业岁！要想學(xué)會用CSS布局頁面鳞仙，就首先要理解盒子模型！
什么是盒子模型笔时？
對于初學(xué)者來說棍好，不容易理解，但是對于生活中的盒子大家應(yīng)該熟悉允耿，大到集裝箱借笙，小到鉛筆盒，盒子模型你完全可以理解成現(xiàn)實(shí)生活中的盒子就可以了较锡，不然怎么能起個(gè)名字叫“盒子模型”呢?
好业稼！既然和現(xiàn)實(shí)生活中的盒子一樣，那我們想一下蚂蕴，生活中的盒子內(nèi)部是不是空的好用來存放東西低散，而里面存放東西的區(qū)域我們給他起個(gè)名字叫 “content(內(nèi)容)”，而盒子的盒子壁給他起個(gè)名字叫“border(邊框)”骡楼，如果盒子內(nèi)部的東西比如是一塊硬盤熔号，但是硬盤怕震動(dòng)，所以我們需要在硬盤的四周盒子的內(nèi)部均勻填充一些防震材料鸟整，這時(shí)硬盤和盒子的邊框就有了一定的距離了引镊，我們稱這部分距離叫“padding(內(nèi)邊距)”，如果我們需要購買許多塊硬盤，還是因?yàn)橛脖P怕震動(dòng)所以需要在盒子和盒子之間也需要一些防震材料來填充弟头，那么盒子和盒子之間的距離我們稱之為"margin(外邊距)"吩抓，請看下面兩圖：
OK~！這下盒子模型的四要素就出來了分別是：content(內(nèi)容)亮瓷、border(邊框)琴拧、padding(內(nèi)邊距)、margin(外邊距)
嘱支，如下圖：
我們的頁面就是由許許多多的盒子組成的蚓胸，但是現(xiàn)實(shí)生活中的盒子我們會忽略外邊距(margin)，但是在頁面中除师，我們是不能忽略外邊距(margin)的沛膳，只有包括外邊距的盒子模型在CSS中才是完整的，即使外邊距為零汛聚，我們也不要忽略它锹安，要知道他是存在的。
盒子3D模型
- 第一層border
- 第二層content+padding
- 第三層background-image
- 第四層background-color
- 第五層margin
盒子模型尺寸
盒子模型尺寸=邊框+外邊距+內(nèi)邊距+盒子中的內(nèi)容尺寸
