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 计算属性
