元素的隐藏以及其阐述各种隐藏后的不同效果

主要的手段通过元素的样式调整即可

需要操作的属性有：display、visibility、opacity、filter、overflow、transform

不改变元素本身基本样式时进行元素隐藏

display:none; 元素隐藏，同时该元素下的子元素也会一并隐藏，并且在页面上不占据空间，需要显示时添加display:block;即可

代码展示

<style>
	.box{
		width:100px;
	}
	.box1,
	.box2{
		width:100px;
		height:100px;
		line-height:100px;
		text-align:center;
		font-size:20px;
		color:red;
		cursor:pointer;
		background-color:rgb(11,222,33);
	}
	.box1{
		display:none;
	}
	.box:hover .box1{
		display:block;
	}
</style>
<div class="box">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

效果展示
box1隐藏了
box1显示出来了

visibility:hidden;元素隐藏，对该元素的子元素也会生效，元素不可见但是会保留当前元素本身的位置,显示时visibility:visible;

代码展示

<style>
	.box{
		width:100px;
	}
	.box1,
	.box2{
		width:100px;
		height:100px;
		line-height:100px;
		text-align:center;
		font-size:20px;
		color:red;
		cursor:pointer;
		background-color:rgb(11,222,33);
	}
	.box1{
		visibility:hidden;
	}
	.box:hover .box1{
		visibility:visible;
	}
</style>
<div class="box">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

效果展示
box1隐藏并保留了位置

box1显示出来

opacity:0;元素不可见，仅仅只表示该元素不可见，也是占据了位置的，可以对元素本身设置伪类选择使之显示出来。显示时opacity:1;
代码展示

<style>
	.box{
		width:100px;
	}
	.box1,
	.box2{
		width:100px;
		height:100px;
		line-height:100px;
		text-align:center;
		font-size:20px;
		color:red;
		cursor:pointer;
		background-color:rgb(11,222,33);
	}
	.box1{
		opacity:0;
	}
	.box1:hover{
		opacity:1;
	}
</style>
<div class="box">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

效果展示

opacity为0时隐藏并保留位置
opacity为1时显示

filter:blur(999999px)，其作用效果同opacity一样，只是filter:blur(9999px);对应的是该元素的模糊度，模糊度足够大时，就可以使元素达到不可见的效果,恢复至可见设置filter:blur(0px);

代码展示

<style>
	.box{
		width:100px;
	}
	.box1,
	.box2{
		width:100px;
		height:100px;
		line-height:100px;
		text-align:center;
		font-size:20px;
		color:red;
		cursor:pointer;
		background-color:rgb(11,222,33);
	}
	.box1{
		filter:blur(99999px);
	}
	.box1:hover{
		filter:blur(0px);
	}
</style>
<div class="box">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

box1的filter:blur(9999px)时元素隐藏并保留位置
box1的filter:blur(0px)时显示出来

改变元素本身基本样式时进行元素隐藏

width:0;height:0;overflow:hidden;，通过改变元素的基本样式对元素的溢出进行隐藏，当宽高都为0时元素可以视作等同于没有了，若元素内有内容那自然就会溢出显示，此时将溢出的都隐藏起来，那就可以视为不见了，同时该元素也不会保留位置

代码展示

<style>
	.box{
		width:100px;
	}
	.box1,
	.box2{
		width:100px;
		height:100px;
		line-height:100px;
		text-align:center;
		font-size:20px;
		color:red;
		cursor:pointer;
		background-color:rgb(11,222,33);
	}
	.box1{
		width:0;
		height:0;
		overflow:hidden;
	}
	.box:hover .box1{
		width:100px;
		height:100px;
		overflow:visible;
	}
</style>
<div class="box">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

效果展示

修改了box1的宽高并做了溢出隐藏
重画box1的宽高并使之显示
当没有为box1重画宽高时，仅仅只是元素的溢出显示

transform:scale(0);利用css3新增属性，对元素进行一个缩放也可达到隐藏效果，只要元素缩放程度不等于0，那么元素始终都是可见的，缩小至0就可等同于无了，但是这种方式是会保留元素位置的，显示时：transform:scale(1)

代码展示

<style>
	.box{
		width:100px;
	}
	.box1,
	.box2{
		width:100px;
		height:100px;
		line-height:100px;
		text-align:center;
		font-size:20px;
		color:red;
		cursor:pointer;
		background-color:rgb(11,222,33);
	}
	.box1{
		transform:scale(0)
	}
	.box:hover .box1{
		transform:scale(1);
	}
</style>
<div class="box">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

效果展示
元素缩放至0
元素还原至1