一般在html语言中设置显示与隐藏的常见的方法有两种，它们分别是display和visibility，下面就简略介绍一下两种隐藏方式的区别
display：
可选值：none（隐藏）block（显示）
visibility:
可选值：hidden（元素不可见）visible（元素可见）
下面分别对两种方法进行测试：
首先是对display的两个可选值进行测试，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>显示与隐藏</title>
<style>
/* 定义默认外边距为0 */
* {
margin: 0;
}
/* 定义div的样式 */
div {
background-color: pink;
width: 200px;
height: 30px;
line-height: 30px;
}
/* 定义标签p的样式 */
p {
background-color: aqua;
width: 200px;
height: 30px;
line-height: 30px;
/* 设置元素隐藏 */
display: none;
}
div:hover>p {
/* 设置元素显示 */
display: block;
}
</style>
</head>
<body>
<div>这是div的内容
<p>这是p标签的内容</p>
<h2>这是h2的内容</h2>
</div>
</body>
</html>
这是display可选值为none时运行测试用例是的结果
这是display可选值为block时运行测试用例的结果
接着对visibility的两个可选值进行测试，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>显示与隐藏</title>
<style>
/* 定义默认外边距为0 */
* {
margin: 0;
}
/* 定义div的样式 */
div {
background-color: pink;
width: 200px;
height: 30px;
line-height: 30px;
}
/* 定义标签p的样式 */
p {
background-color: aqua;
width: 200px;
height: 30px;
line-height: 30px;
/* 设置元素不可见 */
visibility: hidden;
}
div:hover>p {
/* 设置元素可见 */
visibility: visible;
}
</style>
</head>
<body>
<div>这是div的内容
<p>这是p标签的内容</p>
<h2>这是h2的内容</h2>
</div>
</body>
</html> 
这是visibility可选值为hidde时测试用例运行的结果
这是visibility可选值为visible时测试用例运行的结果
由此可见display和visibility的区别是：
display设置隐藏时，不占用原来的位置，显示出来后才会占用原来的位置
visibility设置元素不可见时，依旧占有原来的位置。
