让DOM从页面中消失的方法

1. 在隐藏的方法中，display取none值这种方法一般是不可取的！因为display：none是直接不显示，也就是不渲染此元素，如果它所作用的元素排版在页面较前，先渲染，就容易引起回流(reflow)和重绘(repaint),造成难以预知的后果。

display:none;

特点：　　不占据空间，不可点击（对鼠标事件无响应）

　　　　　　　株连性：其后代元素一概不渲染

　　　　　　   transition无法对其起作用

 

2.visibility:元素消失，而后面的div却没有占据它原来的位置，说明元素不可见却仍然占据空间。

visibility:hidden;

另外还有一种特殊情况：此时，后面的div占据它原来的位置（元素将脱离文档流，后面的元素就会占据它原本的空间）

visibility:hidden;
position: absolute;// 或fixed; 或float：left/right

特点：占据空间，却不可点击（对鼠标事件无响应）

　　　　   有继承性，无株连性，后代元素可以设置visibility:visible来显示自己

　　　　   transition对hidden ->  visible无效,对visible -> hidden 有效

 

3. 设置透明度

opacity:0;

特点：占据空间，可点击（对鼠标事件有响应）

　　　　   有继承性，无株连性，后代元素可设置opacity:1或者rgba(n,n,n,1)来显示自己

　　　　   transition对其有效

　　　　   使用position或float使其脱离文档流后，仍然对鼠标事件响应。

 

4.overflow:hidden;

<style>
    .overflow{
      overflow:hidden;
    }
    .overflow>ul>li{
      height:100px;
    }
    .overflow:hover{
      height:200px;
    }
</style>

    <div class="overflow">
        <ul>
            <li>导航一</li>
            <li>导航二</li>
            <li>导航三</li>
        </ul>
    </div>
    <div class="position">position</div>

特点：由于是溢出，顾名思义，隐藏的部分本来就不占据空间。

　　　显示可点击（对鼠标事件响应）　　

　　   无继承性，无株连性，只对设置的元素起作用。

　　   transition对其有效，可做出炫酷的效果哦

　　　只需要改变元素的height:0px即可起到隐藏的效果