项目常用css

1.css 一行文本超出

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap

2.多行文本超出显示

 overflow:hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

3.IOS手机容器滚动条不流畅

overflow：auto；
-webkit-overflow-scrolling：touch；

4.修改滚动条样式

// 隐藏div的滚动条
div::-webkit-scrollbar {
  display: none;
}
// div::-webkit-scrollbar 滚动条整体部分
// div::-webkit-scrollbar-thumb 滚动条里面的小方块
// div::-webkit-scrollbar-track 滚动条里面的轨道
// div::-webkit-scrollbar-button 滚动条两端按钮
// div::-webkit-scrollbar-track-piece 内层轨道
// div::-webkit-scrollbar-corner 边角 即两个滚动条的交汇处
// div::-webkit-resizer 

// 使用css写出一个三角形

  div {
    width: 0;
    height: 0;
    border: 5px solid #transparent;
    border-top-color: res;
  }

6.解决ios audio 无法自动播放、循环播放问题

const music = document.getElementById(video);
let state = 0;

document.addEventListener(touchstart, ()=>{
  if(state==0) {
    music.play();
    state = 1; 
  }
},false)

document.addEventListener("WeixinJSBridge", ()=>{
  music.play()
},flase)

// 循环播放
music.onended = ()=>{
  music.load();
  music.play()
}

7.水平垂直居中

div {
  width：100px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bootom: 0;
  left: 0;
  margin: auto;
}
// 父级控制子级居中
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

8.隐藏页面元素

display: none // 元素不存在
opacity: 0 // 元素存在， 透明度为0 事件仍可以触发
visibility: hidden // 元素隐藏，事件不可触发

9.calc 计算属性