关于元素隐藏/显示的各种方法

Posted zona_house

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于元素隐藏/显示的各种方法相关的知识,希望对你有一定的参考价值。

  元素的隐藏/显示可以说是使用频率最高的方法之一,比如二级菜单,响应式布局,透明过度等等许许多多的特效都会使用到,以下介绍一下元素隐藏的各属性以及他们的特性和使用方法:display  visibility  opacity   position  float  overflow

  我们先设置一些共有属性:

<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #444;
            margin: 10px;
            color: #f00;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="display">display</div>
    <div class="visibility">
        <p>visibility</p>
    </div>
    <div class="opacity">opacity</div>
    <div class="overflow">overflow</div>
    <div class="position">position</div>
</body>

效果演示

    

 

 

  1.display:none;

  display用于设置元素的显示方式,其常用取值有block  inline-block  inline。它在移动端中经常用来设置a链接。在隐藏的方法中,取none值这种方法一般是不可取的!因为display:none是直接不显示,也就是不渲染此元素,如果它所作用的元素排版在页面较前,先渲染,就容易引起回流(reflow)和重绘(repaint),造成难以预知的后果。

  特点:  不占据空间,不可点击(对鼠标事件无响应)

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

         transition无法对其起作用

 

  2.visibility:hidden/visible

  比较常用的方法,浏览器对其渲染可是不可见,它占据空间却不可点击,我们来测试一下:

  

<stlyle>
    .visibility{visibility:hidden;}
</style>

可以看到,元素消失,而后面的div却没有占据它原来的位置,说明元素不可见却仍然占据空间另外还有一种特殊情况:

<style>
    .visibility{
        visibility:hidden;
        position: absolute;
    }
</style>

设置position:absolute后,元素不占据空间了!!为什么呢??其实原因很简单,设置此属性后,元素将脱离文档流,后面的元素就会占据它原本的空间,同样效果的还有  position:fiexd 和 float:left/right。

  特点:占据空间,却不可点击(对鼠标事件无响应)

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

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

 

3.opacity:0

  这个属性应该是最常用于隐藏的属性了,取值为0-1.

  特点:占据空间,可点击(对鼠标事件有响应)

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

       transition对其有效

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

 

4.position ,float。一般也不推荐。

  是的,连这两家伙也来凑热闹了,不过它们的确可以起到隐藏的作用,虽然不是真正意义上的隐藏。

  将元素设置成position:absolute; 然后通过控制它的位置,将它定位到浏览器可视窗口以外的位置,就可以起到隐藏的效果。

  如:position:absolute/fiexd

           top:0px;

           left:-200px;

  那么它将从浏览器左边“走出去”,并且它是脱离文档流的,不会对页面布局造成影响。

  同样的,浮动元素可也配合margin做到隐藏的效果:

    float:left;

    margin-left:-200px;

  同理,它脱离文档流,所以不对布局造成影响,可是页面中若有其它浮动元素就要小心使用。

 

5.overflow:hidden/visible  

  这个属性在做二级菜单时可以发挥大用处。通过设置元素的 width 或 height 来控制元素溢出的样式,从而起到隐藏/显示的效果。

  方法一:固定overflow属性值,改变width/height

<head>
    <style>
       .overflow{
          overflow: hidden;
      }
      .overflow > ul > li{
          height: 100px;
          list-style-type: none;
      }
      .overflow:hover{
          height: 300px;
      }

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

 

 

方法二:固定 width / height 的值,改变overflow的属性值。

 

<head>
    <style>
       .overflow{
            overflow: hidden;
        }
        .overflow > ul > li{
            height: 100px;
            list-style-type: none;
        }
        .overflow:hover{
            height: 300px;
        }

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

 

 

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

   显示可点击(对鼠标事件响应)  

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

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

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

 

 

                                      欢迎补充、指正

  

以上是关于关于元素隐藏/显示的各种方法的主要内容,如果未能解决你的问题,请参考以下文章

Sphinx、reStructuredText 显示/隐藏代码片段

如何在 Android 中显示和隐藏菜单项?

片段生命周期 - 在显示/隐藏时调用哪个方法?

在android中显示隐藏片段

Android 片段隐藏显示 OnHide/OnShow?

仅在一个片段中隐藏状态栏并在其他片段中显示