两者不同：如果设置 display:none，将隐藏整个元素，如果设置 visibility:hidden，元素的内容将不可见，但元素仍保持原来的位置和大小。
思来想去既然是隐藏，我是不是还可以说 opacity:0，问了一下这个答案行不行，他说行，还有吗？
当然有：
设置position为position:absolute或fixed，可以通过z-index遮掩。
设置父元素为 overflow:hidden ，将想要隐藏的元素移出父元素范围。
通过css的clip属性，将DOM裁剪。
通过css的transform属性
a. transform: skew(90deg) 拉伸90度，当然不一定是90
b. transform: scale(0) 缩放到0
c. transform: rotateX(90deg) 当然角度不一定是90，也不一定是沿x轴
＝。＝面试完之后我就去群里边问了一下，大部分人说的答案都是 display: none和 visibility: hidden斗胆猜测一下这两个应该是面试官想要的答案。
虽然答案可能就这两个，但是我还是有用到过我的“偏方”去做隐藏元素，
我遇到的情况是，我需要为DOM元素做一个fadeout＋fadein的动画，元素带有click事件，fadeout之后只是opacity为0，然后就有了 元素隐藏了之后点击事件还存在 这个bug。
当然解决方案有很多，可以通过js，也可以通过css，css可以通过延时＋transform来做，也算是我的偏方吧，可能解决方案并不完美，望留言指教。
当然这只是一些自己瞎琢磨出来的方法，希望有和我一样爱闹腾的同学补充一下下,也希望大神见到后不吝指教，感激不尽。
我们知道DOM部分其实就是浏览器各大厂商提供的一些列方法和属性的集合，这一系列的属性和方法也被称为接口，这些接口可以让我们更加方便的操作HTML和XML，注意我没有说CSS哦但我们经常会听到js操作css或者脚本化css的说法，那是怎么回事呢？
其实，DOM中提供的方法能操作HTML的所有内容，其中包括能操作元素的属性，而元素的属性中又恰好包含style属性，style属性表示的是该元素行间样式，而且行间样式的权重是1000。所以一般我们通过DOM操作元素的属性style就间接的改变了该元素的CSS样式。
DOM操作CSS样式其实质是通过DOM控制行间样式，从而达到改变样式的效果。这只能说间接的操作CSS，并非真实的直接操作CSS文件
通过DOM元素的style读写CSS行间样式
格式：ele.style.prop
注：
1. 可读可写行间样式，没有兼容性问题
2. 碰到保留字属性，前面应添加css；例如：float-->cssFloat
3. 复合属性必须拆解
4. 组合单词变成小驼峰式
5. 写入的值必须是字符串格式
用法比较简单，我们深入看看style吧
先随便来两个元素，并选中
我们发现，dom元素的原型的原型都是HTMLElement。于是猜测，style就是定义在HTMLElement的原型链上，所以凡是DOM元素都有style属性。
通过hasOwnProperty进一步验证看看是否就在HTMLElment的原型上
明白style定义在哪里之后，再来看style里面是什么？
目前也只有这种方式能修改CSS样式。
下面再来了解查询样式的方式：
window.getComputedStyle(ele,null)
IE使用另外一直方式代替
ele.currentStyle
最后我们封装一个所有浏览器都能用的方法：
