CSS常见问题汇总

常见CSS问题总结

css圆变形问题

解决：先放大一倍，在缩小一半

    height: 1px;
    width: 200%;
    background: #e6e6e6;
    margin-left: -50%;
    transform: scale(0.5);

flex 布局中让最后一个元素居右,有两种方案，

• 第一种给最后一个元素设置

  margin-left:auto;
  

• 第二种给最后一个元素设置

  flex：1;
  text-align:right
  

flex 布局中flex:1 子元素超过父元素宽度或者高度

第一种情况：是因为子元素中文字的长度过长 又设置了white-space: nowrap 属性 导致撑大
第二种情况：元素设置了padding的情况下也会超出父元素高度/宽度
解决方案： 设置父元素 width:0/height:0
总结：使用flex:1 的时候最好搭配上 width:0/height:0/overflow:auto

blog.csdn.net/Dj199831607…

css 下面的样式没有覆盖上面的样式（层级 一样）

//上面定义的公共样式
.base{
    background: #3470FF !important; // 如果这边不加!important 那么background 样式就不会进行覆盖
    color: #fff;
  }
// 下面引用
  .data-category{
    display: flex;
    justify-content: space-between;
    .category-item{
      flex: 1;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      padding: 20px 24px;
      cursor: pointer;
      background: #EDF2FD;
      &:last-of-type{
        margin-right: 0;
      }
    }
    .actived{
      @extend .base;
    }
  }