盒子模型~一个老生常谈的话题，为啥这么说呢？因为基本上大大小小的面试都会问这个问题。
正好最近也在忙着这个，顺带记录下~正所谓"失之东隅收之桑榆"
第一次写东西，可能没什么谱。凑合着瞅两眼吧~
OK~下面就进入正题~
说起“盒子模型” ~ 我们先说说 --- “盒子”
“盒子”，在大家印象中通常是个四四方方的物体~对，就是你们想象中的那种小盒子(不是集装箱啊=_=|||，那种大个的我们称之为箱子)。
那亲爱的童鞋们，你们有没有想过“为什么盒子一定是四四方方的”？
因为~西瓜是圆的！对~就是这么简单~西瓜是圆的，所以盒子就是方的（ps：如果西瓜是方的可能果农伯伯会比较开心 ：））
就是这么巧~在浏览器中我们所谓的“盒子模型”也是四四方方的~
不同的是，现实生活中的“盒子”是立体的，有长、有宽、还有高 ~ 而浏览器下的“盒子模型”使却是2D的，only~X/Y（translate3d另说哦~）
浏览器中的"盒子"
浏览器中的“盒子”，不仅仅有width、height，还有内边距（padding）、边框（border）、外边距（margin）
其中width和height所围成的矩形（2d的呦~）面积，就是“盒子模型”中的content。至此~一个完整的“盒子模型”就算OK了~
当然这是默认情况下~但是，就算是默认情况还是会有意外发生（意外发生了怎么办，赶紧用紧急那啥啥hahaha~~~）
说正题~
意外从何而来~作为一个菜的不能再菜的web开发者都知晓的~当时是IE这个bitch啦~总是特立独行，增加游戏难度，拉低工作效率~
是的~在IE5/6中~“盒子模型”出现了新的解析方式~
在IE 5/6怪异解析模式下~“盒子模型”的宽度计算方式 width = content + padding + border。
这样一来就和W3C标准不一致了~当然在今天看来，这可能也算是一种创新吧（box-sizing）
新时代的“盒子模型”
在box-sizing这个属性上市以来~上述的“盒子模型”就是标准的“盒子模型”。
但是~划时代的box-sizing出现了~告诉开发者，那只不过是我的一个形态而已~ （变身~~~bilililili~）
box-sizing：（content-box、border-box、inherit）
content-box~好说，这个就是默认形态，也就是符合W3C标准解析的“盒子模型”。盒子的总宽度 = width（content的宽度）+paadding（左、右）+border（左、右）+margin（左、右）
border-box~老相识~
当“盒子模型”的box-sizing：border-box；时，盒子的宽高计算方式发生变化~盒子的总宽度 = width + margin（左、右）
而其中width也不再仅仅只是content的宽度~width = content + padding + border（是不是很眼熟，就是IE的怪异解析~ie5/6躲在角落里画圈圈~）
inherit~这个~跟着爸爸走吧
“盒子模型”不就是个方块么
是的！“盒子模型”对于浏览器来说就是一个有宽高、有边距（内外）、有边框的方块~
至于浏览器的布局~对于开发者们来说何尝不是搭积木呢（垒方块）~当然说到这其中不包括float、position、flex这些~那就不是搭积木这么简单了
话又说回来~浏览器中方块却又不都是“盒子模型”~
在浏览器中，能称之为“盒子模型”的元素，我们称之为块级元素（display：block；），宽高、边距、边框~应有尽有~
与块级元素相对应的~为我们称之为行级元素（display：inline；）~
行级元素 --- 可以设置宽高，但是无效，可以设置内边距（padding），有效~但是无法撑开父盒子，可以设置外边距（margin），上下外边距无效，可以设置边框（border），这个倒是还成~
理解块级元素和行级元素的童鞋~一定知道它们各有各的用途。但是实际开发中，总会有些特殊的应用场景~
比如~既希望两种在同一行展示（块级元素比较霸道~独占一行），又希望能拥有“盒子模型”的各项属性（inline宝宝心里苦~）~
就这样~inline-block出现了（display：inline-block；）行级块元素~满足了“既”也满足了“又”
对于浏览器中的“盒子模型”的问题~基本上也就这么多了~相信看了之后对“什么是盒子模型、盒子模型是什么、谁是盒子模型、谁不是盒子模型、怎么把不是盒子模型的转化成盒子模型”这几个问题应该有点头绪了吧~
第一次写博客~忒乱~再接再厉吧