## 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元素变为行内区块显示。 效果如下：