7.1.1　方块定义

在分析Bootstrap所有的CSS组件时都可以看到，一个可重用的组件（尤其是可以并列多个显示的元素），在定义其样式的时候需要考虑到定位方式、显示方式、默认大小、内外边距等，如果是元素容器还要考虑到容器溢出的情况。

针对方块样式的定义，比较简单，没有太特殊的地方，所以请大家直接看代码吧。

  1. .tile {
  2.     position: relative;         /* 相对布局*/
  3.     overflow: hidden;           /* 内部元素溢出时，将其隐藏*/
  4.     display: block;             /* 块级显示*/
  5.     float: left;                        /* 左浮动*/
  6.     width: 120px;                       /* 标准的tile大小是120×120*/
  7.     height: 120px;
  8.     margin: 0 10px 10px 0;      /* 设置右外边距和底部外边距，稍后会讲解原因*/
  9.     padding: 0;                 /* 不设置内边距*/
  10.     cursor: pointer;            /* 默认鼠标移动上去时显示手形图标 */
  11.     background-color: #eeeeee;  /* 默认背景颜色是灰色 */
  12.     box-shadow: inset 0px 0px 1px #FFFFCC;      /* 设置少许的阴影 */
  13. }

上述代码中有一个地方需要说明一下，就是margin的定义，这里只定义了右边（right）和底部（bottom）的margin值，而没有定义左边（left）和顶部（top），主要是因为margin在一些浏览器上有重叠的问题，也就是说，如果你为一个方块定义了左右外边距分部是10px，那如果这两个方块在一起显示的话，其中间的间隔只有10px，而不是20px。为了消除这个bug，我们不采取对称的声明方式，以防止出现上述问题。

关于margin重叠的详细内容，请访问http://www.zhangxinxu.com/study/200908/margin-overlap.html。