• 栅格盒子模型设计的精妙之处
  • 解释
  • 总结

栅格盒子模型设计的精妙之处

容器两边都有15px的padding。

行两边具有-15px的margin。

列两边都有15px的padding，用来做槽宽的。

解释

容器两边都有15px的padding。
行两边具有-15px的margin。
列两边都有15px的padding。（用来做槽宽的）

如下图所示，蓝色的框表示容器，红色的框表示行，粉色的框表示列。

在图中，一个行X，有两个列，列A和列B，列A和列B都是有15px的槽宽。在列A和列B都铺满了文字的时候，槽宽可以让他们有点距离，看起来美观。

在列A当中套了一个行Y，行Y也有两个列，Y-A和Y-B，那么Y-A和Y-B两个列，也是应该有15px的槽宽的。

如图所示：Y-B在左边有15px的槽宽，A在左边有15px的槽宽，B列在右边有15px的槽宽，

那么Y-B和B之间，就是有45px的槽宽了。

这样的话，一个槽宽30px，一个槽宽45px，效果就太丑了。

列套行的时候，行上面是有-15px的margin，意思就是行相对于列 ，要向左右延伸15px，这时候，行延伸了15px，就正好覆盖了列的15px的槽宽，这是为了防止列套行。

行对于容器来说，行上面是有-15px的margin，意思就是行相对于容器，要向左右延伸15px，这个时候，容器就包不住行了。如下图所示：

但是容器上面还有15px的padding，也要向左右扩15px，这样就能包住行了。

总结

• 为了维护槽宽的版式，列两边必须要有15px的padding。
• 为了能够使列嵌套行，行两边必须要有-15px的margin。
• 为了能够使容器包裹行，容器两边必须要有15px的padding。

为了实现这种设计，可以明白，在栅格源码当中的每一条css样式，都是具有意义的。

到这里为止，我们看懂了栅格的源码，知道了less的递归的循环设计，这种设计能力，支撑了栅格系统的设计。