# 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>
~~~
