盒子的世界
前言
之前说过了，浏览器拿到了HTML，CSS等资源文件之后就要展示给电脑前的用户看，关于展示的细节，我暂时讲不了也不想讲，本篇想提到一个很重要很重要很重要的概念！就是盒模型，不用蒙了，其实也就那么一回事。
?
盒子是啥相信是个人都知道盒子长什么样子：四四方方，有个外壳，里边可以装物品，大盒子还可以放小盒子。
这个是俗到不能再俗的解释了。
目前我们假设活在一个2D的世界，有一堆打开盖子的盒子平整地放在地板上，我们飞起来，从空中俯视这一堆盒子，想必大家都能想象这个场景了（想象不到的话只能怪你想象力不好了，那就在家里摆一堆盒子，把自己悬挂在空中去研究吧）。
针对眼前的这一幕，我们稍微来分析一下眼前那个盒子的外观跟大概解释一下盒模型的属性：
?
图1 w3c解释盒模型示意图
?
其实对于盒模型来说，内边距、外边距与边框是有分上下左右四个方向的，也就是你可以把盒子的左边框加厚一点，这个应该不难理解（示意图中采用了T,B,L,R缩写，分别代表上下左右）。
当然了，还可以描述盒子边框的厚度，盒子里边的贴纸背景等等，这些不影响整个盒子的模型概念，暂时忽略。
?
盒子的世界在WEB应用里边，我们的世界就是我们的浏览器了。
根据前面的比喻，在这里把浏览器看做是地板，在页面上的元素全都是一个一个盒子，经过前端工程师/重构师的摆放，一个网页就呈现在浏览器上了。
不对不对，我经常看到一些很不规则的图像也显示在浏览器里边啊，盒子四四方方的，为什么说页面上全部元素都是盒子呢？
先想一下，如果对于浏览器来说，仅仅处理四四方方的东西，它会方便多少！？尽量让一件事情变得简单容易处理，过多的负担会导致整个性能下降N倍。
那怎么处理那种不规则的形状呢？其实我们可以利用一些不规则的图片贴着盒子上来模拟，不也是一样道理吗。
其实浏览器不仅仅限定元素是盒子模型的，然后也限定了这些盒子要水平摆放的，不能够斜着放。
也许我们会感觉到，在这个盒子的世界里边，乱七八糟的规矩还真多。或许在WEB未来的发展，我们能够找到更加好的方法或者新的模型来解决这些限制，那就从现在开始努力吧！站着巨人肩膀上行动。
?
本篇总结本篇说到的CSS盒模型的概念对于前端工程师/重构师来说，是很基础也是非常重要的概念。务必，不对，应该是必须记住这个盒模型概念，并且了解不同的浏览器对它的解析有什么不同之处，这对于一个可用性强的WEB应用来说是非常重要的，谁都不会想让用户在互联网的那头骂娘。
?
?
