显示（display）

在CSS中，`display` 属性用于指定元素的显示方式。`display` 属性可以改变元素的默认显示方式，比如将一个元素从块级元素（block）转换为行内元素（inline），或者将一个元素隐藏（none）。

下面是一个关于 `display` 属性的入门教程，包括一些基础知识和一个完整的例子。

### 基础知识讲解

#### 1. 块级元素（Block-level elements）

块级元素通常占据一整行，并且默认情况下会另起一行。常见的块级元素包括 `<p>`、`<h1>`、`<div>` 等。

```css
.block-element {
  display: block;
}
```

#### 2. 行内元素（Inline elements）

行内元素不会另起一行，而是紧贴在其前面的元素之后。常见的行内元素包括 `<a>`、`<span>`、`<em>` 等。

```css
.inline-element {
  display: inline;
}
```

#### 3. 行内块级元素（Inline-block elements）

行内块级元素既可以像行内元素一样紧贴在其前面的元素之后，又可以设置宽高，类似于块级元素。

```css
.inline-block-element {
  display: inline-block;
}
```

#### 4. 隐藏元素（None）

使用 `display: none;` 可以隐藏元素，使其不显示在页面上。

```css
.hidden-element {
  display: none;
}
```

#### 5. 列表元素（List items）

列表元素如 `<li>` 默认情况下是行内元素，但可以通过设置 `display` 属性为 `list-item` 来使其显示为块级元素。

```css
.list-item {
  display: list-item;
}
```

### 完整例子

下面是一个简单的HTML和CSS示例，展示了如何使用 `display` 属性。

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Attribute Example</title>
<style>
  .block-element {
    display: block;
    background-color: #f0f0f0;
    margin: 10px;
  }
  .inline-element {
    display: inline;
    background-color: #f0f0f0;
    margin: 10px;
  }
  .inline-block-element {
    display: inline-block;
    background-color: #f0f0f0;
    margin: 10px;
  }
  .hidden-element {
    display: none;
  }
  .list-item {
    display: list-item;
    background-color: #f0f0f0;
    margin: 10px;
  }
</style>
</head>
<body>

<div class="block-element">Block Element</div>
<span class="inline-element">Inline Element</span>
<div class="inline-block-element">Inline-block Element</div>
<div class="hidden-element">Hidden Element</div>
<li class="list-item">List Item</li>

</body>
</html>
```

在这个例子中，我们定义了五个不同的元素，每个元素都使用了不同的 `display` 值。运行这个HTML文件，你将会看到不同的元素显示方式。

- `.block-element` 是一个块级元素，会占据一整行。
- `.inline-element` 是一个行内元素，紧贴在其前面的元素之后。
- `.inline-block-element` 是一个行内块级元素，既可以设置宽高，又可以紧贴在其前面的元素之后。
- `.hidden-element` 被隐藏，不显示在页面上。
- `.list-item` 是一个列表项，默认情况下是行内元素，但通过设置 `display` 为 `list-item`，它显示为块级元素。

通过这些例子，你应该能够理解 `display` 属性的基本用法和不同值对元素显示方式的影响。

显示（display）

目录