文章目录
1. 隐藏元素 none
1.1 Display
- 作用：
隐藏某个元素，且该元素不占用空间。
- 示例
h1.hidden {display:none;}
1.2 和 Visibility比较
- 作用
隐藏某个元素，但该元素仍占用之前空间。
- 语法
visibility:hidden
2. 内联元素→ 块元素 inline
- 语法
display:inline;
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</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>
- 不加
display:inline;时应显示为块元素：
- 添加后显示为内联元素：
3. 块元素 → 内联元素 block
- 语法
display:block;
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style>
span
{
display:block;
}
</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>
- < span > 本应连成一行显示，加上
display:block;后，显示为
