原文地址：談談我對盒模型的理解 ?
盒子是無處不在的装哆。
html任何一個元素都可以看作一個盒子伐厌，這個盒子不可見台颠，但是它存在于頁面的每個角落褐望，也正是由于它不可見、不直觀串前，很多人在初學CSS的時候不能透徹得理解盒模型的概念瘫里，導致在頁面布局中出現(xiàn)各種各樣的問題。
盒子模型簡介
上面是一個盒子模型圖荡碾，一個盒子包括了content（實際內(nèi)容）谨读、border（邊框）、padding（內(nèi)邊距）和margin（外邊距）坛吁。
content（實際內(nèi)容）
盒子的內(nèi)容漆腌，顯示文本和圖像。我們給元素設(shè)置的width和height其實是content的寬高阶冈，
如果指定高度大于顯示內(nèi)容所需高度闷尿，多余的高度會產(chǎn)生類似內(nèi)邊距一樣的效果；如果指定高度小于顯示內(nèi)容所需高度女坑，會出現(xiàn)滾動條填具。如果元素內(nèi)容的高度大于元素框的高度，瀏覽器的具體行為取決于overflow屬性。
border（邊框）
元素的邊框是圍繞元素內(nèi)容的內(nèi)邊距的一條或多條線劳景。邊框由粗細誉简、樣式和顏色三部分組成。
padding（內(nèi)邊距）
清除內(nèi)容周圍的區(qū)域盟广，內(nèi)邊距是透明的闷串，取值不能為負，受盒子的Background屬性影響筋量，padding是有背景的烹吵。
margin（外邊距）
在元素外創(chuàng)建額外的空白，空白通常指不能放其他元素的區(qū)域桨武，而且在這個區(qū)域中可以看到父元素的背景（padding所帶的是本身的背景而非父元素）肋拔。margin經(jīng)常取負值實現(xiàn)定位的作用。
外邊距有一個合并問題呀酸，經(jīng)常使人們混淆凉蜂，簡單來說，外邊距合并指的是性誉，當兩個垂直外邊距相遇時窿吩，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者错览。
兩種盒子模型
其實盒模型有兩種爆存，分別是ie盒子模型（IE6以下版本瀏覽器)和標準w3c盒子模型，區(qū)別在于前者content的寬度和高度包括了border和padding蝗砾。
margin（外邊界）雖不可見，但是它確實在文檔中占據(jù)了空間携冤，我們要區(qū)分兩個概念即：盒子所占空間（計入margin ）和盒子實際的大械苛浮（不計入margin） 。
實例區(qū)分兩種盒模型
下面舉個例子來區(qū)分兩種盒模型：一個盒子的 margin 為 20px曾棕，border 為 2px扣猫，padding 為 10px，content 的寬為 200px翘地、高為 50px申尤。
ie盒子模型
盒子所占空間：width=20ｘ2+200=240? ? ? ? ? ? ? ? height=20ｘ2+50=90
盒子實際大小：width=200? ? ? ? ? height=50
標準w3c盒子模型
盒子所占空間：width=20ｘ2+2ｘ2+10ｘ2+200=264? ? height=20ｘ2+２ｘ2+10ｘ2 +50=114
盒子實際大醒酶：width=200 +2ｘ2+10ｘ2 =224? ? ? height=50+2ｘ2+10ｘ2=74
解釋到這里昧穿，有的人可能會想起CSS3里面有個叫做box-sizing的屬性，咦橙喘？兩個盒模型不就是它不同取值下的效果嗎时鸵？那我恭喜你，你說對了～
box-sizing和兩種盒模型不得不說的事
box-sizing有三個取值：
1、content-box:使元素遵循標準 w3c 盒子模型（默認值）饰潜。
2初坠、border-box:使元素遵循ie 盒子模型。
3彭雾、 inherit： 規(guī)定應從父元素繼承 box-sizing 屬性的值碟刺。
那么我可以用box-sizing的不同取值讓大家直觀地理解兩個盒子的區(qū)別，也順帶理解這個屬性薯酝，下面是需要用到的html代碼半沽，方便大家看得清楚，我給盒子外面添加一個寬高各500px的灰色背景蜜托。
????????<div class='bg'>
????????????<div class='box'></div>
????????</div>
box-sizing：content-box
? ????? .box{
? ? ????? ????? background-color: #91D4DA;
? ? ????????? ? width: 300px;
? ? ????????? ? height: 300px;
? ? ? ????????? padding: 20px;
? ? ? ????????? border: 10px solid #5B5B5B;
? ? ????????? ? box-sizing: content-box;? ? /*默認值抄囚，可以不寫*/
? ????????? }
下面改變padding和border的值
????????????.box{
????????????????background-color: #91D4DA;
????????????????width: 300px;
????????????????height: 300px;
????????????????padding: 50px;
????????????????border: 20px solid #5B5B5B;
????????????????box-sizing: content-box; /*默認值，可以不寫*/
????????}
大家可以發(fā)現(xiàn)橄务，元素盒子的實際寬度是隨padding和border改變的幔托。
box-sizing：border-box：
???????????? .box{
???????????????? background-color: #91D4DA;
???????????????? width: 300px;
???????????????? height: 300px;
???????????????? padding: 20px;
???????????????? border: 10px solid #5B5B5B;
???????????????? box-sizing: border-box;
???????????? }
下面改變padding和border的值
???????????? .box{
???????????????? background-color: #91D4DA;
???????????????? width: 300px;
???????????????? height: 300px;
???????????????? padding: 50px;
???????????????? border: 20px solid #5B5B5B;
??????????????? box-sizing: border-box;
???????????? }
發(fā)現(xiàn)區(qū)別了吧，當你遵循ie盒子模型時蜂挪，不管你如何設(shè)置padding和border（小于width/2）重挑，它只在盒子里面伸縮，不影響整體的寬高棠涮，這個border-box是不是在某些時候非常好用谬哀？但也不能盲目地用，因為它會影響content严肪，如果padding和border太大史煎，會把內(nèi)容擠掉的。
現(xiàn)在還在用IE6以下的瀏覽器的用戶已經(jīng)很少了驳糯，所以目前瀏覽器大部分元素都是基于W3C標準盒子模型 上篇梭。所以我們平常說的盒子模型一般就是標準
w3c 盒子模型 （但對于input、button元素默認border-box 酝枢，還是基于傳統(tǒng)的ie 盒子模型
）恬偷。一定有人會問，那我們怎樣讓我們的元素都遵循W3C標準盒子模型呢帘睦？哈哈袍患，看看你html的文件頭部是不是有一個<!DOCTYPE html> ，有這個竣付，就說明你已經(jīng)遵循W3C標準盒子模型了诡延。
