CSS 규칙 visibility:hidden과 display:none둘 다 요소가 표시되지 않습니다. 이 동의어입니까?
답변
display:none이는 해당 태그가 페이지에 전혀 표시되지 않음을 의미합니다 (DOM을 통해 태그와 상호 작용할 수는 있음). 다른 태그 사이에 할당 된 공간이 없습니다.
visibility:hiddendisplay:none는 태그 와 달리 태그가 보이지 않지만 페이지에 공간이 할당되어 있음을 의미합니다. 태그는 렌더링되며 페이지에는 표시되지 않습니다.
예를 들면 다음과 같습니다.
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test다음 [style-tag-value]과 같은 display:none결과로 교체 :
test | | test다음 [style-tag-value]과 같은 visibility:hidden결과로 교체 :
test | | test답변
그것들은 동의어가 아닙니다.
display:none 페이지의 일반적인 흐름에서 요소를 제거하여 다른 요소를 채울 수 있습니다.
visibility:hidden 여전히 공간을 차지하도록 페이지의 정상적인 흐름에 요소를 둡니다.
유원지에서 자전거를 타기 위해 줄을 섰고 라인의 누군가가 너무 거칠어 보안이 라인에서 그들을 뽑아 낸다고 상상해보십시오. 그런 다음 줄에있는 모든 사람이 한 칸 앞으로 이동하여 현재 비어있는 슬롯을 채 웁니다. 이것은 같습니다 display:none.
이것을 비슷한 상황과 대조해보십시오. 그러나 여러분 앞에있는 누군가는 보이지 않는 망토를 착용합니다. 선을 보는 동안 빈 공간이있는 것처럼 보이지만 누군가가 여전히 빈 공간을 채울 수는 없습니다. 이것은 같습니다 visibility:hidden.
답변
추가하지 않아도되지만 추가 할 가치가있는 것은 객체를 완전히 투명하게 만드는 세 번째 옵션이 있다는 것입니다. 치다:
1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.결과를 보려면 위의 “코드 스 니펫 실행”버튼을 클릭하십시오.
1과 2의 차이는 이미 지적되었습니다 (즉, 2는 여전히 공간을 차지합니다). 그러나 2와 3 사이에는 차이가 있습니다. 3의 경우 링크를 가리키면 마우스가 여전히 손으로 전환되며 사용자는 여전히 링크를 클릭 할 수 있으며 Javascript 이벤트는 여전히 링크에서 실행됩니다. 이것은 일반적으로 당신이 원하는 행동이 아닙니다 (그러나 때로는 그럴까요?).
또 다른 차이점은 텍스트를 선택한 다음 일반 텍스트로 복사 / 붙여 넣기를하면 다음과 같은 결과가 나타납니다.
1st link.
2nd link.
3rd unseen link.
3의 경우 텍스트가 복사됩니다. 이 기능은 일부 워터 마킹 유형에 유용하거나 부주의하게 사용자가 콘텐츠를 복사 / 붙여 넣은 경우 표시되는 저작권 표시를 숨기고 싶습니까?
답변
display:none 레이아웃 흐름에서 요소를 제거합니다.
visibility:hidden 그것을 숨기고 공간을 떠납니다.
답변
자식 노드와 관련하여 큰 차이가 있습니다. 예 : 부모 div와 중첩 된 자식 div가있는 경우 따라서 다음과 같이 작성하면
<div id="parent" style="display:none;">
<div id="child" style="display:block;"></div>
</div>
이 경우 div가 표시되지 않습니다. 그러나 다음과 같이 쓰면 :
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>
그러면 하위 div가 표시되고 상위 div는 표시되지 않습니다.
답변
그것들은 동의어가 아닙니다- display: none페이지의 흐름에서 요소를 제거하고 나머지 페이지는 마치 존재하지 않는 것처럼 흐릅니다.
visibility: hidden 페이지 플로우가 아닌보기에서 요소를 숨기고 페이지에 공간을 남겨 둡니다.
답변
display: none 페이지에서 요소를 완전히 제거하고 요소가없는 것처럼 페이지가 작성됩니다.
Visibility: hidden 더 이상 볼 수 없어도 문서 흐름에 공간이 남습니다.
이것은 당신이하는 일에 따라 큰 차이를 만들거나하지 않을 수 있습니다.
