css--display和visibility

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		a{
			background-color: #bfa;
			/*
			 *将一个内联元素变成快元素
			 * 通过display样式可以修改元素的类型 
			 * 可选值：
			 * 		inline:可以将一个元素作为内联元素显示
			 * 		block:可以将一个元素设置块元素显示
			 * 		inline-block:将一个元素转换为行内块元素
			 * 					-可以使一个元素既有行内元素的特点又有块元素的特点
			 * 					既可以设置宽高，又不会独占一行
			 * 		none:不显示元素，并且元素不会在页面中继续占有位置
			 */
			display: block;
			/*
			 * 为其设置宽高
			 */
			width: 100px;
			height: 100px;
		}
		.box{
			width: 100px;
			height: 100px;
			background-color: yellow;
			/*
			 * 使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
			 * 
			 */
			/*display: none;*/
			/*
			 * visibility
			 * -可以用来设置元素的隐藏和显示的状态
			 * -可选值
			 * 		visible默认值，元素默认会在页面显示
			 * 		hidden 元素会隐藏不显示
			 * 		但是他的位置会依然保持
			 * 
			 */
			visibility:hidden;
		}
	</style>
	<body>
		<div class="box">
			
		</div>
		<a href="#">我是一个大大的超连接</a>
		<span>
			hello
		</span>
	</body>
</html>
显示：visible
显示：hidden
css--display和visibility