java display 999_Display属性

## display属性和实例

### 元素的显示和隐藏

* 使用`display:none`将元素隐藏起来，此时元素不占用页面空间。

* 使用`visibility:hidden`也可以隐藏元素，此时元素占用空间。

### 通过display改变内联元素或块级元素

\(1\)**display:block就是将元素显示为块级元素**.

**block元素的特点是：**

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度默认是它的容器的100%，除非设定一个宽度

`

`,`

`, `

`, `

`, `

• ` 和`
• `是块元素的例子。

  **\(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

  • 产品列表
  • 分店列表
  • 加入我们
  • 网上订购

  ```

  

  我们使用无序列表制作了一个竖直导航栏，将a标签设置为`display:block`这样可以让a标签具备区块元素的特性，拥有独占一行的宽度，使得导航项目更容易被点击。

  此时，如果我们想将竖直导航栏变为水平导航栏，实际上只需要一行代码即可完成。

  在CSS代码中加入`li{display: inline-block;}` 就可以将li元素变为行内区块显示。

  效果如下：