html部分内容需要隐藏怎么办

	写之前将一个小故事:在我们的页面中有老大,老二,老三,今天老大,老三发现老二不见了,隐藏了,老大,老二觉得很高级。
	![在这里插入图片描述](https://img-blog.csdnimg.cn/3239fb2c810940cf949a84dee64f1d6e.jpeg#pic_center)

马上老二就要隐藏喽!!!
这里给初学者提供几个简单的办法,大家可以试一试。
第一种:视觉隐藏,页面保留位置

.laoer{
				width: 100px;
				height: 100px;
				background-color: #ff5500;
				text-align: center;
				line-height: 100px;
				/* 老二去哪里了,这个是视觉上消失,但是看不到盒子任何内容 */
				visibility: hidden;
			}	
	第二种:完全隐藏,不占空间
.laoer{
				width: 100px;
				height: 100px;
				background-color: #ff5500;
				text-align: center;
				line-height: 100px;
				/* 老二去哪里了,完全不占空间*/
				display: none;
			}	
	第三种:颜色完全透明法
.laoer{
				width: 100px;
				height: 100px;
				background-color: #ff5500;
				text-align: center;
				line-height: 100px;
				/* 老二去哪里了,透明度完全为0*/
				opacity: 0;
			}	
	第四种:移到父级盒子外边去,哈哈
.laoer{
				width: 100px;
				height: 100px;
				background-color: #ff5500;
				text-align: center;
				line-height: 100px;
				/* 老二去哪里了,移到父级盒子外边去*/
				margin-left: -1000px;
				margin-top: -100px;
			}	

希望大家喜欢点个赞,感谢

你可能感兴趣的:(html,css,前端)