CSS를 숨기는 방법은 무엇입니까? 표시: 없음, 불투명도: 0, 가시성: 숨김의 차이점은 무엇입니까?-CSS 튜토리얼-php.cn

CSS를 숨기는 방법은 무엇입니까? 표시: 없음, 불투명도: 0, 가시성: 숨김의 차이점은 무엇입니까?

yulia

풀어 주다： 2018-09-06 18:07:43

원래의

2957명이 탐색했습니다.

페이지를 작성할 때 숨기기를 자주 사용합니다. 숨기는 방법은 무엇이며 차이점은 무엇인가요?
불투명도 값을 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:

CSS를 숨기는 방법은 무엇입니까? 표시: 없음, 불투명도: 0, 가시성: 숨김의 차이점은 무엇입니까?

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>

로그인 후 복사

렌더링:

CSS를 숨기는 방법은 무엇입니까? 표시: 없음, 불투명도: 0, 가시성: 숨김의 차이점은 무엇입니까?

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>

로그인 후 복사

렌더링:

CSS를 숨기는 방법은 무엇입니까? 표시: 없음, 불투명도: 0, 가시성: 숨김의 차이점은 무엇입니까?