표시:없음과 가시성:숨김 사용의 차이점은 무엇입니까?

오늘 졸업 디자인을 할 때 작은 문제가 발생했습니다. 탭 페이지를 클릭하면 다른 탭 페이지가 숨겨집니다. 이때 첫 번째 아이디어는 디스플레이를 제어하고 숨기기를 작성한 후 디스플레이 사용에 문제가 있음을 발견했습니다. 즉, 두 번째 탭 페이지의 캐러셀 이미지는 페이지가 적응형으로 렌더링될 때 두 번째 탭 페이지의 요소 너비를 얻는 것입니다. 효과가 숨겨져 있기 때문에 너비가 0이므로 캐러셀이 발생합니다. 그림의 높이도 0입니다. 나중에 display:none을 visible:hidden으로 변경하면 정상적으로 표시되고 재생할 수 있습니다.

display:none과 visible:hidden의 차이점은 다음과 같습니다.

1.display:none은 완전히 사라지고 문서 흐름에서 자리를 차지하지 않으며 브라우저는 visible:hidden 요소를 시각적으로 구문 분석하지 않습니다. is OK 투명도가 0인 것으로 이해됩니다. 이는 문서 흐름에서 한 자리를 차지하고 브라우저는 요소를 구문 분석합니다.

2. 성능 측면에서 visible:hidden을 사용하는 것이 display:none보다 좋습니다. 가시성을 전환하면 페이지가 다시 흐름됩니다(페이지의 일부 요소가 크기, 레이아웃, 표시, 숨기기 등을 변경해야 하는 경우 페이지가 다시 작성됩니다. 이것이 리플로우입니다(모든 페이지는 리플로우를 생성해야 함). 처음 로드됨) 표시 여부가 전환되면 리플로우가 발생하지 않습니다.

그래서 나는 visible:hidden을 사용합니다. 페이지가 렌더링되면 두 번째 탭 페이지의 캐러셀 이미지가 너비를 가져와 조정할 수 있습니다.

위 내용은 표시:없음과 가시성:숨김 사용의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!