CSS 속성 : 표시 vs. 가시성

디스플레이와 가시성 속성의 차이점은 무엇입니까?

visibility속성은 요소를 표시할지 여부를 브라우저에 지시합니다. 표시 ( visible-볼 수 있음) 또는 hidden표시되지 않음 ( -볼 수 없음)입니다.

display재산권 브라우저에 지시 하는 방법을 그리는 전혀 경우, 요소를 보여 - 그것은가 표시되어야하는지 여부 inline소자 또는 (즉 그것이 텍스트와 다른 인라인 요소 흐른다) block- 레벨 요소 (즉, 그 높이 및 폭 특성을 갖는다 당신은)는 등을 뜰입니다 설정할 수 있습니다, 또는은 inline-block(는 블록 상자와 같은 역할을하지만, 인라인 대신에 놓여) 및 몇몇 다른 사람 (즉 list-item, table, table-row, table-cell, flex, 등).

당신은에 요소를 설정하면 display: block있지만 또한 설정 visibility: hidden당신은 단지 그것을 볼 수 없습니다 제외하고, 블록 요소로 여전히 그것을 취급 브라우저를. 보이지 않는 상자 위에 빨간색 상자를 쌓는 것과 비슷합니다. 빨간색 상자는 실제로 보이지 않는 실제 상자 위에있을 때 공중에 떠있는 것처럼 보입니다.

즉, display그렇지 않은 none요소가 표시 여부에 관계없이 페이지의 요소 흐름에 여전히 영향을 미칩니다. 요소를 둘러싼 상자 display: none는 해당 요소가 존재하지 않는 것처럼 작동합니다 (DOM에 남아 있음).

가시성 : 숨김;

• 요소가 그려지지 않고 클릭 / 터치 이벤트를받지 못하지만 차지하는 공간은 여전히 ​​사용 중입니다.
• 레이아웃 목적으로 아직 거기에 있기 때문에 보이지 않게 측정 할 수 있습니다.
• 콘텐츠 변경은 여전히 ​​페이지 리플 로우 / 레이아웃에 시간이 걸립니다.
• 가시성이 상속되므로 가시성을 부여하여 하위 하위 항목을 표시 할 수 있습니다.

디스플레이 : 없음;

• 요소가 흐름 / 레이아웃에 참여하지 않도록합니다.
• iframe에서 이런 일이 발생하지 않도록 방지 할 수 있지만 (사용 된 브라우저에 따라) Flash 동영상 및 iframe을 종료 할 수 있습니다 (다시 표시되면 다시 시작 / 다시로드 됨).
• 요소는 공간을 차지하지 않습니다. 레이아웃 목적으로 존재하지 않는 것 같습니다.
• 일부 브라우저 / 장치 (iPad와 같은)는 해당 요소에서 사용하는 메모리를 직접 회수하여 애니메이션 중에 없음과 다른 값 사이를 전환하면 작은 힉업이 발생합니다.

추가 참고 사항 :

• 숨겨진 콘텐츠의 이미지 : 모든 인기있는 브라우저에서 이미지는 가시성이있는 요소 내에 있더라도 여전히로드됩니다. 숨김; 또는 표시 : 없음;
• 숨겨진 콘텐츠의 글꼴 : 웹킷 브라우저 (Chrome / Safari)는 가시성 또는 표시를 포함하여 숨겨진 요소에서만 사용되는 사용자 정의 글꼴로드를 지연시킬 수 있습니다. 이로 인해 사용자 지정 글꼴이로드 될 때까지 여전히 대체 글꼴을 사용중인 요소를 측정 할 수 있습니다.

display : none은 html의 흐름에서 요소를 제거하는 반면 visibility : hidden은 제거하지 않습니다.

디스플레이 : 없음; DOM 요소의 시각적 스타일 / 물리적 공간을 DOM에서 제거하는 반면, visible : hidden; 요소를 제거하지 않고 단순히 숨 깁니다. 따라서 DOM에서 300px의 수직 공간을 차지하는 div는 visible : hidden으로 설정 될 때 여전히 300px의 수직 너비를 차지합니다. 그러나 display : none으로 설정되면; 그것은 시각적 스타일이고 그것이 차지하는 공간은 숨겨지고 그 공간은 더 나은 단어의 부족으로 "해방"된다.

[편집]-내가 위의 글을 썼던 것은 얼마 전이고, 내가 충분히 지식이 없거나 나쁜 하루를 보냈는지 모르겠지만 현실은 요소가 DOM 계층에서 절대 제거되지 않는다는 것입니다. 모든 블록 레벨 디스플레이 '스타일'은 display : none을 사용할 때 완전히 '숨겨져있는'반면, visible : hidden; 요소 자체는 숨겨져 있지만 여전히 DOM에서 시각적 공간을 차지합니다. 이게 문제가 해결되기를 바랍니다.