CSS Display(显示)

# CSS Display（显示）

# 1. 隐藏元素 - `display:none` 或 `visibility:hidden`

隐藏一个元素可以通过把 display 属性设置为 none，或把 visibility 属性设置为 hidden。这两种方法会产生不同的效果。

visibility:hidden 可以隐藏某个元素，但隐藏的元素仍然占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h1.hidden {visibility:hidden;} /* 隐藏元素但保留空间 */
</style>
</head>
<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意，实例中的隐藏标题仍然占用空间。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

display:none 可以隐藏某个元素，并且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h1.hidden {display:none;} /* 隐藏元素且不保留空间 */
</style>
</head>
<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意，实例中的隐藏标题不占用空间。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 2. CSS Display - 块和内联元素

块元素（block-level element）占据全部宽度，在前后都有换行符。

块元素的例子：
- <h1>
- <p>
- <div>
内联元素（inline element）只占据必要的宽度，不强制换行。

内联元素的例子：
- <span>
- <a>

# 3. 如何改变一个元素的显示方式

可以通过 CSS 将内联元素更改为块元素，反之亦然。这可以使页面元素的显示方式更符合设计需求，同时仍然遵循 Web 标准。

下面的示例将列表项显示为内联元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
li { display: inline; } /* 将列表项设置为内联元素 */
</style>
</head>
<body>

<p>链接列表水平显示：</p>

<ul>
  <li><a href="/html/" target="_blank">HTML</a></li>
  <li><a href="/css/" target="_blank">CSS</a></li>
  <li><a href="/js/" target="_blank">JavaScript</a></li>
  <li><a href="/xml/" target="_blank">XML</a></li>
</ul>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

下面的示例将 <span> 元素显示为块元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
span { display: block; } /* 将 span 元素设置为块元素 */
</style>
</head>
<body>

<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 4. 常见的块元素

块元素（block-level elements）会占据其父容器的全部宽度，并且在前后都会有换行符。以下是一些常见的块元素：

<div>：通用的块级容器。
<p>：段落。
<h1> 到 <h6>：标题。
<ul>：无序列表。
<ol>：有序列表。
<li>：列表项。
<blockquote>：块引用。
<pre>：预格式化文本。
<table>：表格。
<tr>：表格行。
<td>：表格单元格。
<th>：表格头单元格。
<header>：页眉。
<footer>：页脚。
<nav>：导航链接。
<section>：文档中的节。
<article>：文章。
<aside>：侧边栏内容。
<figure>：图像、图表等。
<figcaption>：图像、图表等的标题。

# 5. 常见的内联元素

内联元素（inline elements）只占据必要的宽度，不会在前后产生换行符。以下是一些常见的内联元素：

<span>：通用的内联容器。
<a>：超链接。
<img>：图像。
<strong>：加粗文本。
<em>：斜体文本。
<br>：换行符。
<i>：斜体文本。
<b>：加粗文本。
<u>：下划线文本。
<code>：代码文本。
<kbd>：键盘输入文本。
<small>：小号文本。
<sub>：下标文本。
<sup>：上标文本。
<abbr>：缩写。
<cite>：引用。
<mark>：高亮文本。
<time>：时间。

# 总结

通过使用 display 和 visibility 属性，可以灵活地控制 HTML 元素的显示和隐藏方式。理解这些属性的不同之处和应用场景，有助于更好地进行网页布局和设计。

编辑此页

上次更新: 2024/12/28, 18:32:08

← CSS 尺寸 (Dimension) CSS Position(定位)→