CSS에서 display:none과 visible:hidden의 구체적인 차이점에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 display:none과 visible:hidden의 구체적인 차이점에 대한 자세한 설명

黄舟

Jul 24, 2017 am 10:36 AM

displayvisible

디스플레이:없음은 존재하지 않고 로드되지 않은 것으로 처리됩니다. 즉, 숨겨진 개체를 위해 물리적 공간이 예약되지 않습니다. 즉, 개체가 페이지에서 완전히 사라집니다.

visibility:hidden은 숨기지만 탐색할 때 위치를 유지합니다. 즉, 웹 페이지에서 개체를 보이지 않게 하지만 웹 페이지에서 개체가 차지하는 공간은 변경되지 않습니다.

display:none 속성을 사용한 후 HTML 요소(객체)의 너비, 높이 및 기타 속성 값이 "손실"됩니다.

visible:hidden 속성을 사용한 후 HTML 요소는 (객체)는 시각적으로만 볼 수 있습니다. 보이지 않는(완전히 투명함), 그것이 차지하는 공간적 위치는 여전히 존재합니다. 즉, 높이, 너비 등의 속성 값은 그대로 유지됩니다.

코드 데모:

테이블의 초기 상태:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title></title></head><body>
    <table id="table1" style="border: 2px dashed red;background-color: #e2e2e2;padding: 5px">
        <tr>
            <td>A1            </td>
            <td>A2            </td>
        </tr>
        <tr>
            <td>B1            </td>
            <td>B2            </td>
        </tr>
    </table></body></html>

효과는 다음과 같습니다.

테이블의 두 번째 행에 있는 tr에 style="display:none"을 추가한 후:

테이블에서 두 번째 줄의 tr에 style="visibility:hidden"을 추가한 후:

display:none 및 visible:hidden은 둘 다 웹 페이지에서 요소를 숨길 수 있지만 둘 사이에는 차이점이 있습니다.

display :none ---숨겨진 개체를 위한 물리적 공간을 예약하지 마세요. 즉, 일반인의 관점에서 개체는 페이지에서 완전히 사라지며 보거나 만질 수 없습니다.

visible:hidden--- 웹 페이지에서 개체가 보이지 않게 하지만 웹 페이지에서 개체가 차지하는 공간은 변경되지 않습니다. 일반인의 용어로는 보이지 않지만 만질 수 있다는 의미입니다.

예:

<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body >
<span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br />
<span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>
</body>
</html>

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

'CSS4'업데이트Apr 11, 2025 pm 12:05 PM

내가 CSS4¹에 처음으로 차지했기 때문에, 그것에 대해 많은 논의가있었습니다. 나는 여기 다른 사람들로부터 내가 가장 좋아하는 생각을 마무리하려고 할 것입니다. 거기 있습니다

세 가지 유형의 코드Apr 11, 2025 pm 12:02 PM

새 프로젝트를 시작할 때마다 원하는 경우 세 가지 유형 또는 카테고리로보고있는 코드를 구성합니다. 그리고 나는 이러한 유형을 적용 할 수 있다고 생각합니다

HTTPS는 쉽습니다!Apr 11, 2025 am 11:51 AM

나는 HTTPS의 복잡성을 공개적으로 비난하는 것에 대해 유죄를 선고했다. 과거에는 타사 공급 업체로부터 SSL 인증서를 구매했으며 문제가있었습니다.

HTML 데이터 속성 안내서Apr 11, 2025 am 11:50 AM

HTML, CSS 및 JavaScript의 데이터 속성에 대해 알고 싶었던 모든 것.

자바 스크립트의 불변성 이해Apr 11, 2025 am 11:47 AM

이전에 JavaScript에서 불변성으로 작업하지 않은 경우 변수를 새로운 값 또는 재 할당과 혼동하기가 쉽습니다.

시맨틱하고 액세스 가능한 상태를 유지하면서 요즘 사용자 정의 확인란, 라디오 버튼 및 토글 스위치를 만들 수 있습니다. 우리는조차 필요하지 않습니다

각주 문자Apr 11, 2025 am 11:34 AM

각주에 적합한 특수 슈퍼 세트 번호 문자가 있습니다. 여기에 다음과 같습니다.

HTML, CSS 및 JavaScript로 애니메이션 카운트 다운 타이머를 만드는 방법Apr 11, 2025 am 11:29 AM

프로젝트에 카운트 다운 타이머가 필요한 적이 있습니까? 그런 것은 플러그인에 도달하는 것이 당연하지만 실제로는 훨씬 더 많습니다.

See all articles

핫 AI 도구

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.