CSS 元素的隐藏与显示
# CSS 元素的隐藏与显示
# 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
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
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
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
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>：时间。
编辑此页 (opens new window)