LabEx
登录免费加入

探索 CSS 中的 Display 属性

CSSBeginner
立即练习

介绍

在本实验中，学生将探索控制网页元素布局和可见性的基本 CSS display 属性。通过一系列动手练习，参与者将学习如何操作 block、inline、inline-block 和 none 等 display 属性，掌握构建和管理网页布局的实用技能。实验涵盖了关键概念，例如理解不同 display 属性如何影响元素定位、创建导航菜单以及控制元素可见性，为 CSS 布局技术提供了全面的入门指导。

通过实际示例和代码演示，学习者将深入理解 display 属性如何影响网页设计，从而能够创建更灵活和响应式的网页布局。逐步的学习方法使学生能够从基本的块级元素特性开始，逐步构建知识，最终掌握更高级的 display 属性实现。

理解 Block Display 属性

在这一步中，你将学习 CSS 中的 block display 属性，这是控制网页元素布局的基本概念。默认情况下，许多 HTML 元素具有块级（block-level）display 属性。

首先，让我们创建一个 HTML 文件来演示 block display 属性。打开 WebIDE，在 ~/project 目录下创建一个名为 block-display.html 的新文件。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Block Display Property</title>
    <style>
      .block-element {
        display: block;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
  </body>
</html>

块级元素的关键特性：

  • 它们总是从新的一行开始
  • 默认情况下，它们占据可用的全部宽度
  • 可以应用宽度、高度、外边距（margin）和内边距（padding）属性
  • 块级元素垂直堆叠，一个接一个

让我们验证文件内容：

cat ~/project/block-display.html

示例输出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block Display Property</title>
    <style>
        .block-element {
            display: block;
            background-color: lightblue;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
</body>
</html>

常见的块级元素包括：

  • <div>
  • <p>
  • <h1> 到 <h6>
  • <section>
  • <article>
  • <ul> 和 <ol>

应用 Inline Display 属性

在这一步中，你将学习 CSS 中的 inline display 属性，该属性允许元素水平排列，并且仅占据必要的宽度。

让我们创建一个 HTML 文件来演示 inline display 属性。打开 WebIDE，在 ~/project 目录下创建一个名为 inline-display.html 的新文件。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline Display Property</title>
    <style>
      .inline-element {
        display: inline;
        background-color: lightgreen;
        padding: 5px;
        margin: 5px;
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
  </body>
</html>

内联元素的关键特性：

  • 它们在同一行中水平排列
  • 它们仅占据必要的宽度
  • 宽度和高度属性不起作用
  • 垂直内边距（padding）和外边距（margin）效果有限
  • 无法直接设置宽度和高度

让我们验证文件内容：

cat ~/project/inline-display.html

示例输出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Display Property</title>
    <style>
        .inline-element {
            display: inline;
            background-color: lightgreen;
            padding: 5px;
            margin: 5px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
</body>
</html>

常见的内联元素包括：

  • <span>
  • <a>
  • <strong>
  • <em>
  • <img>

实现 Inline-Block Display 属性

在这一步中，你将学习 CSS 中的 inline-block display 属性，它结合了内联元素和块级元素的最佳特性。

让我们创建一个 HTML 文件来演示 inline-block display 属性。打开 WebIDE，在 ~/project 目录下创建一个名为 inline-block-display.html 的新文件。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline-Block Display Property</title>
    <style>
      .inline-block-element {
        display: inline-block;
        background-color: lightsalmon;
        padding: 10px;
        margin: 10px;
        border: 2px solid red;
        width: 150px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
  </body>
</html>

inline-block 元素的关键特性：

  • 像内联元素一样水平排列
  • 可以像块级元素一样设置宽度、高度、内边距和外边距
  • 允许精确控制元素的大小和间距
  • 适用于创建水平布局，例如导航菜单或图片库

让我们验证文件内容：

cat ~/project/inline-block-display.html

示例输出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline-Block Display Property</title>
    <style>
        .inline-block-element {
            display: inline-block;
            background-color: lightsalmon;
            padding: 10px;
            margin: 10px;
            border: 2px solid red;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
</body>
</html>

inline-block 的常见用例：

  • 创建水平导航菜单
  • 设计图片库
  • 精确控制元素的并排对齐

使用 None Display 属性隐藏元素

在这一步中，你将学习 CSS 中的 display: none 属性，该属性会完全从页面布局中移除元素，使其不可见且不占据任何空间。

让我们创建一个 HTML 文件来演示 none display 属性。打开 WebIDE，在 ~/project 目录下创建一个名为 none-display.html 的新文件。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>None Display Property</title>
    <style>
      .visible-element {
        background-color: lightblue;
        padding: 10px;
        margin: 10px;
      }

      .hidden-element {
        display: none;
        background-color: lightgray;
        padding: 10px;
        margin: 10px;
      }

      .toggle-button {
        padding: 5px 10px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">
      Toggle Hidden Element
    </button>

    <script>
      function toggleElement() {
        var hiddenDiv = document.getElementById("hiddenDiv");
        if (hiddenDiv.style.display === "none") {
          hiddenDiv.style.display = "block";
        } else {
          hiddenDiv.style.display = "none";
        }
      }
    </script>
  </body>
</html>

display: none 的关键特性：

  • 完全从页面布局中移除元素
  • 元素不占据任何空间
  • 与 visibility: hidden 不同（后者保留空间但使元素不可见）
  • 适用于动态内容隐藏和响应式设计

让我们验证文件内容：

cat ~/project/none-display.html

示例输出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None Display Property</title>
    <style>
        .visible-element {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
        }

        .hidden-element {
            display: none;
            background-color: lightgray;
            padding: 10px;
            margin: 10px;
        }

        .toggle-button {
            padding: 5px 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">Toggle Hidden Element</button>

    <script>
        function toggleElement() {
            var hiddenDiv = document.getElementById('hiddenDiv');
            if (hiddenDiv.style.display === 'none') {
                hiddenDiv.style.display = 'block';
            } else {
                hiddenDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>

display: none 的常见用例：

  • 条件性地隐藏元素
  • 创建响应式菜单
  • 管理动态内容的可见性
  • 实现下拉菜单和切换界面

使用 Display 属性创建导航菜单

在这一步中，你将使用之前学到的 display 属性创建一个水平导航菜单。这个实际示例将展示如何使用 inline-block display 来创建一个响应式且整洁的导航布局。

让我们创建一个包含导航菜单的 HTML 文件。打开 WebIDE，在 ~/project 目录下创建一个名为 navigation-menu.html 的新文件。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Navigation Menu</title>
    <style>
      .nav-menu {
        background-color: #333;
        padding: 10px;
      }

      .nav-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .nav-menu li {
        display: inline-block;
        margin-right: 20px;
      }

      .nav-menu a {
        text-decoration: none;
        color: white;
        font-family: Arial, sans-serif;
        transition: color 0.3s ease;
      }

      .nav-menu a:hover {
        color: #ffd700;
      }
    </style>
  </head>
  <body>
    <nav class="nav-menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

在这个导航菜单中使用的关键技术：

  • 使用 display: inline-block 实现菜单项
  • 移除默认的列表样式
  • 添加悬停效果
  • 创建水平布局

让我们验证文件内容：

cat ~/project/navigation-menu.html

示例输出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Menu</title>
    <style>
        .nav-menu {
            background-color: #333;
            padding: 10px;
        }

        .nav-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .nav-menu li {
            display: inline-block;
            margin-right: 20px;
        }

        .nav-menu a {
            text-decoration: none;
            color: white;
            font-family: Arial, sans-serif;
            transition: color 0.3s ease;
        }

        .nav-menu a:hover {
            color: #ffd700;
        }
    </style>
</head>
<body>
    <nav class="nav-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

导航菜单的最佳实践：

  • 使用语义化的 HTML5 标签，如 <nav>
  • 保持菜单结构简单
  • 确保良好的可读性和可访问性
  • 添加悬停和活动状态以提升用户交互体验

总结

在本实验中，参与者探索了 CSS 的 display 属性，重点了解了不同的 display 值如何影响网页布局和元素行为。实验从 block display 属性开始，展示了块级元素如何占据整个宽度、从新行开始，以及如何通过 margin、padding 和 border 进行样式设置。参与者学习了常见的块级元素，如 <div>、<p> 和标题标签，以及它们如何在文档中自然垂直堆叠。

随后的步骤引导学习者应用 inline、inline-block 和 none display 属性，提供了控制元素渲染和可见性的实用见解。通过创建实际示例并尝试 CSS 样式，参与者获得了操作元素显示特性的实践经验，最终理解了如何使用 CSS display 属性创建更灵活和响应式的网页布局。

相关 CSS 课程
CSS 入门教程

CSS 入门教程

cssweb-development
构建一个井字棋网页应用

构建一个井字棋网页应用

javascriptweb-development
创建打地鼠网页游戏

创建打地鼠网页游戏

javascriptweb-development