CSS를 숨기는 방법은 무엇입니까? 표시: 없음, 불투명도: 0, 가시성: 숨김의 차이점은 무엇입니까?
- yulia원래의
- 2018-09-06 18:07:432940검색
페이지를 작성할 때 숨기기를 자주 사용합니다. 숨기는 방법은 무엇이며 차이점은 무엇인가요?
불투명도 값을 0으로, 가시성을 숨김으로, 표시를 없음으로 설정할 수 있습니다. 그러나 각 방법에는 특정 상황에서 올바른 선택을 할 수 있는 차이점이 있습니다. 다음 기사에서는 상황에 따라 적절한 방법을 선택할 수 있도록 차이점에 대해 설명합니다.
1.display:none
표시 속성을 없음으로 설정하세요. 이 속성을 사용하면 숨겨진 요소가 공간을 차지하지 않습니다. 이 방법의 효과는 요소가 전혀 존재하지 않는 것과 같으며 동시에 이 요소의 자손도 숨겨집니다. 즉, 일반인의 관점에서 보면 해당 요소는 페이지에서 완전히 사라지며 보거나 만질 수 없습니다.
예: 요소를 숨기려면 "display:none" 스타일을 사용하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{width: 100px;height: 100px;background: red;display: none;}
.a2{width: 100px;height: 100px;background: yellow;}
</style>
</head>
<body>
<div class="a1">have a nice day</div>
<div class="a2">have a nice day</div>
</body>
</html>Rendering:
2 Opacity
이 속성은 개체의 투명도가 0일 때 설정됩니다. 그 당시에는 시각적으로 사라졌지만 일반인의 관점에서는 볼 수는 없지만 만질 수는 있는 위치를 여전히 차지하고 있었습니다. 또한 이 속성을 사용하여 요소를 추가하면 해당 요소의 배경 및 요소 콘텐츠도 그에 따라 변경됩니다.
예: 요소를 숨기려면 스타일 "불투명도: 0"을 사용하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{width: 100px;height: 100px;background: red;opacity: 0;}
.a2{width: 100px;height: 100px;background: yellow;}
</style>
</head>
<body>
<div class="a1">have a nice day</div>
<div class="a2">have a nice day</div>
</body>
</html>렌더링:
3. 가시성: 숨김
속성 값이 숨김으로 설정되면 요소가 숨겨집니다. 그러나 웹페이지에서 객체가 차지하는 공간은 눈에 보이지 않지만 가시적이다. 그리고 이는 웹 페이지의 레이아웃에 영향을 줍니다. 이 속성은 불투명도 속성과 유사하지만 불투명도와의 유일한 차이점은 사용자 상호 작용에 응답하지 않는다는 것입니다.
예: 요소를 숨기려면 "visibility: hiden" 스타일을 사용하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{width: 100px;height: 100px;background: red;visibility: hidden;}
.a2{width: 100px;height: 100px;background: yellow;}
</style>
</head>
<body>
<div class="a1">have a nice day</div>
<div class="a2">have a nice day</div>
</body>
</html>렌더링:
위에서는 3가지 숨기기 방법을 소개하는데, 실제 프로젝트에서는 각 방법이 다릅니다. 결국 어느 것을 사용해야 할까요? 상황에 따라 사용됩니다.
위 내용은 CSS를 숨기는 방법은 무엇입니까? 표시: 없음, 불투명도: 0, 가시성: 숨김의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!