6.2 CSS 显示(display)

用来改变HTML元素的类型(type)

我们在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-itemblock 类似,不过会多显示一个列表符号(bullet point)。
  • tabletable-rowtable-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: blockdisplay: 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个段落仍然占据了原有空间,只是看不到而已。