CSS教程 - 第4课：display 属性。div 与 span 的区别。

在前几课中，我们通过外部文件引入了 CSS，并编写了一些简单的样式来了解其工作方式。本课我们将学习一个非常重要的属性——display。该属性决定了 HTML 标签在页面上的显示方式：它是作为一段内联文本排列，还是作为一个具有独立宽度和高度的块级元素显示。我们先从最基础的开始——默认情况下，不同的标签显示方式不同。例如，<div> 默认显示为块级元素，而 <span> 则作为行内元素显示。我们先来看看文本是如何显示的。创建一段测试文本并用 <span> 标签包裹它。

display: inline

<span> 标签默认是行内元素，它与文本在同一行显示（当然，除了像日文那样的竖排书写系统）。行内元素没有宽度和高度属性，无法直接为 display: inline 的元素设置这两个属性，因为文本的尺寸是通过其他参数决定的：字体大小、字体类型、颜色、字距、行距、词距以及段落缩进等。因此，如果你想为元素设置宽高或边距属性，就需要使用 display 的其他取值。

display: block

display: block 是 <div> 标签的默认值。块级元素可以设置宽度、高度以及外边距，从而形成页面中的一个区域，可以在其中放置文字、图片或其他块元素。你甚至可以为 <span> 标签设置 display: block，这样它就会获得宽高属性并表现得像一个块级元素。例如：

<span class="block">text</span>

另外，块级元素还有一个特点：它默认会占据可用宽度的 100%。不过要注意的是，不能对块级元素设置 height: 100% 来让它占据整个屏幕高度。块元素的高度取决于其内容，当然可以使用像素（如 800px）来定义高度，但无法直接让其自动填满整个视窗。我们将在后续课程中讨论如何实现这一效果。

display: inline-block

有时我们希望图片或小模块既能像块级元素那样设置宽度、高度和边距，又不会自动占满整行，而是彼此并排排列。这时可以使用 display: inline-block。该属性结合了行内元素与块级元素的特性，也可用于常规的块元素。

display: table

display: table 是表格元素的默认显示方式。与块元素不同，表格可以设置高度为 100%。不过在现代网页开发中，我们更推荐使用块级布局而非表格布局，因为表格应仅用于展示结构化数据，而不是用于页面排版。

display: list-item

当使用 display: list-item（例如 <li> 标签的默认值）时，元素前会自动添加项目符号（默认是黑色圆点）。

display: none

如果为某个类、标签或 ID 设置此属性，该元素将完全从页面中消失！使用此属性时要小心，因为你可能会不小心隐藏重要内容，从而导致页面显示异常。不过，如果客户要求隐藏某个元素（例如 RSS 图标），可以这样写：

.rss {
  display: none;
}

当然，更好的做法是在模板中直接删除该元素，以便它根本不被输出。但既然它已经输出了，那么使用 CSS 隐藏它是一个快速、简便的解决方案。