首頁 >web前端 >css教學 >css如何隱藏頁面元素？ css 隱藏元素的四種實作方法以及之間的差異（程式碼實例）

css如何隱藏頁面元素？ css 隱藏元素的四種實作方法以及之間的差異（程式碼實例）

青灯夜游原創: 2018-09-13 10:17:592998瀏覽

在CSS中，讓元素隱藏（指螢幕範圍內肉眼不可見）的方法很多，有的佔據空間，有的不佔據空間；有的可以回應點擊，有的不能回應點擊。那麼這些css方式是怎麼實現隱藏元素的，之間又有什麼差別。本章跟大家介紹css如何隱藏頁面元素？ css隱藏元素的四種實作方法以及之間的差異（程式碼實例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、css隱藏元素的四個實作

1. visibility: hidden，設定元素隱藏

程式碼實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素隐藏--visibility: hidden</title>
		<style>
			.demo{
				width: 800px;
				height: 200px;
				margin: 50px auto;
			}
			span{
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>元素隐藏1--visibility: hidden,元素隐藏2--visibility: hidden,元素隐藏3--visibility: hidden</p>
			<p>元素隐藏1--visibility: hidden,<span>元素隐藏2--visibility: hidden</span>,元素隐藏3--visibility: hidden</p>
		</div>
	</body>
</html>

效果圖：

css如何隱藏頁面元素？ css 隱藏元素的四種實作方法以及之間的差異（程式碼實例）

visibility屬性規定元素是否可見。將它的值設為 hidden 只能從視覺上隱藏元素，而被隱藏的元素本身依然佔據它自己的位置並對我們的網頁佈局起作用。

2. opacity: 0，設定元素隱藏

#程式碼實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素隐藏--opacity: 0</title>
		<style>
			.demo{
				width: 800px;
				height: 200px;
				margin: 50px auto;
			}
			span{
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</p>
			<p>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</p>
		</div>
	</body>
</html>

效果圖：

css如何隱藏頁面元素？ css 隱藏元素的四種實作方法以及之間的差異（程式碼實例）

##opacity屬性的意思是設定一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。這意味著將 opacity 設為 0 只能從視覺上隱藏元素。而元素本身依然佔據它自己的位置並對網頁的佈局起作用。這和上面的visibility: hidden 相似。

3. display:none，設定元素隱藏

#程式碼實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素隐藏--display:none</title>
		<style>
			.demo{
				width: 800px;
				height: 200px;
				margin: 50px auto;
			}
			span{
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>元素隐藏--display:none,元素隐藏--display:none,元素隐藏--display:none</p>
			<p>元素隐藏--display:none,<span>元素隐藏--display:none</span>,元素隐藏--display:none</p>
		</div>
	</body>
</html>

效果圖：

css如何隱藏頁面元素？ css 隱藏元素的四種實作方法以及之間的差異（程式碼實例） ##display屬性依照詞義真正隱藏元素。將 display 屬性設為 none 確保元素不可見且連盒模型也不產生。使用這個屬性，被隱藏的元素不佔據任何空間。不僅如此，一旦 display 設為 none 任何對該元素直接打使用者互動操作都不可能生效。

4. position: absolute，設定元素隱藏

程式碼實作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素隐藏--position: absolute</title>
		<style>
			.demo{
				width: 800px;
				height: 200px;
				margin: 50px auto;
			}
			span{
				position: absolute;
				top: -9999px;
   				left: -9999px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
		<p>元素隐藏1--position: absolute,元素隐藏2--position: absolute,元素隐藏3--position: absolute</p>
		<p>元素隐藏1--position: absolute,<span>元素隐藏2--position: absolute</span>,元素隐藏3--position: absolute</p>
		</div>
	</body>
</html>

效果圖：

css如何隱藏頁面元素？ css 隱藏元素的四種實作方法以及之間的差異（程式碼實例） position : absolute，設定元素隱藏的