CSS는 웹페이지를 아름답게 만들 수 있을 뿐만 아니라 많은 흥미로운 대화형 효과도 얻을 수 있습니다. 그러나 CSS에는 눈에 보이지 않지만 매우 중요한 스타일이 있습니다. 이 기사에서는 CSS와 해당 응용 프로그램의 보이지 않는 스타일을 살펴보겠습니다.
1. display:none
display:none은 CSS에서 가장 일반적인 보이지 않는 스타일 중 하나입니다. 공간을 차지하지 않고 요소가 완전히 사라질 수 있습니다. 특히, display:none을 사용하면 요소가 렌더링되지 않고 공간도 차지하지 않으므로 페이지에 요소의 흔적이 표시되지 않습니다.
이 스타일은 웹페이지의 가시성을 제어하는 데 자주 사용됩니다. 예를 들어, 웹 페이지에는 특정 조건에서 표시되어야 하는 기능이 있는데, 이 경우 요소의 표시 속성을 JS를 통해 제어하여 특정 조건이 충족되면 표시되고, 해당 조건이 충족되면 숨길 수 있습니다. 아니다.
2. visible:hidden
visibility:hidden은 display:none과 다소 비슷합니다. 둘 다 요소를 보이지 않게 만들 수 있습니다. 그러나 visible:hidden과 display:none의 차이점은 visible:hidden 요소가 보이지 않더라도 여전히 공간을 차지하기 때문에 페이지에는 보이지 않지만 기존 요소가 해당 위치를 차지하게 된다는 것입니다.
이 스타일은 때때로 CSS 애니메이션과 관련된 효과를 제어하는 데 사용됩니다. 예를 들어, 페이드 인 및 페이드 아웃 애니메이션을 구현할 때 일부 요소 로드를 지연하려면 먼저 visible:hidden을 사용하여 요소를 숨긴 다음 표시해야 할 때 가시성 속성을 visible로 변경하면 됩니다. 애니메이션 효과를 얻을 수 있습니다.
3. Opacity:0
opacity:0은 또 다른 보이지 않는 스타일입니다. 요소를 완전히 투명하게 만들고 공간을 차지하지 않지만 여전히 존재합니다. 표시:없음 및 표시 여부:숨김과 달리 이 스타일은 요소를 투명하게 만들지만 크기와 위치 정보는 그대로 유지합니다.
이 스타일은 일부 애니메이션 효과를 구현할 때 매우 일반적입니다. 예를 들어 불투명에서 투명으로 페이드 아웃 효과를 구현하려면 먼저 요소의 불투명도 속성을 1로 설정한 다음 JS를 통해 동적으로 불투명도 값을 1에서 0으로 변경하여 페이드 아웃 효과를 얻을 수 있습니다.
4. Height:0;width:0
height:0;width:0은 CSS에서 보이지 않지만 매우 유용한 스타일입니다. 요소를 보이지 않는 조용한 존재로 바꿀 수 있습니다. 위에서 소개한 스타일과 달리 이 스타일은 요소를 보이지 않게 할 뿐만 아니라 요소가 차지하는 공간을 완전히 지운다.
이 스타일은 특정 효과를 얻을 때 매우 유용합니다. 예를 들어 일부 표시기나 작은 아이콘을 구현할 때 먼저 빈
5. position:absolute;top:-9999px;left:-9999px
position:absolute;top:-9999px;left:-9999px 이것은 CSS에서 가장 신비한 보이지 않는 스타일로, 요소를 완전히 숨길 수 있습니다. 그 흔적은 HTML 소스 코드에서도 볼 수 있습니다.
이 스타일에는 다양한 사용 시나리오가 있습니다. 예를 들어 일부 웹 페이지에서 플로팅 팝업 상자를 구현할 때 이 스타일을 사용하여 먼저 팝업 상자를 숨긴 다음 사용자가 버튼을 클릭하거나 이벤트를 트리거할 때 표시할 수 있습니다.
위는 CSS에서 흔히 볼 수 있는 보이지 않는 스타일과 그 적용 사례입니다. 이러한 스타일은 눈에 보이지는 않지만 웹 개발에서 매우 중요한 역할을 하며 더 많은 디자인과 상호 작용 유연성을 제공합니다.
위 내용은 CSS가 보이지 않습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
