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;，这样就可以设置内联元素的高宽了。