## display屬性和實例 ### 元素的顯示和隱藏 * 使用`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將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。\(準確地說，應用此特性的元素呈現為內聯對象，周圍元素保持在同一行，但可以設置寬度和高度地塊元素的屬性\)** ### 案例 我們現在有一個豎直導航欄，代碼如下： ```css 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{ float: left; } li:hover{ background-color: #ccc; } ``` ```html <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> <div style="clear:both; "></div> </ul> </div> ```  我們使用無序列表制作了一個豎直導航欄，將a標簽設置為`display:block`這樣可以讓a標簽具備區塊元素的特性，擁有獨占一行的寬度，使得導航項目更容易被點擊。 此時，如果我們想將豎直導航欄變為水平導航欄，實際上只需要一行代碼即可完成。 在CSS代碼中加入`li{display: inline-block;}` 就可以將li元素變為行內區塊顯示。 效果如下：