7.5.1 tile-content样式定义

大概设置了布局以后,就分别来实现这些样式。首先对于tile-content样式,只需要让其充满tile容器的全屏即可。代码如下:

  1. .tile .tile-content {
  2. width: 100%; /* 充满父元素*/
  3. height: 100%;
  4. padding: 0; /* 内外边距都取消*/
  5. margin: 0;
  6. display: block; /* 块级显示*/
  7. position: absolute; /* 绝对定位*/
  8. left: 0;
  9. top: 0;
  10. overflow: hidden;
  11. }

上面的代码取消了内外边距的设置。如果确实想使用一些内边距,则在tile-content上附加一个padded样式即可。实现代码如下:

  1. .tile .tile-content.padded {
  2. padding: 10px; /* 10像素足够了*/
  3. }