前言
之前说过了，浏览器拿到了HTML，CSS等资源文件之后就要展示给电脑前的用户看，关于展示的细节，我暂时讲不了也不想讲，本篇想提到一个很重要很重要很重要的概念！就是盒模型，不用蒙了，其实也就那么一回事。
盒子是啥
相信是个人都知道盒子长什么样子：四四方方，有个外壳，里边可以装物品，大盒子还可以放小盒子。
这个是俗到不能再俗的解释了。
目前我们假设活在一个2D的世界，有一堆打开盖子的盒子平整地放在地板上，我们飞起来，从空中俯视这一堆盒子，想必大家都能想象这个场景了（想象不到的话只能怪你想象力不好了，那就在家里摆一堆盒子，把自己悬挂在空中去研究吧）。
针对眼前的这一幕，我们稍微来分析一下眼前那个盒子的外观跟大概解释一下盒模型的属性：
padding (内边距)：padding的英文解释是“填料”，其实对于盒子来说，填料是什么呢？好吧，我又要啰嗦一下了，我在淘宝上买了一个玻璃杯，卖家帮我装进一个大盒子里边，如果他直接拿到物流公司将盒子寄给我，你可以想象一下在经过长途汽车的颠簸，以及快递员们的蹂躏，这个杯子能完整的到你手中不！？为了避免心爱的杯子变成碎片，店家肯定会在杯子装到盒子之后，在杯子旁边塞一些“填料”。在盒模型的概念，这里的填料就是内边距padding。
width (宽度)：那盒子的宽度怎么算呢，可能很多人认为应该把上面的边框也算到盒子的宽度进去，这就是很久很久之前的IE所做的事。其实对于浏览器的世界，你真正要放在盒子的东西是应该放到盒子里边去的，而不应该卡在边框上吧。举个例子吧，你告诉我：“我有一个50厘米宽的盒子，你可以放东西进去。”好吧，我就拿一个50厘米宽的尺子放到你那个盒子进去。咦！？卡住了？所以你会发现，对于什么都不懂的计算机来说，如果这样子反而不合适，因此，我们把在边框里边的内容看做是真正的Client区域！刚刚不是讲过padding吗，那这些填料算不算到宽度进去的呢？我只能说，跟前面解释边框算不算到宽度里边去一个道理，我们关心的是真正能够放东西的区域的宽度。所以盒模型的宽度就定义成真正用来装目标物体的区域的宽度。
height (高度)：跟width雷同，请将上述内容的“宽”换成“高”重新阅读一次~
margin (外边距)：介绍了前面几个属性之后，会发现，盒子的属性大致都已经被我们描述了，为什么又有属性了？这个margin属性不能简单的从一个盒子来看，当我们在空中俯视这一对盒子的时候，你会发现相邻的两个盒子都会有点距离，如果它们紧紧挨着，那就认为margin就是0呗，对于整个地板的布局来说，margin可以用来描述相邻盒子间的距离。
至此，盒子有了上边的这些属性，我们就能够把这个放着N个盒子的地板场景转化成一幅俯视图绘制在我们的浏览器上了，为了更加清晰的了解，我引用了w3c上解释盒模型的一张图（图片来自http://www.w3.org/TR/CSS2/box.html ）：
图1 w3c解释盒模型示意图
其实对于盒模型来说，内边距、外边距与边框是有分上下左右四个方向的，也就是你可以把盒子的左边框加厚一点，这个应该不难理解（示意图中采用了T,B,L,R缩写，分别代表上下左右）。
当然了，还可以描述盒子边框的厚度，盒子里边的贴纸背景等等，这些不影响整个盒子的模型概念，暂时忽略。
盒子的世界
在WEB应用里边，我们的世界就是我们的浏览器了。
根据前面的比喻，在这里把浏览器看做是地板，在页面上的元素全 都是一个一个盒子，经过前端工程师/重构师的摆放，一个网页就呈现在浏览器上了。
不对不对，我经常看到一些很不规则的图像也显示在浏览器里边啊，盒子四四方方的，为什么说页面上全部元素都是盒子呢？
先想一下，如果对于浏览器来说，仅仅处理四四方方的东西，它会方便多少！？尽量让一件事情变得简单容易处理，过多的负担会导致整个性能下降N倍。
那怎么处理那种不规则的形状呢？其实我们可以利用一些不规则的图片贴着盒子上来模拟，不也是一样道理吗。
其实浏览器不仅仅限定元素是盒子模型的，然后也限定了这些盒子要水平摆放的，不能够斜着放。
也许我们会感觉到，在这个盒子的世界里边，乱七八糟的规矩还真多。或许在WEB未来的发展，我们能够找到更加好的方法或者新的模型来解决这些限制，那就从现在开始努力吧！站着巨人肩膀上行动。
本篇总结
本篇说到的CSS盒模型的概念对于前端工程师/重构师来说，是很基础也是非常重要的概念。务必，不对，应该是必须 记住这个盒模型概念，并且了解不同的浏览器对它的解析有什么不同之处，这对于一个可用性强的WEB应用来说是非常重要的，谁都不会想让用户在互联网的那头骂娘。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
