CSS로 페이지 요소를 숨기는 방법은 무엇입니까? CSS 숨겨진 요소의 네 가지 구현 방법과 차이점(코드 예제)
- 青灯夜游원래의
- 2018-09-13 10:17:592962검색
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:
가시성 속성은 다음을 지정합니다. 요소가 표시됩니다. 값을 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:
불투명도 속성은 요소의 투명도를 설정하는 것을 의미합니다. 요소의 경계 상자를 변경하도록 설계되지 않았습니다. 즉, 불투명도를 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:
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>렌더링:
위치: 절대, 요소를 숨기도록 설정주요 원칙은 위쪽과 왼쪽을 설정하는 것입니다. 충분히 큰 요소의 음수는 화면에 보이지 않게 만듭니다.
2. 차이점
1. 가시성: 숨김
요소는 숨겨지지만 사라지지 않고 여전히 공간을 차지합니다. 숨긴 후에도 원래 HTML 스타일은 변경되지 않습니다.
가시성을 설정하여 숨김을 해제할 수도 있습니다.
이 이벤트를 트리거하지 않습니다. 이 속성을 동적으로 수정하면 다시 그려집니다.
2. 투명도: 0
요소는 숨겨지고 여전히 공간을 차지합니다.
하위 요소에 상속되며 하위 요소는 되돌릴 수 없습니다. 불투명도=1을 통해 숨겨진
불투명도:0인 요소는 여전히 바운드 이벤트를 트리거할 수 있습니다.
3.display:none
은 공간을 차지하지 않고 요소를 숨기므로 이 속성을 동적으로 변경하면 재배열(페이지 레이아웃 변경)이 발생하며 이는 페이지에서 요소를 삭제하는 것으로 이해될 수 있습니다. 후손에게 상속되지만 그 후손은 결국 모두 함께 숨겨지므로 표시되지 않습니다.
위 내용은 CSS로 페이지 요소를 숨기는 방법은 무엇입니까? CSS 숨겨진 요소의 네 가지 구현 방법과 차이점(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!