日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

欄目分類
最近更新