正文
那么，你说说看什么是「盒子模型」？
这一次，我马上 Google 了这个概念。机智如我，基于我以上的结论，很快我又得出了以下的解读。
盒子模型
在我看来，「盒子模型」，
本质就是去处理布局中，元素大小、位置和距离的关系。
![]()
在上面的场景中，键盘和紫色书是有尺寸、边框的，它们是并排放置的，彼此之间的距离可以使用盒子模型中的「外边距（margin）」来表示。
鼠标被紫色书包含着（如果按照完全 2D 的视角），它们的距离可以使用「内边距（padding）」来表示。
白色书和紫色书交叠在一起的，这个如何表示呢？
哈哈，它们其实同样可以使用某一方的「外边距(margin)」来处理，只不过值要是负数而已。
![]()
我找到了实习导师，把我刚刚总结的答案告诉了他，他微微一笑：「这个回答还算不错」，接着又问道：
那么在网页布局中，「盒子模型」是怎么被使用的呢？
当时我的内心是这样的：
![]()
你怎么这么多问题，你特么还有完没完!!!
理智的我压制了自己的小情绪，不就是怎么使用「盒子模型」吗？
绝对定位布局
机智的我思考片刻，很快就有了答案，这也太简单了！
直觉上我们只要把网页划分成一个个小块，然后调整它们的位置就行了。
拿豆瓣的首页来说，我们可以把第一行分为三块，分别为豆瓣的 logo、搜索框以及后面的热搜主题。
然后我们只需要使用「外边距(margin)」来设置他们和浏览器左边界之间的距离，就 OK 了。
![]()
哈哈，我简直就是个天才。
我把我的答案告诉了实习导师。心里美滋滋的：「我聪明吧」。
实习导师轻瞟了一眼我的答案，预料中的赞美和肯定并没有出现。
