属性 display 定义元素如何显示，听起来像废话。

这里要来回顾一下之前在 HTML 教程讲过的块元素（block）和内联元素（inline），如果不记得就先复习一下。

visibility 属性，则用于指定元素是可见还是隐藏。

显示（display）

属性 display 有以下几个常用值：

• none

• block

• inline

• inline-block

其中 none 值表示这个元素被隐藏，只是这里的隐藏包括从布局上来说的，在页面中的占据的空间也被释放了。

而剩余的三个值，则可用于更改元素默认的 display 值。

比如常见的块元素 div，比较一下在修改了 display 属性之后的显示：

div {   height: 60px; /*为了区别inline和inline-block，特意定义了高度。*/   text-align: center;   font-size: 26px;   margin-top: 20px;   margin-left: 20px;   background-color: lightblue;   line-height: 60px; }  div.inline {   display: inline; }  div.inlineblock {   display: inline-block; } 

为了方便比较，使用 div 标签定义了一些颜色和边距的样式。

<div>默认的display1</div> <div>默认的display2</div> <div>默认的display3</div>  <div class="inline">inline 1</div> <div class="inline">inline 2</div> <div class="inline">inline 3</div>  <div class="inlineblock">inlineblock 1</div> <div class="inlineblock">inlineblock 2</div> <div class="inlineblock">inlineblock 3</div> 

可以很明显看出，默认的块元素 div 在修改了 display 之后，和内联元素及内联区块元素的显示一样。

同样地，我们也可以修改一个内联元素，或内联区块元素的 display 属性成其它值。

通常这样做，是为了布局的需要。

比如说，把 li 元素的 display 属性修改成 inline-block，以达到在横排显示菜单，同时还能控制菜单的高度和宽度。

试试以上效果使用 li 元素，该如何实现。

可见性（visibility）

visibility 属性可以指定值为 hidden，以达到隐藏某个元素的效果，但它和 display:none 的区别在于，它不会释放布局上元素占据的空间。

.visibility-hidden {   visibility: hidden; }  .display-none {   display: none; } 

定义两个类，一个指定为 visibility 为 hidden，另一个指定 display 为 none。

<div>1</div> <div class="visibility-hidden"></div> <div>2</div>  <div>1</div> <div class="display-none"></div> <div>2</div> 

使用同样的 div 代码看一下效果：

非常明显，使用 visibility 隐藏的元素，占据的空间还在，只是看不见元素本身的东西而已。

总结

• 🍑 display 属性用于修改元素的显示方式，可以把原本的块元素变成内联元素，或反过来。

• 🍑 修改元素的显示方式，通常用于布局的需要，但更多的建议使用元素默认的显示方式。

• 🍑 使用 visibility:hidden 和 display:none 两种方式都可以隐藏元素，区别在于 display 为 none 会释放占据的空间。