元素隐藏的方式

 

、DOM结构

display：会让元素完全从渲染树中消失，渲染的时候不占据任何空间，不能点击。

visibility：不会让元素从渲染树消失，元素继续占据空间，只是内容不可见，不能点击。

opacity：不会让元素从渲染树消失，元素继续占据空间，只是内容不可见，可以点击。

2、继承

display：非继承属性，子孙节点不被渲染，子孙节点修改属性不改变本身显隐。

visibility：继承属性，子孙节点的消失由于继承了hidden，通过设置visibility: visible，可以让子孙节点显示。

opacity：继承属性，子孙节点会继承，但是子孙节点修改属性不改变本身显隐。

3、性能

display：动态改变此属性时会引起重排，性能较差。

visibility：动态改变此属性时只会引起本元素重绘，性能较好

opacity：提升到合成层后，不会触发重绘，否则只引起本元素重绘，性能较好

4、transition

display：不支持

visibility：会立即显示，隐藏时会延时

opacity：可以延时显示和隐藏，产生渐显渐隐

1. display:none

   不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

    该方式让元素隐藏时，隐藏的元素不占空间，隐藏后将改变html原有样式，会触发重排和重绘，不可触发其对应的事件。一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。

css不能修改dom,css只能更改将在浏览器上显示的渲染树。可理解为display：none对应节点没有再dom上删除

    2. visibility:hidden

    该方式让元素隐藏时，隐藏的元素还是占用原有位置，所以它只会导致浏览器重绘而不会重排。隐藏后不将改变html原有样式，适用于那些元素隐藏后不希望页面布局会发生变化的场景，不可触发其对应的事件。可通过设置visibility:visible的话，将子元素将不被隐藏。

3. opacity:0

    设置元素的透明度为0，

     该方式让元素隐藏时，隐藏的元素还是占用原有位置，隐藏后不将改变html原有样式。但隐藏的元素所对应的事件，仍然可以触发。display属性不会出现过渡 即使添加了transition,opacity属性适合在隐藏元素时添加过渡效果。

4.设置height，width等盒模型属性为0这是我总结的一种比较奇葩的技巧，简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，这算是一种奇技淫巧。

这种方式既不实用，也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的，比如jquery的slideUp动画，它就是设置元素的overflow:hidden后，接着通过定时器，不断地设置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom为0，从而达到slideUp的效果。

5.position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外

6.filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中