新年了，祝各位前端佬们新的一年钞票够够的！代码想不写就不写！
言归正传！今天来提一提另一种思路，来理解CSS中的盒模型。
话说还是以前不懂这块时，然后网上搜索，大部分文章都是先上一通Padding、Margin、Border、Content，然后搭上个IE怪异模式讲解，然后，就没了然后....😑😑😑😑
要是按上面的思路去走，想破脑袋没有理解那是啥意思。
IE都““走””多少年了，怎么还怪异模式呢？
直到看过W3C文档中的盒模型文本解释，[链接戳这里~](Box model (w3.org))，再加上阅读了张鑫旭大佬《CSS世界》书籍，总算能从逻辑上，自我解释的通了。
😈😈保命提要！！！！！！😈😈
所以，这里将自己理解的一些归纳，分享给各位前端大佬。有错误，请拍轻点！
1、什么是盒模型？
文档里Box modal里，开篇是这句话。
The CSS box model describes the rectangular boxes that are generated for elements in the [document tree] and laid out according to the [visual formatting model].
大概意思就是，文档树中的元素，是根据盒模型来生成展示模型的。
拿现实中来做对比，盒子好比砖头，堆叠成一栋栋楼，盒模型构建CSS世界。
但CSS中，堆叠的方式跟现实中的砖头不太一样。CSS中堆叠的方式有两种，一种称为块（Block）、另一种称为内联（inline）。块堆叠的方式是独占一行，行内堆叠方式是不会独占一行，只有一行的空间不够了，才会换下一行。这个前端佬肯定熟。
这种堆叠的方向有一个默认方向，即为从上往下，从左往右，规范里称为流（flow）。之所以说默认方向，是因为，这种流向是可以更改的，这里不做过多解释。我的另一篇文章有应用，点这里查看（链接）。
2、多姿多彩的盒子
再接着贴上规范中（Visual formatting model）的一句话。
In the visual formatting model, each element in the document tree generates zero or more boxes according to the [box model].
意思就是，一个元素的可视化模型，是由多个根据盒模型生成的盒子组成的。
首先亮个前端佬们肯定熟悉的图：
这四个就是一些文章中常说的，Margin盒子、Broder盒子、Padding盒子、Content盒子，也是这些盒子，定义了元素的尺寸（Box dimensions）。
到这里，很多文章就戛然而止了。但前端佬们，可以仔细想想，仅仅这四个盒子就够用吗？
嗯？？
当然不够！！！
你看，光上面有提到说CSS堆叠的两条规则，一个块，一个内联，靠上面这四个盒子，怎么去区别开呢？
脑袋一拍！
再加盒子就是！叫做外在盒子。
外在盒子属性如果是 块(block) 就是块级元素，外在盒子如果是 内联(inline) 就是内联元素。这种对应就是理解CSS中display：inline-block。按照这个思路，display:block;就应该是display:block-block;
既然有了外，那就会有内。容器盒子登场！
大致一个元素所包含盒子可以这么示意：
但就这些盒子就够用吗？不够哦！像display:item-list这种，外面自带一个 标记（mark）盒子。
除了这些，我们平时的行内文字这里，也有一些盒子，如下：
匿名内联盒子（anonymous box）：外部无元素包裹，尺寸由文字控制。
行盒子(line box)：决定单行文本宽高。
字符盒子（character box）: 单个文字。
图片盒子（IMG box）: 图片。
等等等更多的盒子................................
但这里又注意到，看过规范的朋友应该会疑惑。你说的这些，我怎么没有在文档上看到？
所以，这里就要说明下。w3c规范中并没有什么总结性的盒子分类，这些盒子，都仅仅是在描述中提到这个box，那个box。比如有P box、em box。
如下图：
结合上面说的，盒模型就是CSS构建元素几何图形的一种思路。不光上面提到的一些盒子，如table元素，flex弹性盒子之类的，都可以这么去理解。
感兴趣的前端大佬可以去自己看看，到时候有新发现可以分享告知下，一定捧场！！！
3、写在最后
本来想搞个系列，再说说盒模型中各种属性的作用细节，比如width、height、padding等等。但那种长篇大作，有机会再起篇幅！感谢看到这里！！
