Display(显示) 与 Visibility(可见性)

display - 属性设置一个元素应如何显示。

visibility - 属性指定一个元素应可见还是隐藏。

隐藏元素

css_display_1.jpg

图1

display:none,隐藏元素,不占空间。visibility:hidden 隐藏元素,占空间。
以上实例中,对 "span2" 进行不同设置,设置为 visibility:hidden 时,元素隐藏了,但是空间还占着。

visibility常用的值有:

  • visibility:visible(可见)
  • visibility:hidden(隐藏)

CSS - display 块和内联元素

块元素 : 浏览器默认为 display: block;,自占一行,如 div、p、h1。块元素能设置宽高,设置后还是自占一行。

内联元素:浏览器默认为 display:inline;,与其他内联元素同一行,如 a、span、i。内联元素不能设置宽高。

注:一般不会在内联元素里面嵌套块元素

CSS - display 改变元素的显示

在实际运用中,我们需要改变元素的 display 。

1.让两个块元素并列,则设置块元素为 行内块元素

display: inline-block;

2.两个块元素的间隙

在1中,两个块元素并列了,但是两个块元素之间有间隙,这是因为浏览器把块元素的折行当成了空格, 可以设置父元素 display: table;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>pangugle 教程</title>
		<style>
			.parent{display: table;}
			.parent div{
				width: 100px;
				height: 100px;
				display: inline-block;
				background-color: #5F9EA0;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div>菜单栏</div>
			<div>内容</div>
		</div>
	</body>
</html>

注:在实际运用中,经常将内联元素设置为 display: inline-block;,这样就可以设置内联元素的高宽了。