CSS中常见的几种隐藏显示属性的使用

第一种

        也是最常见的一种

        display：none|block；

属性值none：  是将在哪个标签中加的就将哪个标签隐藏掉，如果将其显示的话为加display :block;

常见场景为鼠标悬停显示，鼠标离开隐藏

.one{
				width: 400px;
				height: 200px;
				background-color: green;
				display: none;
			}
.warp:hover>.one{
				display: block;
			}

弊端：这样隐藏的话会造成高度塌陷；原来的位置会被其他元素给占用，可以理解位，该标签脱离了文档流

第二种

给其添加高度为0；  鼠标悬停是在设置高度

.test{
				width: 300px;
			
				background-color: greenyellow;
				 height: 0px; 
			overflow: hidden; 
		
			
			}
	.warp:hover>.test{
			height: 300px; 
			}

弊端：元素中不能设置内容，如果设置内容，该内容不会被隐藏掉，会将盒子继续撑开

解决方法：可以给盒子加一个属性：overflow:hidden;

第三种

给要隐藏的标签加上visibility: hidden;  该元素会被隐藏，这样就会解决到上面的问题，不会高度塌陷，原来的位置依然被站着

.test{
				width: 300px;
				height: 300px;
				background-color: greenyellow;
		
			
				visibility: hidden;
			
			}
.warp:hover>.test{
				visibility: visible;
				
			}

可以运行，不会高度塌陷，原来的位置依然占据，当隐藏点之后，想要鼠标悬停显示，不会有效果，因为标签被隐藏起来，可以给父盒子添加鼠标悬停事件

第四种

可以给标签加一个opacity  属性，该属性是设置透明度的，在该标签上加入opacity:0;将其设置为透明度为0；在鼠标悬停显示的伪类选择器上加入opactiy:1;将其透明度改为1，显现出来

该方法也会占据原有的位置不会产生高度塌陷问题

.test{
				width: 300px;
				height: 300px;
				background-color: greenyellow;
				
				
				 opacity: 0;
			}
.warp:hover>.test{
			
				opacity: 1; 
			}

常见实现高度塌陷的终极解法：

可以给高度塌陷的盒子加一个伪元素affter:

/* 解决问题的终极方案 */
	.clearfix::after{
		content: "";
		display: block;
		height: 0px;
		overflow: hidden;
		clear: both;
	}

可以将该类加到公用css文件中，使用的时候，直接调用该类名就是了

如：

	<div class="site_top_content clearfix">
/*将类名插入到高度塌陷的class里面*/