【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象

这篇具有很好参考价值的文章主要介绍了【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、元素的显示与隐藏

在开发中 , 经常需要使用到 元素的显示与隐藏 ,

默认状态下 , 按钮下面没有任何内容 ;
将鼠标移动到红色按钮后 , 显示一个对话框布局 ;

控制元素的显示与隐藏的样式有如下三种 :

display
visibility
overflow

二、display 隐藏对象

1、display 隐藏对象语法说明

为标签元素设置

display: none

可以隐藏该元素 ;

如果想要显示该对象 , 为该元素设置

display: block

即可 ;

2、display 显示元素代码示例

设置 display: block 可以显示元素 , 同时该样式还可以将元素转为块元素 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用 diaplay 显示 / 隐藏元素</title>
	<style>
		.one {
			/* 显示元素 / 转为块元素 */
			display: block;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.two {
			width: 300px;
			height: 300px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>

显示效果 :
【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )

3、display 隐藏元素代码示例

使用 display 隐藏元素 , 该元素就会从标准流中脱离 , 后面的元素会顶上 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用 diaplay 显示 / 隐藏元素</title>
	<style>
		.one {
			/* 隐藏元素 */
			display: none;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.two {
			width: 300px;
			height: 300px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>

显示效果 :
【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )

进入调试模式 , 可以看到 , 该元素在界面中还在 , 只是隐藏了 ;

【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )

三、visibility 隐藏对象

1、visibility 隐藏对象语法说明

visibility 的属性值默认为 inherit , 继承自父元素 , 一般默认都是可见的 ; 一般情况下父元素设置不可见 , 子元素也同时不可见 ;

visibility 设置属性值 visible , 表示该元素是可见的 ;

visibility 设置属性值 hidden , 表示该元素是隐藏的 ;

2、visibility 显示对象代码示例

visibility 显示对象 , 为其设置 visible 属性值即可 , 一般对象默认也是显示的 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用 visibility 显示 / 隐藏元素</title>
	<style>
		.one {
			/* 显示元素 */
			visibility: visible;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.two {
			width: 300px;
			height: 300px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>

显示效果 :

【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )

3、visibility 隐藏对象代码示例

visibility 隐藏对象 , 但是位置仍然保留 , 后续元素无法将其原来的位置覆盖 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用 visibility 显示 / 隐藏元素</title>
	<style>
		.one {
			/* 隐藏元素 */
			visibility: hidden;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.two {
			width: 300px;
			height: 300px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>

执行结果 :

【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )

四、overflow 隐藏对象

1、overflow 隐藏对象语法说明

overflow 只能对超出部分隐藏代码 ;

overflow 可设置的值 :

visible : 子元素超出父容器的部分仍然显示 ;
hidden : 子元素超出父容器的部分隐藏 ;
scroll : 不管子元素是否超出父容器 , 都显示滚动条 ;
auto : 如果子元素超出父容器显示滚动条 , 如果子元素没有超出父容器不显示滚动条 ;

效果参考【CSS】清除浮动 ② ( 清除浮动 - 父级元素设置 overflow 样式 | overflow 属性样式效果 | 溢出隐藏效果 | 垂直进度条效果 | 水平垂直进度条效果 ) 博客 ;文章来源地址https://www.toymoban.com/news/detail-413281.html

到了这里，关于【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！