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


  元素的隐藏/显示可以说是使用频率最高的方法之一,比如二级菜单,响应式布局,透明过度等等许许多多的特效都会使用到,以下介绍一下元素隐藏的各属性以及他们的特性和使用方法: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即可起到隐藏的效果

 

 

                                      欢迎补充、指正

  




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2018 ITdaan.com 粤ICP备14056181号