CSS的显示与隐藏
CSS中元素标签的显示与隐藏可以通过对元素的css样式编写的过程中，在元素样式下以三种不同的属性进行显示与隐藏，通过对html标签进行显示与隐藏，从而实现web中特定的功能，例如：导航栏的功能展示等。
三种不同的属性分别是display,visibility和opacity。
下面以一个简单例子对三种属性用法进行使用，页面中通过设定三个简单的div，通过属性设置对div进行显示与隐藏，对div的html以及css代码如下：
<html>
<head>
<meta charset="UTF-8">
<title>显示隐藏</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div>3</div>
</body>
</html>
运行结果如下：
1.display
为第二块div设置隐藏属性，并在第一块div上设置悬浮显示第二块div
<style>
.two{
display:none;
}
.one:hover+div{
display:block;
}
</style>
通过为第二个div设置display为none，隐藏该div，然后在第一个div的悬浮状态下设置display为block，显示第二个div，div隐藏运行结果如下：
2.visibility
和第一个方法一样，对第二个div进行隐藏，代码如下：
<style>
.two{
visibility: hidden;
}
.one:hover+div{
visibility: visible;
}
</style>
通过为第二个div设置visibility为hidden，隐藏该div，然后在第一个div的悬浮状态下设置visibility为visible，显示第二个div，div隐藏运行结果如下：
3.opacity
同上，对第二个div进行隐藏，代码如下：
<style>
.two{
opacity: 0;
}
.one:hover+div{
opacity: 1;
}
</style>
通过为第二个div设置opacity为 0;，隐藏该div，然后在第一个div的悬浮状态下设置opacity为1;，显示第二个div，div隐藏运行结果如下：
opacity属性是CSS3中的属性，通过设定属性值对元素设置不透明度，opacity的取值范围是0~1，0为完全透明，1为完全不透明，可以设置0.2等为元素设置半透明状态。
结论
通过以上三种css元素的显示与隐藏，可以通过运行结果清楚的看到三种设定属性的区别是display设置为none,div2隐藏不见，并不占据屏幕的空间，通过该设定html标签元素全部隐藏；而通过visibility和opacity设置隐藏时，div1和div3中间有一块明显的空白，这是因为隐藏的div2占据了屏幕页面的空间。