CSS에서 div를 숨기는 방법

CSS에서 div를 숨기는 방법: 1. "display:none"을 통해 div를 숨깁니다. 2. "visibility:hidden"을 통해 div를 숨깁니다. 3. "opacity:0"을 통해 div를 숨깁니다.

이 기사의 운영 환경: windows7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

CSS로 div를 숨기는 방법은 무엇입니까?

CSS에서 Div를 숨기는 세 가지 방법

CSS의 표시 및 가시성 속성은 div 레이어를 포함한 html 요소를 숨기고 표시할 수 있습니다.

One:

display:none|block
display:none

브라우저에서 정확하게 html 파일 숨기기 요소 명확하고 화면 공간을 차지하지 않으면 아래에 다른 요소가 있으면 공간 영역으로 이동됩니다.

display:block

숨겨진 html 요소 표시

다른 요소가 공간을 차지하면 아래로 이동합니다.

공간

두 번째:

visibility:hidden|visible
visibility:hidden

요소를 숨기세요. 실제로는 숨겨져 있지만 여전히 공간을 차지하고 있습니다

visibility:visible

요소를 표시하도록 하세요

요소의 가시성 속성이 축소 값, 일반 요소의 경우 해당 동작은 숨김과 동일합니다.

1. 크롬에서는 축소 값을 사용하는 것과 숨겨진 값을 사용하는 것에는 차이가 없습니다.

2. Firefox, Opera 및 IE에서는 축소 값을 사용하는 것과 표시하는 것 사이에 차이가 없습니다. 없음.

세 번째:

opacity:0

opacity 속성 요소의 투명도를 0으로 설정하면 해당 요소도 사용자의 눈에 숨겨지는 방식입니다. 강요. 이 메소드와 visible:hidden의 공통점 중 하나는 요소가 숨겨진 후에도 여전히 공간을 차지한다는 것입니다. 그러나 투명도를 0으로 설정한 후에도 요소는 보이지 않고 페이지에 여전히 존재한다는 것을 우리 모두 알고 있습니다.

그래서 표시 및 가시성은 html 요소의 존재 여부와 표시 여부를 각각 제어합니다.

display 속성은 요소의 존재 여부를 정의합니다.

그리고 가시성 속성은 요소가 표시되고 실제로 존재하는지 여부만 제어합니다.

불투명도 요소가 숨겨져 있지만 페이지에는 여전히 존재합니다

[추천 학습: css 비디오 튜토리얼]

위 내용은 CSS에서 div를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!