CSS的元素的显示与隐藏

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占据了屏幕页面的空间。