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

GingerCat637

已于 2022-09-23 08:03:14 修改

阅读量197

点赞数

分类专栏： CSS的笔记文章标签： css 前端 html

于 2022-09-23 06:05:35 首次发布

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

版权

CSS的笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>