元素的隐藏/显示可以说是使用频率最高的方法之一，比如二级菜单，响应式布局，透明过度等等许许多多的特效都会使用到，以下介绍一下元素隐藏的各属性以及他们的特性和使用方法：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
比较常用的方法，浏览器对其渲染可是不可见，它占据空间却不可点击,我们来测试一下：
<style> .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即可起到隐藏的效果
网友评论