CSS에서 display:none과 visible:hidden의 차이점 분석

이 글은 CSS에서 display:none과 visible:hidden의 차이점에 대한 분석을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

인터뷰에서 "display:none과 visible:hidden의 차이점을 알려주세요"라는 질문을 아직도 기억하시나요? 해당 디스플레이에 응답한 후 면접관이 웃을까요? 없음은 원래 위치를 차지하지 않으며 가시성은 숨김이 원래 위치를 유지합니까? 실제로는 그 이상입니다! 이번 글에서는 그들의 고충과 억울함을 함께 파헤쳐 다음 인터뷰에서 더 좋은 답변을 드릴 수 있도록 하겠습니다!

자세한 표시:없음

요소가 표시:없음으로 설정되면 요소가 인터페이스에 표시되지 않고 요소가 레이아웃 공간을 차지하지 않는다는 사실을 모두 알고 있습니다. JavaScript를 통해 요소를 작동합니다. 그런데 왜 그럴까요?
여기에는 브라우저의 렌더링 원리가 포함됩니다. 브라우저는 HTML 태그를 구문 분석하여 DOM을 생성합니다. 트리, CSS를 구문 분석하여 CSSOM을 생성한 다음 DOM 트리와 CSSOM을 합성하여 렌더 트리, 렌더의 요소를 생성합니다. 트리는 0개 이상의 상자에 해당하며, 상자 모델의 정보를 기반으로 브라우저 레이아웃과 인터페이스를 렌더링합니다. display:none으로 설정된 요소는 렌더 트리에서 해당 상자 모델을 생성하지 않으므로 후속 레이아웃 및 렌더링 작업은 자연스럽게 DOM 작업과 관련이 없습니다.
그러나 위의 지식 외에도 주의해야 할 다음 8가지 사항이 있습니다.
1. 기본 기본 표시가 있는 요소: 없음
실제로 기본 브라우저에는 표시가 있는 요소가 많이 있습니다. 링크, 스크립트, 스타일, 대화 상자, 입력 [유형=숨김] 등과 같은 요소.

2. 숨겨진 부울 속성이 HTML5에 추가되어 개발자가 요소 숨기기를 사용자 정의할 수 있습니다.

/* 兼容原生不支持hidden属性的浏览器  */
[hidden]{
  display: none;
}
<span>Hide and Seek: You can't see me!</span>

3. 표시:없음이고 하위 요소도 탈출하기 어렵습니다

.hidden{
  display: none;
}
.visible{
  display: block;
}

*** START ***
<div>
  I'm parent!
  <div> I'm son! </div>
</div>
*** END ***

브라우저에서 직접

*** START ***
*** END ***

4로 표시합니다. 포커스를 얻을 수 없습니다
상자가 없는데 어떻게 포커스를 얻을 수 있습니까?^_^ 탭키는 안돼요

<!-- 真心不会获得焦点 -->
<input>
<div>hidden</div>

5. 어떤 반응도 할 수 없습니다. 캡처, 대상 타격, 버블링 스테이지 등의 이벤트는 허용되지 않습니다.
display:none 요소가 인터페이스에 전혀 렌더링되지 않기 때문입니다. , 1픽셀도 차지하지 않으므로 당연히 마우스 클릭으로 타격을 받을 수 없으며, 요소는 포커스를 얻을 수 없으므로 키보드 이벤트의 대상이 될 수 없으며 상위 요소의 표시가 없음인 경우에는 표시됩니다. 하위 요소의 요소는 없음이어야 합니다. 따라서 요소는 이벤트 캡처 또는 버블링 단계의 경로에 있을 수 없습니다. 따라서 display:none이 있는 요소는 이벤트에 응답할 수 없습니다.

6. 양식 제출 데이터를 지연하지 마세요
display:none 요소를 볼 수 없더라도 양식이 제출되면 숨겨진 입력 요소의 값이 계속 제출됩니다.

     

7. CSS의 카운터는 display:none

.start{
  counter-reset: son 0;
}
.son{
  counter-increment: son 1;
}
.son::before{
  content: counter(son) ". ";
}

<div>
  <div>son1</div>
  <div>son2</div>
  <div>son3</div>
</div>

의 요소를 무시합니다. 결과는 다음과 같습니다.

1. son1
2. son3

8.전환은 디스플레이 변경에 관심이 없습니다

9. 디스플레이가 변경되면 리플로우가 시작됩니다.

디스플레이 종료: 그 외에는 요소가 BFC에 있음을 의미하는 display:block과 요소가 IFC에 있음을 의미하는 display:inline을 살펴봅니다. 즉, 요소가 있는 레이아웃 컨텍스트를 설정하는 데 사용됩니다. 표시값이 수정되었다면 해당 요소에 적용된 레이아웃 방식이 변경되었다는 의미이므로 리플로우가 실행되지 않으면 이상할 것입니다.

깊은 가시성

visibility에는 두 가지 기능이 있습니다.

테이블 행과 열을 숨기는 데 사용됩니다.

레이아웃을 트리거하지 않고 요소를 숨기는 데 사용됩니다.

4개의 유효한 값

1.visible

말할 것도 없습니다. 예, 표시됩니다. 인터페이스.
2.hidden
요소를 화면에 보이지 않게 하지만 요소의 원래 위치는 유지합니다.
3.collapse
테이블 하위 요소(예: tr, tbody, col, colgroup)에 사용하면 display:none과 효과가 동일합니다. 다른 요소에 사용하면 visible:hidden과 효과가 동일합니다. 그러나 각 브라우저마다 구현 효과가 다르기 때문에 일반적으로 이 값은 사용되지 않습니다.
4.inherit
상위 요소의 가시성 값을 상속합니다.

display:none과 visible:hidden을 명확하게 비교하세요

위에서는 display:none에 대해 주의할 점 8가지를 나열했으므로 하나씩 비교하고 가시성을 나열하면 됩니다.

1. 상위 요소는 가시성:숨겨져 있고 하위 요소는 가시성:visible로 설정될 수 있으며 적용됩니다

div{
  border: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
<div>
  I'm Parent.
  <div>
    I'm Son.
  </div>
</div>

결과:

2. 3. 위험에 노출될 수 있습니다. 버블 단계에서 이벤트에 응답합니다.

visible:hidden으로 설정된 요소의 하위 요소는 visible:visible이 될 수 있으므로 숨겨진 요소는 이벤트 버블링 경로에 위치할 수 있습니다. 다음 코드에서는 마우스를 .visible로 이동하면 hover 이벤트에 대한 응답으로 .hidden이 표시됩니다.

div{
  border: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
.hidden:hover{
  visibility: visible;
}
<div class="hidden">
  I&#39;m Parent.
  <div class="visible">
    I&#39;m Son.
  </div>
</div>

4. 양식 제출을 방해하지 않습니다.

5. CSS의 카운터는 무시되지 않습니다.

6. 가시성 변경에는 전환이 적용되지 않습니다. 리플로우 트리거

visible이 숨겨짐으로 설정되면 요소의 레이아웃 관련 속성이 변경되지 않으므로 리플로우가 트리거되지 않습니다. 브라우저가 다른 렌더링 변경 사항과 함께 정기적으로 인터페이스를 다시 그릴 때까지 조용히 기다립니다. .

위 내용은 CSS에서 display:none과 visible:hidden의 차이점 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!