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

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

CSS-元素隱藏的兩種主要方式

作者：GingerCat637 更新時(shí)間： 2022-09-25 編程語(yǔ)言

CSS-元素隱藏的兩種主要方式

目的

利用CSS樣式隱藏元素

語(yǔ)法

方法一

display: none;

方法二

visibility: hidden;

原始效果

測(cè)試代碼

<!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;

測(cè)試代碼

<!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;

測(cè)試代碼

<!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>

瀏覽器效果

在這里插入圖片描述

總結(jié)

使用display: none元素不顯示出來(lái), 并且也不占據(jù)位置, 不占據(jù)任何空間(和不存在一樣);

使用visibility: hidden雖然元素不可見(jiàn), 但是會(huì)占據(jù)元素應(yīng)該占據(jù)的空間;

參考

coderwhy前端課講義

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

欄目分類
最近更新