css三种标签隐藏方法(及它们用法区别), css显隐性问题

本文介绍: css 三种标签隐藏方法(及它们用法区别), css显隐性问题

/*1 (display)显示-block/inline/inline-block, 隐藏-none, 不保留位置*/
display: block;
/*2 (visibility)可视化, hidden-隐藏, visible-可视, 保留位置*/
visibility: hidden;
visibility: visible;
/*3 (opacity)透明度设置(位置一直都在)*/
opacity: 0;

1.visibility 属性

visibility, 常用方法, 在css 样式中可先设置visibility: hidden; 隐藏标签, 再用伪类选择器 hover去设置visibility: visible; 显示隐藏的内容 (visibility 方法会保留原标签的文档流位置)
推荐使用!!!

2.opacity属性

opacity, 本意是用来设置透明度, 当设置为op a city: 0; 时, 也具有隐藏标签效果, 同样, 在伪类选择器 hover中设置op a city: 1; 时则可以显示出所隐藏的内容 (op a city 方法可以理解为完全透明化, 同样保留原标签位置)
一般推荐!

3.display属性

display属性, 本意为设置标签为行–块元素, 但当取di s play: none; 时, 原有的标签则会消失, 后面同样可以用h ov e r 伪类选择器去设置d i s play: b lock/inline/inline–b lock; 去完成隐藏–显示效果 (因为d i s play: none; 是完全消除标签, 更像删除, 所以设为none时不能保留原有标签位置)
慎用!!

/*这里用了visibility属性, 注释里是display属性*/
.hidden {
	position: absolute;
	width: 400px;
	height: 222px;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 5% 5% 0 0;
	top: 0px;
	left: 0px;
	/*display: none;*/
	visibility: hidden;
}
.hidden h1 {
	text-align: center;
	margin-top: 80px;
	color: white;
}
/*致命点*/
.content:hover .hidden{
	/*display: block;*/
	visibility: visible;
}