2021-06-04 background-color背景颜色

div块级元素设置样式
①background-color:#f2f2f2;
②padding-right: 16px;

如图：

微信图片_20210604145039.png

// 追击样式  background-clip
 background-color:#f2f2f2;
 background-clip: content-box; //背景颜色除去margin padding 

具体图效果,如下：

5.png

顺带记录样式 一行排版6个元素，间隙占据16px，这里有7个间距。贴代码不多说

<div v-loading="loading" :style="styleObj">
        <div v-if="listData.length>0" class="template-list">
          <div v-for="(item, index) of listData" :key="index" class="template-item">
            <el-image :src="item.coverUrl" class="template-img" />
            <div class="template-content">
              <div class="title">{{ item.title }}</div>
              <div class="action-wrap">
                <i class="el-icon-delete template-btn" @click="onDelete(item.id)" />
                <i class="el-icon-edit template-btn" @click="onEdit(item.id)" />
              </div>
            </div>
          </div>
        </div>
        <div v-else class="no-data">
          暂无数据
        </div>
        <Pagination :show="pagination.total > 0" :total="pagination.total" :current-page="pagination.pageNum" :page-size="pagination.pageSize" @handleSizeChange="onSizeChange" @handleCurrentChange="onCurrentChange" />
      </div>
<style>
.template-list {
    padding-left: 16px;
    .template-item {
      display: inline-block;
      width: 16.66%; //100/6=16.66(约等于）
      padding-right: 16px;
      margin-bottom: 16px;
      background-color: #f2f2f2;
      background-clip: content-box;
      .template-img {
        width: 100%;
        border-radius: 3px 3px 0 0;
      }

      .template-content {
        padding: 11px 12px 12px;
      }

      .title {
        height: 38px;
        margin-bottom: 12px;
        line-height: 1.4;
        @include more-ellipsis()
      }

      .action-wrap {
        display: flex;
        justify-content: flex-end;
        color: $primary;
      }

      .template-btn {
        padding: 0 4px;
        font-size: 16px;
        cursor: pointer;

        & + .template-btn {
          margin-left: 8px;
        }
      }
    }
  }
</style>