可复用的代码 和 感想
1.监听到scroll事件的条件：父级元素定高，子元素高度比父元素高，滚动条是相对于父级元素的。对于某些浏览器来说，滚动元素是html，但是有些确实body。通用的获取页面的滚动元素的方法，document.scrollingElement
2.video和audio不能做到自动播放，只能用户手动点击，才可以播放，video的全屏功能浏览器兼容性不好
3.要想设置滚动条样式，设置-webkit-scrollbar是前提，否则无法生效
.right::-webkit-scrollbar {
width: 8px;
}
/* 滚动条滑块 */
.right::-webkit-scrollbar-thumb {
background: rgb(255,205,19);
border-radius: 4px;
}
4.z－index是相对于父元素而言，不是相对于整个页面。必须有position为非static才能生效的css属性有：top、bottom、right、left还有 z-index。
5.vue中，
6. ::before和::after，中，可以设置background
7,移动端：i）touchstart、touchmove、touchend、click事件是依次触发的。ii）微信中由于内存问题，touchmove只会触发一次，touchend也不会每次都触发(大概滑动3次才会执触发并执行自己的代码)。所以，要想得到手指最后的位置，需要在touchend而不是touchmove中获取。iii）在touchstart中阻止默认事件，可以保证touchmove每次都触发，但是，click事件和a标签不会触发。在touchmove中阻止默认事件，可以保证拿到位置，但是，会阻止浏览器的默认滑动。
8. 使用animation-fill-mode: forwards，可以让动画停止在最后一帧，动画的延迟加载可以做出依次出现的幻灯片动效。但是在某些安卓浏览器上不支持这个css属性，判断浏览器是否支持此属性的方式："aniamtion-fill-mode" in document.body.style
9.firefox与chrome的区别：1.滚轮事件：DOMMouseScroll，获取滚动角度的方式：event.detail 2.默认情况下的滚动元素：document.documentElement
兼容chrome和firefox的页面的scrollTop的获取方式，var rootElement = document.scrollingElement || docuemnt.body;
10. encodeURI 和encodeURIComponent的区别：前者对于整个url编码，后者对url的部分进行编码，前者，对保留字符不编码，后者对保留字符依然编码。保留字符的范围：／、？、：、&、@、＝
11. css中的类名不能以数字开头
12.问题，mouseenter和mouseleave，模拟hover出现对话框，对话框闪烁的问题。
想实现一个鼠标移上去，显示提示框，移出，隐藏提示框的效果
提示框使用了absolute定位，如果提示框部分覆盖住添加hover效果的元素，浏览器无法确定是否鼠标是在哪个元素上，提示框就会不断隐藏、显示，呈现闪烁效果
要解决，就修改提示框的top或bottom值，使提示框不覆盖住‘hover元素’，就不会出现闪烁问题了
13.当点击a标签时，如果a标签上绑定了事件监听器，则会首先执行click的回调，然后再跳转到href指向的链接。一般来说，会在click回调中做一定判断，如果符合条件，则会禁止跳转到href指向的链接，这个时候需要在回调中，使用preventDefault方法，阻止a标签的默认行为。
14.css的margin折叠－－margin折叠 上下是折叠的，最终2个block块上下之间的距离取最大的值、而左右是不折叠的，取设置的距离之和。margin的垂直方向折叠是BFC的特性，处于同一个BFC的2个块级元素才会发生折叠，因此，解决margin垂直折叠的方法是让2个block块处于不同的BFC中。
15.如果a标签内嵌套了另一个a标签，则浏览器解析时，不会解析成嵌套的结构。
16.location.href赋值时，如果赋予的值是空 ，那么页面会在本页面刷新一下，而不会什么都不做。
17.inline-block默认宽度和高度都是0，但是其宽度可以被内部元素撑开。block默认宽度为100%，这个100%是相对其父级宽度的，默认高度为0。如果一个block元素内部有一个inline-block元素，那么在inline-block与父级元素block之间会有共8px的空隙。
18.对于图片的缓存以绝对路径为key，如果想要某个图片事先被下载并成功缓存下来，那么，要求是，这个图片所在的路径，和你想要缓存的图片的路径是一致的。
19.多行文本溢出显示省略号三点的方法：
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box;必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。- text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
20.在用ajax请求数据时，我们首先会对返回的数据做一定的判断，常见的是返回一个lists数组，这个时候会判断lists是否为空，判断为空的方式是length，而不能用!,因为[]==false,
![]==false,都会返回true。与[]有相似特性的还有' ', '0'。
21.某些ui事件，例如resize、scroll、keyup，一旦用户有相关操作，就会频繁的触发事件回调，这个时候，1.事件回调尽可能的简单，不要频繁的操作dom 2.可以利用节流函数，即将事件回调的执行频率降低。
22.JSON.stringify和JSON.parse函数，一个是将js对象({name: "wfz"}或者{"name": "wfz"})转换为JSON字符串"{"name": "wfz"}"，一个反过来。
23.表示一个锚点，点击a时，跳到页面顶部。 表示点击时定位到，id为id的dom。
表示当点击a时，什么也不做。void为执行里面的语句，但是不返回值。这种写法在firfox和safari浏览器上无效，最好不要这样用。
22.dom元素都有childNodes和children属性，两者的区别是，childNodes会包含非元素节点（空白文本节点）和元素节点，而children属性只包含元素节点。
23.求2个数组的交集和并集：
let intersection = a.filter(v => b.includes(v))
let difference = a.concat(b).filter(v => !a.includes(v) || !b.includes(v))24.正则表达式：
25.求数组最大值的4种方法：http://www.jb51.net/article/107373.htm
26.微信浏览器内，打开某个网页时，清理页面缓存的方法：1.设置通用清理微信缓存2.关掉微信进程，重新进入3.退出你的账号重新登陆
27.背景音乐自动播放策略：iphone手机微信内：
// 微信里音乐自动播放
document.addEventListener('WeixinJSBridgeReady', function (e) {
var audio = document.querySelector('.audio');
var music = document.querySelector('.music');
var btncolor = music.className.split(' ')[1].split('_')[0];
audio.play();
music.classList.add(btncolor + '_on');
music.classList.remove(btncolor + '_close');
}, false);iphone自带safari浏览器：没办法自动播放，只能由用户介入点击，才能播放。
安卓手机：。。。。。
28. iphone5的手机宽度：320，i6: 375， i6plus：414
29. 设有一个string类型的变量str="
d
"，str.replace("", "dd")，返回"
ddd"，但是str保持不变，不会发生变化。
30. BFC是一个独立的渲染容器，有其规定的渲染规则。形成BFC的方式如下：
i）根元素
i）position的值不为static
i）float的值不为none
i）overflow的不为visible
i）display的值为inline-block、table-cel、table－caption
i）display：flex、inline－flex
BFC内的block块排列规则如下：
i）一行一行的排列
i）内部元素的外边框紧贴BFC的最左侧
i）元素垂直方向margin重叠
i）避开外部的float元素
i）计算BFC的高度时，浮动元素也包含在内
i）BFC的内部元素与外部元素互不重叠
利用BFC可以解决如下问题：
i）解决margin重叠
i）清除浮动
i）解决浮动元素的覆盖问题
31. 经典js面试题
for (var i = 1; i < 4; i++) {
setTimeout(() => {
console.log(i)
}, 0)
} // 输出444 for (let i = 1; i < 4; i++) {
setTimeout(() => {
console.log(i)
}, 0)
} // 输出1、2、3知识点：1.异步：setTimeout要等到当前脚本的同步任务执行完之后才会执行。2.闭包：保留对它被声明的位置所处的作用域的引用，console log由于要用到i，所以要保留定义i的作用域。3.作用域链：执行到console时，顺着作用域逐层寻找i，第一个函数找到了函数外部的中的i，这个时候i为4，所以输出3个4（每层循环共用一个作用域）。第二个函数每层循环分别拥有自己的作用域，每个作用域内部的i分别是1、2、3，所以，输出1、2、3.
32. :checked伪类适用于：1. 单选按钮被选中：input[type="radio"]:checked 2.多选按钮被选中：input[type="checkbox"]:checked 3.select下的option被选中.
33. 正则表达式：|、*等一些特殊字符在[和]内是无效的，也就是只是代表字符本身。
34. 块级元素和行内元素，行内元素不起作用的css：width、height、margin－top、margin－bottom。起作用的css：padding、border、margin－left、margin－right
35. promise的3种状态：pending（进行中）、resolved（已完成）、rejected（已拒绝）
36. setTimeout、setInterval传参，setTimeout(callback(para), time),错！传不进去，正确的方法：setTimeout(()=>{callback(para)}, time)
37. 跨浏览器获取整个页面的滚动元素的通用方法：
var rootEle;
if (document.scrollingElement) {
rootEle = document.scrollingElement
} else {
if (document.compatMode != "backCompat") {
rootEle = document.documentElement
} else {
rootEle = document.body
}
}
38 跨浏览器获取页面scrollTop的方法
scrollTop = document.body.scrollTop || document.documentElement.scrollTop39 基本数据类型5种，外加一个复杂数据类型Object，typeof取值范围也为6种，没有null，多了一个function，而typeof null 为object
40 if、＝＝、＝＝＝示图，https://dorey.github.io/JavaScript-Equality-Table/
41. html中折行，会在折行的对应元素间出现一个空格，解决方法：别写在一行，或者父级元素font-size:0
42.
13
以上代码，在安卓手机上，13并不会上下居中，在iphone手机上没问题。解决办法：将font-size改成偶数，如14px
43. display: flex能满足所有要求，能不要用display: inline-flex就不要用display: inline-flex。ios8需要autofix，autofix 网站：http://www.cssdrive.com/cssautoprefixer/。网上抄的有些是错的，这个网站比较官方。
44.当我们在设置元素的style="transform: translate3d(0, 0, 0)"时，x、y、z中间有一个空格（也就是说逗号后面必须有一个空格），这个空格必须存在，也就是不能写成style="transform: translate3d(0,30px, 0)"或者style="transform: translate3d(3px,4px,5px)"。如果空格没有写，由transition: transform ease 400ms, 设置的动画是无法实现的。无法实现动画。
45.img图片下会出现3px的空白间隙，解决办法，将img的display:none
46.input输入框外边会有一条线，去掉的方法：outline: none