如何在CSS中使用Display属性来操作盒子模型

作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。

介绍

HTML 和 CSS 协同工作以在浏览器中呈现网页的视觉元素。 HTML 元素具有计算和层次结构的含义，并具有浏览器应用于这些元素的默认样式。在这些默认样式中，有 display 属性。此属性的值会影响框模型，这是一种确定页面上元素如何相互交互的机制。使用 display 属性，您可以有效地控制元素与网页布局的交互方式，从而为响应式移动网页设计等情况创建更灵活的解决方案。

在本教程中，您将使用 display 属性完成多个演示，并了解它如何确定与其他元素的流交互。您将从 display 的基本值开始：block 和 inline。然后，您将使用 inline-block 的组合值来了解 inline- 前缀值的可能性。接下来，您将了解使用 none 值的威力和危险。最后，您将使用 max-width 媒体查询将表格转换为小屏幕上的 display: block 视图。

先决条件

类型选择器、组合选择器和选择器组的知识，您可以在如何选择 HTML 元素以使用 CSS 设置样式中找到这些知识。
CSS盒子模型的知识，您可以在如何使用CSS中的盒子模型教程中找到。
了解 HTML 表格元素及其可视属性作为本教程后面重构示例表格的上下文。你可以在 How To Style a Table with CSS 教程中了解表格。
在您的本地计算机上保存为 index.html 的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。要开始使用，请查看我们的如何设置您的 HTML 项目教程，并按照如何使用和理解 HTML 元素获取有关如何在浏览器中查看 HTML 的说明。如果您是 HTML 新手，请尝试整个如何用 HTML 构建网站系列。

设置初始 HTML 和 CSS 文件

首先，您将设置将在整个教程中使用的 HTML 和 CSS 文件。您还将探索包含文本的元素的默认 display 值。

首先在您的文本编辑器中打开 index.html 并将以下代码添加到您的文件中：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>The Terrestrial Planets</title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

这段代码为每个 HTML 文档设置了必要的框架。 <head> 元素中包含的信息定义了 <title> 元素中的页面名称以及加载样式表的位置，这在 <link> 元素中确定。 <meta> 标签分别定义字符编码和小屏幕设备处理。页面的主要内容将在整个教程中添加到 <body> 标签内。

接下来，在 <body> 元素中，创建一个 <main> 元素，并将 class 属性设置为 content-width。您将使用此元素来处理页面内内容的布局。在 <main> 元素内，创建一个 <h1> 标记对，后跟一个 <p>。在 <h1> 和 <p> 元素中，添加如下代码块所示的内容：

索引.html

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <main class="content-width">
      <h1>The Terrestrial Planets of the Solar System</h1>

      <p>
        The four inner planets of the Solar System consist of Mercury, Venus, Earth, and Mars. These planets are known as terrestrial due to their hard, rocky surface. Compared to the gaseous planets of the outer solar system, the inner terrestrial planets are significantly smaller in size. Depending on tectonic activity and presence of liquids these planets will have features such as canyons, mountains, and volcanoes on their surface.
      </p>
    </main>
  </body>
</html>

与前面的代码块一样，突出显示的代码在本教程中用于强调对代码的更改。

将更改保存到 index.html，然后创建一个名为 styles.css 的新文件并在编辑器中打开它。

在 styles.css 文件中，您将为在 index.html 中创建的元素添加选择器。为 body 和 .content-width 创建一个选择器，然后添加样式属性，如以下代码块所示：

样式.css

body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.5;
  color: hsl(215, 5%, 20%);
  background-color: hsl(215, 5%, 98%);
}

.content-width {
  margin: 2rem auto;
  width: 90%;
  max-width: 40rem;
}

body 元素的样式使用 margin、font-family 和 line-height 属性重置了一些默认布局和文本样式。 color 和 background 颜色为页面添加了深灰色蓝色和浅灰色蓝色。 .content-width 属性将使其居中于页面，占据屏幕宽度的 90% 直到达到最大尺寸 40rem 或 640 像素。

接下来，添加一些字体样式以使文本更清晰：

样式.css

...
.content-width {
  margin: 2rem auto;
  width: 90%;
  max-width: 40rem;
}

h1 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

p {
  font-size: 1.125rem;
}

h1 属性定义文本的大小和粗细，并将 line-height 属性降低到更好的标题间距。最后，p 元素选择器将 font-size 提升到 1.125rem 或 18px。

将您的更改保存到 styles.css，然后打开您的网络浏览器。通过将文件拖入浏览器窗口或使用浏览器的打开文件选项在浏览器中打开index.html。浏览器将渲染 HTML 和 CSS 代码以生成如下图所示的页面：

到目前为止，您使用的 HTML 元素称为 块元素 。这些元素创建了定义的内容区域，这些区域占据了父容器的整个宽度。此外，块元素通常在新行上自己呈现。这意味着添加的块元素向页面末尾堆叠。对于像英语这样从上到下、从左到右的语言，块元素堆叠在浏览器窗口的底部。

接下来，您将添加 内联元素 ，它们是存在于文本内容流中的元素。由于内联元素不占用其父元素的整个宽度，并且由于它们不是在自己的行上呈现，因此它们是在文本流的方向上添加的。对于英语，这是从左到右的方向。

块元素定义含义和内容组，如段落，内联元素提供有关一个词或一组词的上下文，如强调。

在文本编辑器中返回 index.html。在第二句中，将单词 terrestrial 包裹在强调标签 <em> 中。然后，在第三句中，将短语 gaseous planets 包裹在锚标签 <a> 中。在开始的 <a> 标记中添加一个值为 https://en.wikipedia.org/wiki/Giant_planet 的 href 属性。这将链接到该主题的维基百科页面。以下代码块中突出显示的 HTML 演示了如何设置：

索引.html

...
<p>
  The four inner planets of the Solar System consist of Mercury, Venus, Earth, and Mars. These planets are known as <em>terrestrial</em> due to their hard, rocky surface. Compared to the <a href="https://en.wikipedia.org/wiki/Giant_planet">gaseous planets</a> of the outer solar system, the inner terrestrial planets are significantly smaller in size. Depending on tectonic activity and presence of liquids these planets will have features such as canyons, mountains, and volcanoes on their surface.
</p>
...

将这些添加保存到 index.html 然后，在您的文本编辑器中返回到 styles.css。为了演示块元素和内联元素之间的区别，创建一个 a 元素选择器。在选择器内添加 display 属性设置为 block，如以下代码块所示：

样式.css

...
p {
  font-size: 1.125rem;
}

a {
  display: block;
}

将更改保存到 styles.css，然后在 Web 浏览器中返回页面。刷新页面以加载最新版本的代码。该页面演示了 block 和 inline 元素之间的主要区别，因为设置为 display: block 的链接现在占据了自己的行。如下图所示：

block 和 inline 值之间的主要区别在于 block 中断当前内容流，而 inline 保持它。此外，如果将 width 属性应用于 a 选择器，则不会更改布局。当内容流被 block 元素打断时，它仍然是打断的，并且宽度总是占据整个父容器的宽度。

inline 和 block 是最常见的浏览器默认值。虽然 display 属性有许多值，但除了少数例外，所有剩余元素都使用这两个值之一。

既然您已经探索了 block 和 inline 之间的区别，请返回文本编辑器中的 styles.css。在 a 选择器中，移除 display: block 并将其替换为值为 hsl(215, 80%, 50%) 的 color 属性，这是使用的蓝色的更丰富的版本在 body 上。然后创建一个 a:hover 选择器，将 text-decoration 属性设置为 none。当链接悬停时，这将删除下划线。以下代码块中突出显示的 CSS 显示了它的编写方式：

样式.css

...
a {
  color: hsl(215, 80%, 50%);
}

a:hover {
  text-decoration: none;
}

将更改保存到 styles.css 并在 Web 浏览器中刷新 index.html。该链接将再次与文本内联，现在将变为浅蓝色，如下图所示：

在本节中，您将设置将在整个教程中使用的 HTML 和 CSS 文件。这些文件将定期修改和修改，因此请在您的文本编辑器中保持这两个文件打开并记得定期保存。您还了解了默认的 display 值 inline 和 block，并将 inline 元素的值更改为 block。在下一节中，您将使用 inline-block 值，它结合了 inline 和 block 的功能。

使用 `inline-block` 值

接下来，您将创建一个具有可自定义宽度的按钮元素，而不是一个占据父容器整个宽度的按钮。为此，您将使用 inline-block 值，它维护 block 值的框模型属性，如 margin 和 padding，同时还具有内容流inline 值的属性。

inline- 前缀可用于多个 display 值，包括 inline-flex、inline-grid 和 inline-table。 inline-block 值将元素的盒子模型定义为 block，但它不会破坏内容流。此外，inline-block 不像 block 那样占据整个父宽度。相反，inline-block 元素只压缩到其内容的宽度。对于较短的内容，例如按钮，这有助于使用 block 框模型属性调整元素的大小，例如 margin。

要开始使用 inline-block，请在文本编辑器中打开 index.html。在结束 <p> 标记之后，添加 <a> 标记，其中 class 属性设置为 button 并且 href 属性设置为 [X132X ]。在该标签内，添加文本 在 Wikipedia 上了解更多信息。以下代码块中突出显示的 HTML 演示了它是如何编写的：

索引.html

<div class="content-width">
  <h1>The Terrestrial Planets of the Solar System</h1>

  <p>
    ...
  </p>

  <a href="https://en.wikipedia.org/wiki/Terrestrial_planet" class="button">Learn more on Wikipedia</a>
</div>

将更改保存到 index.html，然后在文本编辑器中打开 styles.css。

在您的 styles.css 文件中，为 .button 添加一个类选择器。这将为您在 index.html 文件中创建的链接设置样式。默认情况下，<a> 的 display 值为 inline。对于此步骤，将 button 类的 display 值更改为 block，然后从以下代码块添加其他突出显示的样式：

样式.css

...
a:hover {
  text-decoration: none;
}

.button {
  display:block;
  padding: 0.5rem 1.25rem;
  text-align: center;
  text-decoration: none;
  color: hsl(215, 20%, 95%);
  background: linear-gradient(to bottom, hsl(215, 80%, 60%), hsl(215, 80%, 40%));
}

添加到 .button 元素的其他样式添加了填充、使文本居中并删除了链接下划线。此外，这些样式添加了与早期版本的蓝色相同色调的蓝色渐变，并带有接近白色的文本颜色。

将这些更改保存到 styles.css，然后返回浏览器并刷新 index.html。该按钮将用蓝色渐变填充内容区域的整个宽度。下图显示了它将如何在浏览器中呈现：

接下来，将 display 属性的 block 值更改为 inline-block。在文本编辑器中返回 styles.css 并将 display 属性值从 block 更改为 inline-block，如以下代码块中突出显示的那样：

样式.css

...
.button {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  text-align: center;
  text-decoration: none;
  color: hsl(215, 20%, 95%);
  background: linear-gradient(to bottom, hsl(215, 80%, 60%), hsl(215, 80%, 40%));
}

将这些更改保存到 styles.css，然后在 Web 浏览器中刷新 index.html。按钮的宽度从扩展其父级的整个宽度压缩到与其内容一样宽，加上填充值。下图演示了 inline-block 元素如何在浏览器中呈现：

最后，返回 styles.css 为按钮添加一些最后的样式。您将通过添加 border-radius、border、text-shadow 和 box-shadow 来添加样式以将 3D 效果应用于按钮。另外，创建一个 .button:hover 选择器并添加一个 box-shadow 和 linear-gradien() 使悬停状态更暗。以下代码块中突出显示的 CSS 显示了如何编写这些样式：

样式.css

...
.button {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  text-align: center;
  text-decoration: none;
  color: hsl(215, 20%, 95%);
  background: linear-gradient(to bottom, hsl(215, 80%, 60%), hsl(215, 80%, 40%));
  border-radius: 0.25rem;
  border: 1px solid hsl(215, 80%, 35%);
  text-shadow: 0 -1px hsl(215, 80%, 35%);
  box-shadow: 0 1px hsl(215, 80%, 70%) inset;
}

.button:hover {
  box-shadow: 0 1px hsl(215, 80%, 60%) inset;
  background: linear-gradient(to bottom, hsl(215, 80%, 50%), hsl(215, 80%, 30%));
}

保存对 styles.css 的更改，然后在 Web 浏览器中刷新页面。在视觉上，按钮现在具有更多的定义和深度，如下图所示：

在本节中，您使用链接上的 inline-block 值创建了一个大且可单击的按钮，但仅与链接的文本一样宽。您还了解了如何存在其他以 inline- 为前缀的 display 值，这些值允许各种不中断内容流的显示类型。在下一节中，您将通过将表元素切换为 block 来继续更改 display 值。

更改表以使用 `display: block`

接下来，您将转换整个表以使用 display: block 属性值。表格需要特定于 table 元素的 HTML，并且表格的每个子元素都有自己的默认 display 值。例如，<table> 元素的 display 值为 table，表格单元格 <td> 的 display 值为table-cell。表格可能需要更改其 display 值的原因可能有很多，但大多数情况下是针对表格不适合的小屏幕设备解决方案。

要开始使用表格的 display 属性，请在文本编辑器中打开 index.html。在按钮链接之后，添加以下代码块中突出显示的 HTML：

索引.html

...
<a href="https://en.wikipedia.org/wiki/Terrestrial_planet" class="button">Learn more on Wikipedia</a>

<table>
  <caption>
    Terrestrial Planets Statistics
  </caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Radius</th>
      <th>Moons</th>
      <th>Gravity</th>
      <th>Wikipedia</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Mercury</th>
      <td>2,439.7 km</td>
      <td>0</td>
      <td>3.7 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Mercury_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
    <tr>
      <th>Venus</th>
      <td>6,051.8 km</td>
      <td>0</td>
      <td>8.87 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Venus_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
    <tr>
      <th>Earth</th>
      <td>6,371.0 km</td>
      <td>1</td>
      <td>9.80665 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Earth_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
    <tr>
      <th>Mars</th>
      <td>3,389.5 km</td>
      <td>2</td>
      <td>3.72076 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Mars_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
  </tbody>
</table>
...

该表格 HTML 通过将该名称放入 <caption> 元素中创建了一个名为“地球行星统计”的表格，该元素是屏幕阅读器可访问表格的必要组件。然后 HTML 创建一个由一个标题行和四个数据行组成的五列表。

接下来，要向表格添加一些视觉样式，请在文本编辑器中打开 styles.css。您将创建一种视觉样式，使 caption 类似于表格的标题。表格标题行将在深色背景下变得更加明显，您将在数据行上创建具有交替背景颜色的斑马条纹效果。以下代码块中突出显示的 CSS 演示了这些样式的编写方式：

样式.css

...
table {
  border-collapse: collapse;
  width: 100%;
  margin: 3rem 0;
}

caption {
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(215, 25%, 25%);
  text-align: left;
  margin-bottom: 0.5em;
}

tr {
  text-align: center;
}

thead > tr {
  color: hsl(215, 25%, 100%);
  background-color: hsl(215, 80%, 20%);
}

tbody > tr:nth-child(even) {
  background-color: hsl(215, 50%, 93%);
}

tbody th {
  font-size: 1.125rem;
}

td, th {
  padding: 0.5rem;
}

将更改保存到 styles.css 并在 Web 浏览器中打开 index.html。该表的样式具有清晰的数据和对齐方式，如下图所示：

在智能手机上打开本地版本的 index.html，或将浏览器窗口缩小到智能手机大小。该表格最终将开始离开屏幕，并且只能通过水平滚动来查看，如下图所示：

在这种情况下，更改表格元素的 display 值有助于为小屏幕上的用户提供更好的观看体验。

在文本编辑器中返回 styles.css 并创建一个媒体查询集为 60rem 的 max-width。通常，您会在媒体查询中使用 min-width 而不是 max-width 来遵循移动优先设计流程。但是，由于您只会在小屏幕上更改样式，然后在给定的屏幕尺寸下返回浏览器默认值，因此在此示例情况下 max-width 需要的工作最少。在媒体查询中，创建一个由 table、caption、thead、tbody、tr、[ X126X] 和 td。然后将 display 属性设置为 block，如以下代码块中突出显示的那样：

样式.css

@media (max-width: 60rem) {
  table,
  caption,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }
}

将您的更改保存到 styles.css 并在智能手机或小型浏览器窗口中返回到 index.html。表格的所有内容现在都堆叠在一个大列中，每一行的内容都分组在一起。下图显示了它是如何在手机上呈现的：

对表的 display 值的这种更改会产生两个问题。首先是浏览器不再将表格识别为表格，因此屏幕阅读器不会将其作为表格读取。二是有些内容和样式现在没有提供有用的信息。首先，表格标题不再提供与数据类型的可视连接。其次，斑马条纹在这种情况下没有提供那么多信息。

在文本编辑器中返回 styles.css。首先，从组组合器中删除 thead。接下来，为 thead 元素创建一个新选择器，并将 display 属性设置为 none。 display: none 值在浏览器中完全从视觉上移除元素。重要的是要知道 none 值也会从屏幕阅读器 DOM 中删除元素，因此该元素对所有用户隐藏。以下代码块中突出显示的 CSS 显示了它是如何设置的：

样式.css

@media (max-width: 60rem) {
  table,
  caption,
  tbody,
  tr,
  th,
  td {
    display: block;
  }
  
  thead {
    display: none;
  }
}

接下来，要开始处理样式更改，首先将 text-align 属性添加到值为 left 的大型组组合器。接下来，复制用于斑马条纹的选择器 tbody> tr:nth-child(even)，并将 background-color 设置为 transparent。这将消除小于 60rem 或 960 像素宽的屏幕和窗口上的斑马条纹效果。然后，将 Learn More 按钮设置为小屏幕上的全角按钮。创建一个 table .button 后代选择器，将 display 属性设置为 block，这将导致按钮填充容器的宽度。以下代码块中突出显示的 CSS 说明了它的外观：

样式.css

@media (max-width: 60rem) {
  table,
  caption,
  tbody,
  tr,
  th,
  td {
    display: block;
    text-align: left;
  }
  
  thead {
    display: none;
  }

  tbody > tr:nth-child(even) {
    background-color: transparent;
  }

  table .button {
    display: block;
  }
}

在文本编辑器中保存对 styles.css 的更改，然后在浏览器中刷新 index.html。在小屏幕设备上，表格的内容现在都与跨越内容宽度的按钮左对齐。下图显示了它在手机上的 Safari 中是如何呈现的：

在本节中，您将表格转换为 block 元素，以使其在屏幕或浏览器窗口较小时更易于使用。在最后一部分中，您将提高视力正常的用户和使用屏幕阅读器的用户对表格的可访问性。

添加小屏幕上下文元素

现在您已经更改了小屏幕上表格元素的显示值，您可以添加一些增强功能以使该视图与大屏幕版本一样有用。您将添加一些 HTML，这将有助于使信息在小屏幕上更易于理解。然后您将提供专门针对表格信息的小屏幕体验的样式。

首先，在文本编辑器中打开 index.html。要提供因隐藏 thead 元素而丢失的表的上下文信息，您需要将该标题值添加到 <span> 元素内的每个单元格中。例如，您将在每个 <td> 元素中包含行星的 Radius 信息的列中的值之前添加 <span>Radius: </span>。此外，每个 <span> 元素都将有一个 class 属性设置为 label 值，因此可以快速设置这些元素的样式。以下代码块中突出显示的 HTML 显示了如何编写标记：

索引.html

...
  <tbody>
    <tr>
      <th>Mercury</th>
      <td><span class="label">Radius: </span>2,439.7 km</td>
      <td><span class="label">Moons: </span>0</td>
      <td><span class="label">Gravity: </span>3.7 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Mercury_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
    <tr>
      <th>Venus</th>
      <td><span class="label">Radius: </span>6,051.8 km</td>
      <td><span class="label">Moons: </span>0</td>
      <td><span class="label">Gravity: </span>8.87 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Venus_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
    <tr>
      <th>Earth</th>
      <td><span class="label">Radius: </span>6,371.0 km</td>
      <td><span class="label">Moons: </span>1</td>
      <td><span class="label">Gravity: </span>9.80665 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Earth_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
    <tr>
      <th>Mars</th>
      <td><span class="label">Radius: </span>3,389.5 km</td>
      <td><span class="label">Moons: </span>2</td>
      <td><span class="label">Gravity: </span>3.72076 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Mars_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
  </tbody>
...

将更改保存到 index.html 并返回浏览器检查小屏幕视图。围绕每个数据点含义的上下文信息现在可以在视觉上识别。下图显示了它将如何在浏览器中呈现：

接下来，在文本编辑器中返回 styles.css。当不再需要这些标签时，它们将出现在更大的屏幕上，因此它们需要一些样式来解决此问题。由于max-width媒体查询方式，这意味着查询外的.label的默认样式需要设置为display: none才能隐藏大屏上的内容。然后在媒体查询中，创建一个 .label 选择器，并将 display 属性设置为 inline，因为它应该在包含该值的内容流中。要在标签和数据点之间创建视觉分隔，请添加一个 font-weight 属性设置为 700。以下代码块中突出显示的 CSS 演示了如何以及在何处应用这些添加：

样式.css

...
td, th {
  padding: 0.5rem;
}

.label {
  display: none;
}

@media (max-width: 60rem) {
  ...
  .label {
    display: inline;
    font-weight: 700;
  }
}

保存对 styles.css 的更改，然后再次返回浏览器并刷新 index.html。浏览器会将标签呈现为粗体的内联内容，如下图所示：

仍在大屏幕上的 Web 浏览器中时，将窗口展开，直到表格返回表格样式。标签现在被隐藏，为每个场景提供独特的视觉和可访问信息。下图显示了现在如何渲染大屏幕版本的表格：

最后，您将为每个表格行提供额外的样式，使它们显示为自己的小表格。

在文本编辑器中打开 styles.css。在媒体查询中，添加一个 tbody th 后代选择器并添加来自 thead > tr 选择器的颜色属性和值。这将为每个行星名称提供相同的深蓝色背景和接近白色的文本颜色。然后，添加一个设置为 0.5rem 0.5rem 0 0 的 border-radius 属性，为标题创建一个圆顶。以下代码块中突出显示的 CSS 显示了如何设置行星名称的样式：

stlyes.css

...
@media (max-width: 60rem) {
  ...
  .label {
    display: inline;
    font-weight: 700;
  }
  
  tbody th {
    color: hsl(215, 25%, 100%);
    background-color: hsl(215, 80%, 20%);
    border-radius: 0.5rem 0.5rem 0 0;
  }
}

接下来，您将向数据集添加一些定义，并在每个分组之间留出一些间距。首先，在媒体查询中创建一个 tbody > tr 选择器，并将 border 属性设置为 1px solid hsl(215, 80%, 20%)。然后添加一个值为 0.5rem 的 border-radius 属性，它将圆化容器所有边的角。最后，创建一个 tbody > tr + tr 相邻兄弟组合器，将 margin-top 属性设置为 1rem，这将在每组数据之间留出空间。以下代码块中突出显示的 CSS 演示了它是如何编写的：

stlyes.css

...
@media (max-width: 60rem) {
  ...
  tbody th {
    color: hsl(215, 25%, 100%);
    background-color: hsl(215, 80%, 20%);
    border-radius: 0.5rem 0.5rem 0 0;
  }
  
  tbody > tr {
    border: 1px solid hsl(215, 80%, 20%);
    border-radius: 0.5rem;
  }
  
  tbody > tr + tr {
    margin-top: 1rem;
  }
}

最后，您将专门为每个 td 元素添加斑马条纹效果。这是通过创建一个 td:nth-child(even) 伪类选择器来完成的。然后使用与之前相同的 background-color 属性和值，如以下代码块中突出显示的：

stlyes.css

...
@media (max-width: 60rem) {
  ...
  tbody > tr + tr {
    margin-top: 1rem;
  }
  
  td:nth-child(even) {
    background-color: hsl(215, 50%, 93%);
  }
}

将更改保存到 styles.css 并在小宽度浏览器或智能手机上打开 index.html。表格中的每一行现在看起来就像是一个带有标题、数据点和一个按钮以了解更多信息的表格。下图显示了它是如何在智能手机浏览器上呈现的：

在最后一节中，您使用了 display 属性来显示和隐藏与小屏幕设备的查看场景相关的相关信息。您还为小屏幕表格提供了样式，使其更易于访问和使用。

结论

使用 display 属性时有很多可能性。在本教程中，您了解了 block 和 inline 的默认值。您将 <a> 元素更改为 inline-block，这使它成为 block 和 inline 的特殊组合。然后，您在小屏幕上将 <table> 的所有元素更改为 block，并将它们设置为在大屏幕上返回它们的默认表格显示值。最后，您使用 none 值在必要的时间和地点对所有能力的用户隐藏内容。 display 属性是一个强大的特性，并且有更多的值可用于进一步操纵盒模型的功能和影响元素的方式。

如果您想阅读更多 CSS 教程，请尝试如何使用 CSS 设置 HTML 样式系列中的其他教程。

如何在CSS中使用Display属性来操作盒子模型

介绍

先决条件

设置初始 HTML 和 CSS 文件

使用 inline-block 值

更改表以使用 display: block

添加小屏幕上下文元素

结论

使用 `inline-block` 值

更改表以使用 `display: block`