css中的div元素我们可以设置它们的相关属性，这里我们需要认识的有两点，元素的显示与隐藏值，它们分别是：
display 属性设置一个元素应该如何显示，visibility 属性指定一个元素应该可见还是隐藏。
display 的可选值可以有以下几种：
none，隐藏元素，不保留元素显示时的空间。block，块元素显示元素。inline，把元素变为行内元素。inline-block，同时有块级元素和行内元素的属性。
display属性四种可选值综合比较：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display属性的四种可选值</title>
<style>
li{
width: 100px;
height: 70px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<h3>常见的四种display属性可选值</h3>
<ul>
<li style="display: none;">none</li>
<li style="display: inline;">inline</li>
<li style="display: inline;">inline</li>
<li style="display: inline-block;">inline-block</li>
<li style="display: inline-block;">inline-block</li>
<li style="display: block;">block</li>
<li style="display: block;">block</li>
<li style="display: block;">block</li>
</ul>
</div>
</body>
</html>
如图所示（none元素属性值被隐藏了）:
display_25.png
visibility 可选值：
-
inherit，继承父元素的visibility属性设置。<span style="visibility: inherit;"></span> -
hidden，隐藏元素，但是保留了自身所占的空间。<a style="visibility: hidden;"></a> -
visible，默认值，显示元素。<h2 style="visibility: visible;"></h2>
visibility属性三种可选值综合比较：
<div style="visibility: inherit;"><h2>inherit可选值</h2></div>
<div style="visibility: hidden;"><h2>hidden可选值</h2></div>
<div style="visibility: visible;"><h2>visible可选值</h2></div>
如图所示：
visibility_25.png
动手小练习
分别写出display和visibility的不同属性可选值有哪些
编写一个小实例，对display属性值进行综合比较
编写一个小实例，对visibility属性值进行综合比较
