6.2 CSS 显示（display）

优质

小牛编辑

138浏览

2023-12-01

我们在HTML块级和内联元素课程中已经了解HTML元素主要有两种类型：块级（block-level） 和 内联（inline）。也提到了一些变体：列表项（list-item） 或 表格单元（table-cell）.

缺省情况下，一个段落（paragraph）<p> 将拥有一个默认的 display 属性值：block，不过 <p> 也可以被渲染成一个内联（inline）元素：

p{ display: inline;}

那么为什么不直接使用一个HTML内联元素，比如 <span> 呢？

因为我们选择一个HTML元素的依据是其语义（meaning），而不是它的渲染方式（rendering）。如果我们认为内容最好表述为一个短文段落，我们不应该为了渲染样式而改变HTML标签的选择。

简而言之，display 允许我们改变元素类型而无须改变其含义。

每个 display 选项有其特定的渲染行为：

block 将占据整行宽度
inline 将被视为纯文本
inline-block 块和内联行为的结合
list-item 和 block 类似，不过会多显示一个列表符号（bullet point）。
table，table-row 和 table-cell 和表格相关的布局行为。

display: block

这将把任何元素转变成block元素。

这个方法常用于链接（links）以增加可点击区域。

.menu a{ background: #333; color: white;}

<ul class="menu">
  <li>
    <a>动效</a>
  </li>
  <li>
    <a>教程</a>
  </li>
</ul>

现在我们把菜单项链接转变成块（blocks），目标区域将被拉长：

.menu a{ background: #333; color: white; display: block;}

display: inline

这将把任何元素转变成内联（inline）元素，就好像是简单的文本（text）。

这个方法通常用来创建水平方向的导航菜单。

<ul class="menu">
  <li>
    <a>Home</a>
  </li>
  <li>
    <a>Features</a>
  </li>
  <li>
    <a>Pricing</a>
  </li>
  <li>
    <a>About</a>
  </li>
</ul>

.menu li{ display: inline;}

display: list-item

这个属性值用于列表项（list items） <li> 以及定义描述（definition descriptions） <dd>。

列表项包含在 <ul> 中的时候，会额外显示列表符号，而包含在 <ol> 中的时候，会额外显示一个自增长数字。

但是各个浏览器在渲染这些列表符号和数字时不尽相同，而且难于使用CSS来对它设定样式。因此 display: list-item 规则很少被使用。相反，我们经常把 <li> 渲染为 display: block 或 display: inline，因为给它们添加样式要更为灵活。

display: none

把 display: none; 规则应用到一个HTML元素上，渲染时将被从网页中删除，就好像这个元素代码不存在一样。

.hidden{ display: none;}

<p>first line</p>
<p class="hidden">second line</p>
<p>third line</p>

first line

second line

third line

代码中有三行文本，但第二行不显示，而且不占据任何渲染空间。

visibility: hidden

visibility: hidden; 规则和 display: none; 有点类似，用于隐藏一个元素，不同之处在于被隐藏的元素仍然占据原有的渲染空间。

.hollow{ visibility: hidden;}

<p>我在顶楼，有点恐高...</p>
<p class="hollow">我在4楼，我躲起来</p>
<p class="hollow">我在3楼，我躲起来</p>
<p class="hollow">我在2楼，我躲起来</p>
<p>我在底楼...</p>

我在顶楼，有点恐高...

我在4楼，我躲起来

我在3楼，我躲起来

我在2楼，我躲起来

我在底楼...

上面的代码中总共有5行，只显示了2行，但是隐藏掉的3个段落仍然占据了原有空间，只是看不到而已。