做前端最開始的基礎(chǔ)便是學(xué)習(xí)前端標(biāo)簽、理解前端盒模型結(jié)構(gòu)，深入理解盒模型能夠幫助我們做好前端頁(yè)面排版，規(guī)避常規(guī)問題。

為了能更加直觀的理解和想象前端盒模型，我們要將前端技術(shù)生活化。

制作前端頁(yè)面好比生活的規(guī)置收納，我們將HTML頁(yè)面看做一個(gè)倒過來的的收納盒（因?yàn)镠TML頁(yè)面是從上向下排列的，重力向上）；我們要將元素（小盒子）在大盒子中排版放置。

再來將頁(yè)面元素?cái)M物化：div、p等之類的塊元素是紙盒子，a、span等之類的行內(nèi)元素是軟包裝（塑料袋子）；紙盒子可以設(shè)置寬高的，軟包裝需要用內(nèi)容填充起來。

在規(guī)置過程中遵循大套小的原則進(jìn)行排列，將所有盒子按照自己想要的樣子一層層堆起來。

在盒子出現(xiàn)左右浮動(dòng)時(shí)，如果下一層的元素小與之一層中間的空余寬度就會(huì)向這一層塌陷，所有在下一層之上要先清除浮動(dòng)，即加一層隔板。

在理解盒模型的基礎(chǔ)后我們繼續(xù)了解目前盒模型的標(biāo)準(zhǔn)。

盒子模型有兩種，W3C的標(biāo)盒模型和IE的獨(dú)特盒模型。

1、W3C定義的標(biāo)準(zhǔn)盒模型包括margin、border、padding、content ，而區(qū)別在于標(biāo)準(zhǔn)盒模型元素的width=content的寬度

2、IE獨(dú)特盒模型與W3C的標(biāo)準(zhǔn)盒模型唯一區(qū)別就在于元素的寬度，元素寬度的width=content+padding+border

兩者的區(qū)別：W3C的盒子模型以內(nèi)容為標(biāo)準(zhǔn)，更加便于書寫計(jì)算，IE的盒子模型更貼近于生活，元素的寬度包含border（外殼）和padding（填充物），content（物品），大小以盒子外形為標(biāo)準(zhǔn)，便于理解。

W3C也認(rèn)識(shí)到自己的問題了，所以在CSS3中新增了一個(gè)樣式box-sizing，包含兩個(gè)屬性content-box 和 border-box?？梢愿淖儺?dāng)前的盒模型模式。

（1） content-box  元素的width=content+padding+border （（默認(rèn)是content-box）

（2） border-box  ：元素的width=width