CSS 高效开发秘籍：日常总结与实战技巧-2

解决顶部穿模最简单的方法

在页面的顶部写一个固定块，将穿模部分遮住

16进制颜色透明度

后面的90表示透明度为0.9，也就是90%
{ fillColor: "#c6e2ff90" }

色值越小透明度越高: #c6e2ff10，这个就相当于透明度0.1，也就是10%

样式穿透无效

有时候使用deep样式穿透修改无效，最有可能的原因是因为组件挂在的的位置不对。
如果组件在当前页面，使用deep穿透基本上可以修改样式，如果修改不了可能是权重不够。
如果你在hom页面使用deep修改时间弹窗无效，此时要考虑日历的弹窗组件是否是挂载在home页面，可以打开检查元素：

不要忽略伪元素的作用

常用的伪元素为before和after，这两个元素可以跟在一行的后面或者前面，它是以css的效果实现的，而且它会实际参与占位。
after伪元素的应用：在文字的后面添加一个记号

哪怕文字换行了，它还是会跟在文字后面

before也是一样的效果，这里就不演示了。
此外，除了伪元素实现这种外，还可以使用行内块实现：

        .add-sign {
            display: inline-block;
            width: 38px;
            height: 38px;
            background: #9394aa;
            font-size: 20px;
            color: #ffffff;
            text-align: center;
            line-height: 38px;
            border-radius: 50%;
            margin-left: 15px;
        }

文字的开始和结束的排列效果

一行的时候文字以start-end的形式排列

<div class="list-item-label">
    <div >标题名称标题名称标题名称标题名称标题名称</div>
    <div class="item-label-money">
        <div class="list-item-price">￥{{ item.price }}</div>
        <span class="list-item-number"> x2</span>
    </div>
</div>

如果文字换行了，那么文字实际上是一个div独占一行，金额就会来到第二行

给金额设置flex：1，金额这一行长度会自适应，所以金额来到第二行后，由于flex:1，金额就会变为独占一整行。
此时只需要设置 justify-content: flex-end;让文字从末端开始排列即可。

  .list-item-label {
        color: #ffffff;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .item-label-money {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          column-gap: 12px;
          .list-item-price {
            font-size: 24px;
            color: #dd8a58;
          }
          .list-item-number {
            font-size: 20px;
            color: #ffffff;
          }
        }
      }

横向排列块的边线

像这种横向排列的块，每个块中间有一条边线，其实这个可以不用边线实现，用背景色实现，给每个元素设置column-gap: 1px;间隙，然后父元素设置背景色即可。

<div class="list">
    <div class="list-item">分类一</div>
    <div class="list-item">分类二</div>
    <div class="list-item">分类三</div>
</div>

  .list {
    height: 80px;
    background: #555369;
    display: flex;
    column-gap: 1px;
    .list-item {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: #333333;
      background: #ffffff;
    }
  }

---

往期推荐：
CSS 高效开发秘籍：日常总结与实战技巧-1
JavaScript 开发秘籍：日常总结与实战技巧-1