如上圖所示，一個(gè)標(biāo)準(zhǔn)的盒模型由四個(gè)部分組成：margin（外邊距）、border（邊框）、padding（內(nèi)邊距）、content（內(nèi)容）。

margin控制盒子與盒子的間距，padding控制邊框與內(nèi)容的間距。

padding會(huì)改變盒子的大小，但不會(huì)改變內(nèi)容的大小，因此在設(shè)置盒模型的大小時(shí)要考慮到padding的影響。

盒模型分為2種：標(biāo)準(zhǔn)盒模型、怪異盒模型。

盒模型會(huì)在DOCTYPE聲明的時(shí)候默認(rèn)標(biāo)準(zhǔn)盒模型，而沒有DOCTYPE則會(huì)在ie6\7\8形成怪異盒模型。

標(biāo)準(zhǔn)盒模型的寬/高=width/height+padding+border

怪異盒模型的寬/高=width/height=內(nèi)容的寬/高+padding+border，怪異盒模型的內(nèi)容寬高會(huì)被padding和border占據(jù)。

(由于我理解的盒子寬高不包括margin，所以上面的計(jì)算中未加上margin)

那么，如何轉(zhuǎn)換標(biāo)準(zhǔn)盒模型和怪異盒模型呢？

通過設(shè)置box-sizing：content-box/border-box；

content-box是轉(zhuǎn)換標(biāo)準(zhǔn)盒模型，border-box是轉(zhuǎn)換怪異盒模型。