1. css 一行文本超出...
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
2.多行文本超出显示...
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp: 3;//此处的数字可变 此处是三行省略
overflow:hidden;
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滚动条的轨道（里面装有Thumb
div::-webkit-scrollbar-button滚动条的轨道的两端按钮，允许通过点击微调小方块的位置
div::-webkit-scrollbar-track-piece内层轨道，滚动条中间部分（除去
div::-webkit-scrollbar-corner边角，即两个滚动条的交汇处
div::-webkit-resizer两个滚动条的交汇处上用于通过拖动调整元素大小的小控件注意此方案有兼容性问题，一般需要隐藏滚动条时我都是用一个色块通过定位盖上去，或者将子级元素调大，父级元素使用overflow-hidden截掉滚动条部分。暴力且直接。
5.使用 css 写出一个三角形角标
元素宽高设置为 0，通过border属性来设置，让其它三个方向的border颜色为透明或者和背景色保持一致，剩余一条border的颜色设置为需要的颜色。
div{
width:0;
height:0;
border:5pxsolid transparent;
border-top-color: red;
}
6.解决 ios audio 无法自动播放、循环播放的问题
ios手机在使用audio或者video播放的时候，个别机型无法实现自动播放，可使用下面的代码hack。
// 解决ios audio无法自动播放、循环播放的问题
varmusic =document.getElementById('video');
varstate =0;
document.addEventListener('touchstart',function(){
if(state==0){
music.play();
state=1;
}
},false);
document.addEventListener("WeixinJSBridgeReady",function(){
music.play();
},false);
//循环播放
music.onended =function(){
music.load();
music.play();
}
7.水平垂直居中
我一般只使用两种方式 定位 或者flex，我觉得够用了。
div{
width:100px;
height:100px;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}
父级控制子集居中
.parent{
display: flex;
justify-content: center;
align-items: center;
}
8.隐藏页面元素(display:none;visibility:hidden;opacity:0的区别)
1、空间占据
display:none隐藏后不占据额外空间，它会产生回流和重绘，
而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。
2、子元素继承
display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示
三、事件绑定
display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件也无法触发；
opacity: 0元素上面绑定的事件是可以触发的。
（这个就不太好在图上看了，可以自己测试一下）
四、过渡动画
transition对于display肯定是无效的，大家应该都知道；
transition对于visibility也是无效的；
transition对于opacity是有效，大家也是知道的:).
9.前端工程化
一提到前端工程化很多人想到的都是webpack，这是不对的，webpack仅仅是前端工程化中的一环。在整个工程化过程中他帮我们解决了绝大多数的问题，但并没有解决所有问题。
前端工程化是通过工具提升效率，降低成本的一种手段。
近些年被广泛的关注和探讨，究其原因主要是因为现代化前端应用功能要求不断提高，业务逻辑日益复杂，作为当下互联网时代唯一不可或缺的技术，前端可以说是占据了整个开发行业的半壁江山。从传统的网站，到现在的 H5,移动 App,桌面应用，以及小程序。前端技术几乎是无所不能的全面覆盖。
在这些表象的背后呢，实际上是行业对开发人员的要求发生了天翻地覆的变化，以往前端写 demo，套模板，调页面这种刀耕火种的方式已经完全不符合当下对开发效率的要求，前端工程化就是在这样一个背景下被提上台面，成为前端工程师必备的手段之一。
一般来说前端工程包含，项目初始化，项目开发，集成，构建，打包，测试，部署等流程。工程化就是以工程的角度来解决这些问题。比如项目初始化我们一般使用npm init, 创建页面模板使用 plop，我们喜欢使用 ES6+开发，但是需要通过 babel 编码成 ES5，持续集成的时候我们使用 git，但是为了保持开发规范我们引入了 ESLint，部署一般使用 ci/cd 或者 jenkins 等等。
前端工程化是一个比较大的话题，后面我们会单开话题来讲。
10.contenteditable
html中大部分标签都是不可以编辑的，但是添加了contenteditable属性之后，标签会变成可编辑状态。
不过通过这个属性把标签变为可编辑状态后只有input事件，没有change事件。也不能像表单一样通过maxlength控制最大长度。我也忘记我在什么情况下用到过了，后面想起来再补吧。
11.calc
这是一个css属性，我一般称之为css表达式。可以计算css的值。最有趣的是他可以计算不同单位的差值。很好用的一个功能，缺点是不容易阅读。接盘侠没办法一眼看出20px是啥。
div{
width:calc(25%-20px);
}
12.Proxy 和 Object.defineProperty 区别
Proxy的意思是代理，我一般教他拦截器，可以拦截对象上的一个操作。用法如下，通过new的方式创建对象，第一个参数是被拦截的对象，第二个参数是对象操作的描述。实例化后返回一个新的对象，当我们对这个新的对象进行操作时就会调用我们描述中对应的方法。
newProxy(target, {
get(target, property) {
},
set(target, property) {
},
deleteProperty(target, property) {
}
})
Proxy区别于Object.definedProperty。
Object.defineProperty只能监听到属性的读写，而Proxy除读写外还可以监听属性的删除，方法的调用等。
通常情况下我们想要监视数组的变化，基本要依靠重写数组方法的方式实现，这也是 Vue 的实现方式，而Proxy可以直接监视数组的变化。
constlist = [1,2,3];
constlistproxy =newProxy(list, {
set(target, property, value) {
target[property] = value;
returntrue;// 标识设置成功
}
});
list.push(4);
Proxy是以非入侵的方式监管了对象的读写，而defineProperty需要按特定的方式定义对象的属性。
13.Reflect
他是ES2015新增的对象，纯静态对象也就是不能被实例画，只能通过静态方法的方式调用，和Math对象类似，只能类似Math.random的方式调用。
Reflect内部封装了一系列对对象的底层操作，一共 14 个，其中 1 个被废弃，还剩下 13 个。
Reflect的静态方法和Proxy描述中的方法完全一致。也就是说Reflect成员方法就是Proxy处理对象的默认实现。
Proxy对象默认的方法就是调用了Reflect内部的处理逻辑，也就是如果我们调用get方法，那么在内部，proxy就是将get原封不动的交给了Reflect，如下。
constproxy =newProxy(obj, {
get(target, property) {
returnReflect.get(target, property);
}
})
Reflect和Proxy没有绝对的关系，我们一般将他们两个放在一起讲是为了方便对二者的理解。
那为什么会有Reflect对象呢，其实他最大的用处就是提供了一套统一操作Object的API。判断对象是否存在某一个属性，可以使用in操作符，但是不够优雅，还可以使用Reflect.has(obj, name); 删除一个属性可以使用delete，也可以使用Reflect.deleteProperty(obj, name); 获取所有属性名可以使用Object.keys, 也可以使用Reflect.ownKeys(obj); 我们更推荐使用Reflect的API来操作对象，因为他才是未来。
14.解析 get 参数
通过replace方法获取url中的参数键值对，可以快速解析get参数。
constq = {};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q);
15.解析连接 url
可以通过创建a标签，给a标签赋值href属性的方式，获取到协议，pathname，origin等location对象上的属性。
// 创建a标签
constaEle =document.createElement('a');
// 给a标签赋值href路径
aEle.href ='/test.html';
// 访问aEle中的属性
aEle.protocol;// 获取协议
aEle.pathname;// 获取path
aEle.origin;
aEle.host;
aEle.search;
