# display属性
[TOC]
## 元素的显示和隐藏
* 使用`display:none`将元素隐藏起来，此时元素不占用页面空间。
* 使用`visibility:hidden`也可以隐藏元素，此时元素占用空间。
## 通过display改变内联元素或块级元素
\(1\) **display:block就是将元素显示为块级元素**.
**block元素的特点是：**
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度默认是它的容器的100%，除非设定一个宽度
`<div>`,` <p>`, `<h1>`, `<form>`, `<ul>` 和 `<li>`是块元素的例子。
\(2\) **display:inline就是将元素显示为行内元素.**
**inline元素的特点是：**
和其他元素都在一行上；
高，行高及顶和底外边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
`<span>`, `<a>`,`<label>`, `<input>`, `<img>`, `<strong>` 和`<em>`是inline元素的例子。
3.**display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。\(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性\)**
## 案例
我们现在有一个竖直导航栏，代码如下：
~~~html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渡课</title>
<style>
ul{
list-style-type:none;
margin:0;
padding: 0;
background-color: #333;
}
li a{
text-decoration: none;
display: block;
padding:15px 18px;
color: #ffffff;
}
li:hover{
background-color: #ccc;
}
</style>
</head>
<body>
<div class="navigator">
<ul>
<li><a href="./html/list.html">产品列表</a></li>
<li><a href="./html/shopList.html">分店列表</a></li>
<li><a href="./html/joinUs.html">加入我们</a></li>
<li><a href="./html/onlineOrder.html">网上订购</a></li>
</ul>
</div>
</body>
</html>
~~~
我们使用无序列表制作了一个竖直导航栏，将a标签设置为`display:block`这样可以让a标签具备区块元素的特性，拥有独占一行的宽度，使得导航项目更容易被点击。
此时，如果我们想将竖直导航栏变为水平导航栏，实际上只需要一行代码即可完成。
在CSS代码中加入`li{display: inline-block;}` 就可以将li元素变为行内区块显示。
效果如下：
### 案例优化
我们可以利用这样的一个竖直导航栏制作一个弹出式的选项菜单
~~~html
<!DOCTYPE html>
<html>
<head>
<title>我的css</title>
<meta charset="UTF-8"/>
<style type="text/css">
ul {
list-style: none;
margin:0;
padding:0;
background-color:#D1EEEE;
}
li a {
text-decoration:none;
color:#CD96CD;
display:block;
padding:15px 18px;
}
li:hover {
background-color:#E0FFFF;
}
li a:hover {
color:#4F94CD;
}
div {
width:110px;
}
.menu {
text-align: center;
width:110px;
height:40px;
background-color:#EEE0E5;
line-height:40px;
font-size:18px;
font-weight:900;
color:#9F79EE;
}
.className {
display:none;
}
.menuAll:hover>.className{
display:block;
}
</style>
</head>
<body>
<div class="menuAll">
<div class="menu">课程</div>
<div class="className">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">JQuery</a></li>
</ul>
</div>
</div>
</body>
</html>
~~~
