什么是盒模型畏线？
目前盒模型分為兩種，分別是符合w3c標準的盒模型與IE盒模型豆混，這兩種盒模型在網頁布局中是有差異的媚媒，如果想進行網頁的排版就必須了解這兩種盒模型嗜逻；首先我們來了解一下標準的盒模型如下圖：
從圖 -1：來看我們可以很清晰的了解盒模型的基本構造包括：content，padding欣范，border变泄，margin組成；并且content部分不包含其他部分恼琼；
圖 -2：是IE盒子模型的基本構造與標準盒模型基本相同妨蛹，but 與標準盒模型不同的是對于content部分包含了padding，border部分晴竞；
舉個栗子：如果一個盒子的 margin 為 20px蛙卤，border 為 1px，padding 為 10px噩死，content 的寬為 200px颤难、高為 50px，假如用標準 w3c 盒子模型解釋已维，那么這個盒子需要占據的位置為：寬 20*2+1*2+10*2+200=262px行嗤、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬 1*2+10*2+200=222px垛耳、高 1*2+10*2+50=72px栅屏；假如用ie 盒子模型飘千，那么這個盒子需要占據的位置為：寬 20*2+200=240px、高 20*2+50=70px栈雳，盒子的實際大小為：寬 200px护奈、高 50px。
很多人會問該選擇哪種盒模型呢哥纫？當然是w3c標準盒模型啦~霉旗！怎么樣才算是選擇了標準 w3c 盒子模型呢？就是在網頁的頂部加上 doctype 聲明蛀骇。如果不加 doctype 聲明厌秒，那么各大瀏覽器會根據自己的行為去理解網頁，即 IE 瀏覽器會采用 IE 盒子模型去解釋你的盒子松靡，而其他瀏覽器會采用標準 w3c 盒子模型解釋你的盒子简僧，所以網頁在不同的瀏覽器中就顯示的不一樣了建椰。如果加上了 doctype 聲明雕欺，那么所有瀏覽器都會采用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了 ? ?(*^__^*) 嘻嘻……棉姐。
哇咔咔~ 屠列！以上均為本人個人理解，如有描述不當之處還請大家多多指教啦~
