学无先后，达者为师

网站首页 编程语言 正文

CSS-元素隐藏的两种主要方式

作者：GingerCat637 更新时间： 2022-09-25 编程语言

CSS-元素隐藏的两种主要方式

目的

利用CSS样式隐藏元素

语法

方法一

display: none;

方法二

visibility: hidden;

原始效果

测试代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			div {
				width: 100px;
				height: 100px;
			}
			.box1 {
				background-color: #f00;
			}
			.box2 {
				background-color: #0f0;
			}
		</style>
	</head>
	<body>
		<div class="box1">我是box1</div>
		<div class="box2">我是box2</div>
	</body>
</html>

浏览器效果

原始效果

使用方法一效果

display: none;

测试代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			div {
				width: 100px;
				height: 100px;
			}
			.box1 {
				background-color: #f00;
				/* 使用方法一隐藏元素 */
				display: none;
			}
			.box2 {
				background-color: #0f0;
			}
		</style>
	</head>
	<body>
		<div class="box1">我是box1</div>
		<div class="box2">我是box2</div>
	</body>
</html>

浏览器效果

方法一效果

使用方法二效果

visibility: hidden;

测试代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			div {
				width: 100px;
				height: 100px;
			}
			.box1 {
				background-color: #f00;
				/* 使用方法二隐藏元素 */
				visibility: hidden;
			}
			.box2 {
				background-color: #0f0;
			}
		</style>
	</head>
	<body>
		<div class="box1">我是box1</div>
		<div class="box2">我是box2</div>
	</body>
</html>

浏览器效果

在这里插入图片描述

总结

使用display: none元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);

使用visibility: hidden虽然元素不可见, 但是会占据元素应该占据的空间;

参考

coderwhy前端课讲义

原文链接：https://blog.csdn.net/l_637/article/details/127003215

相关推荐

栏目分类
最近更新
Copyright © 2025   AB教程网    免责声明
本站部分资源收集于互联网、用户投稿，其版权归原作者所有，内容以共享、参考、学习为主，不存在任何商业目的。如有侵权请与本站联系，情况属实将予以删除!
本站由    提供CDN加速