CSS로 페이지 요소를 숨기는 방법은 무엇입니까? CSS 숨겨진 요소의 네 가지 구현 방법과 차이점(코드 예제)-CSS 튜토리얼-php.cn

CSS로 페이지 요소를 숨기는 방법은 무엇입니까? CSS 숨겨진 요소의 네 가지 구현 방법과 차이점(코드 예제)

青灯夜游

풀어 주다： 2018-09-13 10:17:59

원래의

2974명이 탐색했습니다.

CSS에는 요소를 숨기는 방법(화면 내에서 육안으로 보이지 않음)이 있습니다. 일부는 공간을 차지하고 일부는 클릭에 응답할 수 있으며 일부는 클릭에 응답할 수 없습니다. 그렇다면 이러한 CSS 메소드는 숨겨진 요소를 어떻게 구현하며, 이들 사이의 차이점은 무엇입니까? 이 장에서는 CSS에서 페이지 요소를 숨기는 방법을 소개합니다. CSS 숨겨진 요소의 네 가지 구현 방법과 그 차이점(코드 예제) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. CSS에서 숨겨진 요소의 네 가지 구현

1. visible: 숨김, 요소를 숨기도록 설정

코드 예:

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

로그인 후 복사

Rendering:

CSS로 페이지 요소를 숨기는 방법은 무엇입니까? CSS 숨겨진 요소의 네 가지 구현 방법과 차이점(코드 예제)

가시성 속성은 다음을 지정합니다. 요소가 표시됩니다. 값을 Hidden으로 설정하면 요소가 시각적으로 숨겨집니다. 숨겨진 요소 자체는 여전히 자체 위치를 차지하고 웹 페이지 레이아웃에 기여합니다.

2. 불투명도: 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>

로그인 후 복사

Rendering:

CSS로 페이지 요소를 숨기는 방법은 무엇입니까? CSS 숨겨진 요소의 네 가지 구현 방법과 차이점(코드 예제)

불투명도 속성은 요소의 투명도를 설정하는 것을 의미합니다. 요소의 경계 상자를 변경하도록 설계되지 않았습니다. 즉, 불투명도를 0으로 설정하면 요소가 시각적으로만 숨겨집니다. 요소 자체는 여전히 자체 위치를 차지하고 웹 페이지 레이아웃에 기여합니다. 이는 가시성: 위의 숨겨진 것과 유사합니다.

3. 디스플레이:없음, 요소를 숨기도록 설정

코드 예:

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

로그인 후 복사

Rendering:

CSS로 페이지 요소를 숨기는 방법은 무엇입니까? CSS 숨겨진 요소의 네 가지 구현 방법과 차이점(코드 예제)

display 속성은 단어의 의미에 따라 요소를 실제로 숨깁니다. 표시 속성을 없음으로 설정하면 요소가 표시되지 않고 상자 모델도 생성되지 않습니다. 이 속성을 사용하면 숨겨진 요소가 공간을 차지하지 않습니다. 뿐만 아니라 표시가 없음으로 설정되면 요소에 대한 직접적인 사용자 상호 작용 작업이 효과적이지 않습니다.

4. 위치: 절대, 요소를 숨기도록 설정

코드 구현:

<!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 숨겨진 요소의 네 가지 구현 방법과 차이점(코드 예제)

위치: 절대, 요소를 숨기도록 설정주요 원칙은 위쪽과 왼쪽을 설정하는 것입니다. 충분히 큰 요소의 음수는 화면에 보이지 않게 만듭니다.

2. 차이점

1. 가시성: 숨김
요소는 숨겨지지만 사라지지 않고 여전히 공간을 차지합니다. 숨긴 후에도 원래 HTML 스타일은 변경되지 않습니다.
가시성을 설정하여 숨김을 해제할 수도 있습니다.
이 이벤트를 트리거하지 않습니다. 이 속성을 동적으로 수정하면 다시 그려집니다.

2. 투명도: 0
요소는 숨겨지고 여전히 공간을 차지합니다.
하위 요소에 상속되며 하위 요소는 되돌릴 수 없습니다. 불투명도=1을 통해 숨겨진
불투명도:0인 요소는 여전히 바운드 이벤트를 트리거할 수 있습니다.

3.display:none
은 공간을 차지하지 않고 요소를 숨기므로 이 속성을 동적으로 변경하면 재배열(페이지 레이아웃 변경)이 발생하며 이는 페이지에서 요소를 삭제하는 것으로 이해될 수 있습니다. 후손에게 상속되지만 그 후손은 결국 모두 함께 숨겨지므로 표시되지 않습니다.

4. 위치: 절대

위치: 절대, 요소의 상단과 왼쪽을 충분히 큰 음수로 설정하면 화면에 보이지 않고 동적 상호 작용 효과가 나타납니다.

위 내용은 CSS로 페이지 요소를 숨기는 방법은 무엇입니까? CSS 숨겨진 요소의 네 가지 구현 방법과 차이점(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!