在CSS中很多隐藏元素的方法，但这些方法的可访问性、布局、动画、性能和事件处理的方式有所不同。
「动画：」一些CSS隐藏元素的方法一般是全有或者全无，元素要么是完全可见，要么是完全不可见，并且没有中间状态。其他的，比如透明度，可以是一个范围的值，所以在这中间过程插入动画成为可能；「可访问性：」下面的每一种方法都会在视觉上隐藏一个元素，但不一样会真正的去除DOM元素。有一些方式隐藏元素后，屏幕阅读器仍然能读取到元素内容；「事件处理：」隐藏元素之后，有些方式元素上的事件仍然能被触发，而有些方式就会导致元素上的事件触发无效；「表现：」浏览器加载并解析HTMLDOM和CSS对象模型后，页面将分三个阶段呈现：布局（生成每个元素的几何位置）、绘制（绘制每个元素的像素）、组合（以适当的顺序放置元素层）。仅导致构图变化的效果明显比影响布局的效果更好。在某些情况下，浏览器还可以使用硬件加速。实现方式通过css实现隐藏元素方法有如下：
1.display:non:渲染树不会渲染对象
2.visibility:hiddn:元素在页面中仍占据空间，但是不会响应绑定的监听事件。
3.opacity:0:元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
4.position:absolut:通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
5.z-indx:负值:来使其他元素遮盖住该元素，以此来实现隐藏。
6.clip/clip-path:元素仍在页面中占据位置，但是不会响应绑定的监听事件。
7.transform:scal(0,0):将元素缩放为0，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
8、coloralpha透明度
9、可以通过使用width、hight、padding、bordr-width或font-siz来缩小元素的尺寸
10、覆盖另一个元素
11、transform属性可以用于元素的平移、缩放、旋转或倾斜等。
1.visibility:hiddn;这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在2.opacity:0;一个CSS3属性,设置0可以使一个元素完全透明,制作出和visibility一样的效果。与visibility相比,它可以被transition和animat。3.position:absolut;使元素脱离文档流,处于普通文档之上,给它设置一个很大的lft负值定位,使元素定位在可见区域之外。4.display:non;元素会变得不可见,并且不会再占用文档的空间。5.transform:scal(0);将一个元素设置为无限小,这个元素将不可见。这个元素原来所在的位置将被保留。6.HTML5hiddnattribut;hiddn属性的效果和display:non;相同,这个属性用于记录一个元素的状态。7.hight:0;ovrflow:hiddn;将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框,该技术就可以正常工作。8.filtr:blur(0);将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中。
display:non设置元素的display为non是最常用的隐藏元素的方法
.hid{display:non;}
将元素设置为display:non后，元素在页面上将彻底消失
元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘
消失后，自身绑定的事件不会触发，也不会有过渡效果
特点：元素不可见，不占据空间，无法响应点击事件
coloralpha透明度可以将元素的color、background-color和bordr-color等属性设置为rgba(0,0,0,0)，这样就会使元素完全透明：
div{color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);}
这三个属性都是支持设置动画效果的，需要注意，透明度不能应用于带有背景图片的元素，除非它们是使用linar-gradint或类似方法生成的。
Alpha通道可以设置为：
transpant：完全透明（中间不能插入动画）；rgba(r,g,b,a)：红色、绿色、蓝色和alpha；hsla(h,s,l,a)：色相、饱和度、亮度和alpha；#RRGGBBAA或#RGBA。transformtransform属性可以用于元素的平移、缩放、旋转或倾斜等。可以使用scal(0)或者translat(-px,0px)属性值来将元素隐藏：
div{transform:scal(0);}div{translat(-px,0px)}
transform属性提供了出色的性能和硬件加速，因为元素被有效地移动到了单独的层中，并且可以在2D或3D中进行动画处理。原始的布局空间会保持原样，并不会受影响。使用这种方式隐藏的元素不会触发任何事件。
z-indx可以通过将元素的z-indx属性设置为负值，以实现元素的隐藏。这实际上就是将元素放在了我们看不到的层。
div{z-indx:-1;}
positionposition属性允许使用top、bottom、lft、right从页面中的默认位置移动元素。因此，绝对定位的元素可以通过左键：-px等值移出屏幕：
div{position:absolut;lft:-px;}
覆盖另一个元素通过在元素的上面放置与背景颜色相同的元素，可以在视觉上隐藏一个元素。下面来使用::aftr伪元素来实现：
div::aftr{position:absolut;contnt:";top:0;bottom:%;lft:0;right:0;background-color:#fff;}
虽然这从技术上讲是可以实现的，但是这样做需要更多的代码。
缩小尺寸可以通过使用width、hight、padding、bordr-width或font-siz来缩小元素的尺寸以实现元素的隐藏。可能还需要应用ovrflow:hiddn;来确保内容不会溢出。
div{hight:0;padding:0;ovrflow:hiddn;}
使用这种形式我们可以在隐藏过程中使用动画效果，并且他的性能会比transform好很多。
visibility:hiddn设置元素的visibility为hiddn也是一种常用的隐藏元素的方法
从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘
.hiddn{visibility:hiddn}
给人的效果是隐藏了，所以他自身的事件不会触发
特点：元素不可见，占据页面空间，无法响应点击事件
opacity:0opacity属性表示元素的透明度，将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的
opacity:N和filtr:opacity(N)属性可以传递一个0到1之间的数字，或者0%和%之间的百分比，对应地表示完全透明和完全不透明。
opacity:N：该属性用来设置元素的透明度；filtr:opacity(N)：filtr属性用来设置元素的滤镜，opacity是滤镜重的透明度，用来设置元素的透明度。不会引发重排，一般情况下也会引发重绘
如果利用animation动画，对opacity做变化（animation会默认触发GPU加速），则只会触发GPU层面的