对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等
注意：如果要适用于任何元素需要提前储存元素的display值
visibility:hidden与display:none作为隐藏元素的两种方式，常常被人们拿来比较。其实区别很简单，前者不脱离文档流，保留隐藏之前元素占据的物理区域；而后者则脱离文档流，如果重新显示则需要页面的重新绘制。还有一点区别却很少人提到，如果父级设置display:none子级设置display:block也不会显示；而如果父级设置visibility:hidden子级设置visibility:visible时子级会显示出来
注意：visilibity可应用transition属性。因为visibility是离散步骤，在0到1数字范围之内，0表示隐藏，1表示显示。visibility:hidden可以看成visibility:0；visibility:visible可以看成visibility:1。于是，visibility应用transition等同于0~1之间的过渡效果。实际上，只要visibility的值大于0就是显示的。由于这个现象，我们可以利用transition实现元素的延时显示隐藏
可能有些人不太熟悉，HTML有个hidden全局属性，专门用于显示隐藏元素，与display:none的作用类似，元素隐藏时脱离文档流，无法接受javascript事件
注意：IE10-不支持test.hidden='hidden'写法，只支持test.setAttribute('hidden','hidden')写法
对于元素显隐，opacity的使用频率也挺多。opacity的好处是，即使opacity为0的元素，仍然可以接受javascript事件，这是display:none和visiblity:hidden所不具备的。
CSS中有一个属性是overflow，overflow:hidden代表着溢出隐藏。我们可以利用父级的overflow:hidden配合父级的height:0或width:0来实现元素的显隐
注意：当设置overflow的元素在绝对定位元素和其包含块之间的时候，overflow属性会失效
CSS裁剪clip这个属性平时用的不多，当clip:rect(top,right,bottom,left)中的top>=bottom，或者left>=right时，可实现元素的隐藏效果，效果类似于visibility:hidden
注意：clip属性只能应用在绝对定位元素上
CSS变形transform是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还可以通过设置matrix矩阵来实现更复杂的效果。通过不同的变形函数可以实现元素显隐效果
注意：IE9-浏览器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀
【1】scale
transform:scale(0)时，元素被隐藏
【2】rotate
transform:rotateX(90deg)时，元素被隐藏
【3】skew
transform:skew(90deg)时，元素被隐藏
利用定位元素可以覆盖普通流元素的特性。为元素的before伪元素设置相同的尺寸，通过控制伪元素的定位属性，实现显隐效果
//鼠标移入移出会出现元素的显隐效果
元素显示隐藏的另一种常见思路是偏移，将元素移动到视窗范围外，也可以实现等价的显隐效果
【1】margin-top
利用负margin将元素移出视窗外，要注意的是设置负margin的元素并没有脱离普通流，后续元素会跟着一起移动
【2】left
通过设置相对定位或绝对定位元素的偏移属性，将元素移动到视窗外
【3】translate
其实这是我在某次面试前端实习生时候遇到的一个问题，面试官说你有多少种让DOM隐藏的方法，能说多少说多少，当时脑抽，因为是“能说多少说多少”就觉得那肯定有好多，总结一下当时想出来的“偏方”。
两者不同：如果设置 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来做，也算是我的偏方吧，可能解决方案并不完美，望留言指教。
当然这只是一些自己瞎琢磨出来的方法，希望有和我一样爱闹腾的同学补充一下下,也希望大神见到后不吝指教，感激不尽。
