display中文為顯示的意識，顯而易見它的功能就是為了控制頁面元素顯示方式
display中為我們提供了很多屬性，其中最常見的有：
- none
- block
- inline
- inline-block
none屬性
none屬性代表着元素不會被顯示
比如很多網站的頂部導航欄都會有二級菜單，只有當我們的鼠標移動或點擊時二級菜單才會顯示出來。這是就可以使用到display:none這個屬性。
一個簡單的例子：
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="button">
<ul>
<li>
一級菜單
<ul> <!--一級菜單中嵌套二級菜單-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS代碼：
.button ul>li{
border: 1px solid cadetblue;
}
.button ul>li>ul{
display: none;/*二級菜單默認隱藏*/
}
.button ul>li:hover>ul{
display: block;/*當鼠標移動到一級菜單時，二級菜單出現/
}
block屬性
block的意思為“阻塞”，它的功能是使元素變為塊級元素
所謂塊級元素就是指每個元素的類容單獨占據一行，我們常見的<p>、<h1>、<li>、<div>等都是塊級元素
inline屬性
inline屬性的功能是把元素變為行內元素
所謂行內元素就是指元素不會單獨占據一行，它只會占據自己規定的高和寬。我們在網站中常見的瀑布流樣式就是使用的行內元素。<a>、<img>等都屬於行內元素。
但是行內元素的大小是固定的，我們無法設置其大小，這時我們還需要使用display:block將其變為塊級元素后才可以改變它的大小。這是元素既有行類元素的特性又可以為其設定大小。
inline-block屬性
inline-block屬性就是同時有塊級元素和行內元素的屬性
inline-block就與上面的為inline屬性設置為block屬性的功能一樣，就是使元素就可以為其設置大小又可以具有行內元素的特征。