1.CSS元素的显示（display）、可见性（visibility）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

1.1 隐藏元素：display:none与visibility:hidden

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

  • visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
  • display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

示例1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">	
<head>
	<meta charset="utf-8">
	<style type="text/css">
		h1.hidden {
			visibility: hidden;
		}
	</style>
</head>
<body>
	<h1>可见标题，下面有隐藏标题</h1>
	<h1 class="hidden">隐藏标题</h1>
	<p>注意，该实例中的隐藏标题仍然占用空间。</p>
</body>
</html>

示例2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">	
<head>
	<meta charset="utf-8">
	<style type="text/css">
		h1.hidden {
			display: none;
		}
	</style>
</head>
<body>
	<h1>可见标题，下面有隐藏标题</h1>
	<h1 class="hidden">隐藏标题</h1>
	<p>注意，该实例中的隐藏标题不占用空间。</p>
</body>
</html>

1.2 更改块元素和行内元素的显示

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

  • <h1>
  • <p>
  • <div>

行内元素只需要必要的宽度，不强制换行。

行内元素的例子：

  • <span>
  • <a>

通过display: inline; 可以将块元素的显示更改为内联元素的显示。

通过display: block; 可以将内联元素的显示更改为块元素的显示。

示例3:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			li {
				/* display属性的值为"inline"的结果,两个元素显示在同一水平线上。*/
				display: inline;
			}
			span {
				/* display属性值为"block"的结果,这两个元素之间的换行符。*/
				display: block;
			}
		</style>
	</head>
	
	<body>
		<p>列表中链接依次水平显示：</p>
		<ul>
			<!-- 如果不指定display: inline;
			     则下面的5个列表项会依次换行显示 -->
			<li><a href="https://www.baidu.com" target="_blank">百度</a></li>
			<li><a href="https://www.tencent.com" target="_blank">腾讯</a></li>
			<li><a href="https://www.1688.com" target="_blank">阿里巴巴</a></li>
			<li><a href="https://www.huawei.com" target="_blank">华为</a></li>
			<li><a href="https://www.jd.com" target="_blank">京东</a></li>
		</ul><hr />
		<h2>WBG</h2>
		<span>越共、黑天使、赎罪小子、off</span>
		<span>The shy</span>
		<h2>TES</h2>
		<span>魏延、诸葛、左手、马超</span>
		<span>水</span>
	</body>
</html>

2.CSS元素的溢出（overflow）

CSS overflow 属性用于控制内容溢出元素框时显示的方式。可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值： （注意：overflow 属性只工作于指定高度的块元素上。）

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

overflow: visible

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				background-color: yellow;
				width: 200px;
				height: 50px;
				border: 1px dotted red;
				overflow: visible;
			}
		</style>
	</head>
	
	<body>
		<div>
			<p>这里的文本内容会溢出元素框！！！</p>
			<p>这里的文本内容会溢出元素框！！！</p>
			<p>这里的文本内容会溢出元素框！！！</p>
		</div>
	</body>
</html>

overflow1

2.2 overflow: scroll; 和 overflow: hidden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#overflowTest1 {
				background-color: #00FFFF;
				color: #FF0000;
				border: 1px solid #008000;
				width: 450px;
				height: 100px;
				padding: 30px;
				overflow: scroll;
			}
			#overflowTest2 {
				background-color: #00FFFF;
				color: #FF0000;
				border: 1px solid #008000;
				width: 450px;
				height: 100px;
				padding: 30px;
				overflow: hidden;
			}
		</style>
	</head>
	
	<body>
		<div id="overflowTest1">
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
		</div><br /><br />
		<div id="overflowTest2">
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
		</div>
	</body>
</html>

overflow1

可以发现scroll会生成滚动条，hidden则会隐藏溢出的内容。

2.3 overflow: auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#overflowTest1 {
				background-color: #00FFFF;
				color: #FF0000;
				border: 1px solid #008000;
				width: 450px;
				height: 100px;
				padding: 30px;
				overflow: auto;
			}
			#overflowTest2 {
				background-color: #00FFFF;
				color: #FF0000;
				border: 1px solid #008000;
				width: 450px;
				height: 100px;
				padding: 30px;
				overflow: auto;
			}
		</style>
	</head>
	
	<body>
		<div id="overflowTest1">
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>

		</div><br /><br />
		<div id="overflowTest2">
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
		</div>
	</body>
</html>

overflow1

可以看出auto在某些方面更为优秀，可以自己判断是否需要生成滚动条，大多数开发情况下都会选择auto。