CSS笔记

CSS常用方法

// 隐藏滚动条
  &::-webkit-scrollbar {
        display: none;
    }
// 单行打点
.ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
// 多行打点
.multi-ellipsis(@lines) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: @lines;

  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}
// 清除浮动
.clearfix() {
  &::after {
    display: table;
    clear: both;
    content: '';
  }
}

// 移动端1px
<!--全部边框-->
.border-1px:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    border-radius: 4px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: top left;
}

<!--单边框，以下边框为例-->
.border-1px-top:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid red;
    transform: scaleY(.5);
    transform-origin: left top;
}

// 换行问题
在默认情况下，英文字符排列是这样的;
多个英文单词默认自动换行，单行字母不自动换行;

white-space:nowrap; // 强制不换行
word-break:break-all; // 自动换行

flex和img相关内容

iphone安全区适配 （constant和env的顺序不能改）

<meta name="viewport" content="width=device-width, viewport-fit=cover">

// 底部安全区适配
{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

safe-area-inset-left：安全区域距离左边界距离
safe-area-inset-right：安全区域距离右边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

左右横滑

.content {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  height: 100px;
  align-items: center;

  &::-webkit-scrollbar {
    display: none;
  }

  .imgWrapper {
    width: 100px;
    height: 100px;
    flex: none;
    border-radius: 6px;
    margin-right: 6px;
  }
}

参考

vant样式