关于元素隐藏/显示的各种方法
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即可起到隐藏的效果
欢迎补充、指正
以上是关于关于元素隐藏/显示的各种方法的主要内容，如果未能解决你的问题，请参考以下文章