CSS에서 표시:숨김과 표시:없음의 차이점은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 표시:숨김과 표시:없음의 차이점은 무엇입니까?

王林

Nov 19, 2020 am 10:48 AM

css

CSS에서 display:hidden과 display:none의 차이점은 다음과 같습니다. 1. [display:none]은 존재하지 않고 로드되지 않으며 숨겨진 개체를 위한 물리적 공간을 예약하지 않음을 의미합니다. 2. [display: Hidden]은 숨겨져 있지만 탐색하는 동안 위치가 유지되고 개체가 웹 페이지에 표시되지 않음을 의미합니다. 차이점 분석:

CSS에서 표시:숨김과 표시:없음의 차이점은 무엇입니까? .

visibility:hidden숨기지만 탐색할 때 위치를 유지합니다. 개체가 웹 페이지에 표시되지 않더라도 웹 페이지에서 개체가 차지하는 공간은 변경되지 않습니다. (학습 동영상 공유:

css 동영상 튜토리얼

)display:none视为不存在且不加载，即不为被隐藏的对象保留其物理空间，该对象在页面上彻底消失。

visibility:hidden

display:none 속성을 사용한 후에는 HTML 요소(객체)의 너비, 높이 및 기타 속성 값이 "손실"됩니다. visible:hidden 속성을 사용하면 HTML 요소(객체)는 시각적으로만 보이지 않고(완전히 투명함), 차지하는 공간 위치는 여전히 존재합니다. 즉, 높이, 너비 등의 속성 값은 그대로 유지됩니다.

예:

<!DOCTYPE html>
<html>
<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" 추가:

CSS에서 표시:숨김과 표시:없음의 차이점은 무엇입니까?

두 번째 행의 tr에 style=" 추가 테이블 가시성:숨김":

CSS에서 표시:숨김과 표시:없음의 차이점은 무엇입니까?

관련 기사

애니메이션 파비콘 제작Apr 18, 2025 am 10:35 AM

탭을 전환 할 때 눈이 가장 먼저 찾는 것입니다.

Netlify-Hosted 사이트와 함께 도메인 사용Apr 18, 2025 am 10:34 AM

NetLify에는 사용자 정의 도메인에 대한 자체 문서가 있으므로이 물건에 대한 말의 입술 기술 문서를 찾고 있다면

의사 코드Apr 18, 2025 am 10:33 AM

Yonatan Doron은 얼마 전 "코드의 예술 - 더 많은 의사 코드를 작성 해야하는 이유"라는 매체에 게시물을 썼습니다. 의사 코드의 팬으로서 그 제목을 좋아하십시오

Marie Kondo 조직 치료에 대해 grunt 작업을 제공하자Apr 18, 2025 am 10:31 AM

우리는 웹 팩과 NPM 스크립트 시대에 살고 있습니다. 좋든 나쁘 든 그들은 롤업, JSPM 및 Gulp의 비트와 함께 번들링 및 작업 실행의 리드를 차지했습니다. 하지만

큰 분열에서 분기Apr 18, 2025 am 10:27 AM

나는 프론트 엔드 개발자라는 용어를 좋아합니다. 우려 사항이있는 경우 작업의 본질을 캡슐화합니다.

웹 사이트를 시작하는 초보자의 여정Apr 18, 2025 am 10:20 AM

2018 년 9 월, 나는 웹 개발을 배우는 데 몇 달 밖에 걸리지 않았습니다. 많은 새로운 개발자들의 경우에 나는 확실히 큰 일이었습니다.

모든 새로운 ES2019 팁과 요령Apr 18, 2025 am 10:19 AM

ECMAScript 표준은 ES2019의 새로운 기능을 추가하여 다시 업데이트되었습니다. 이제 Node, Chrome, Firefox 및 Safari에서 공식적으로 제공됩니다

코일로 사이트 수익 창출 (및 지지자를위한 광고 제거)Apr 18, 2025 am 10:13 AM

나는 과거에 "소액 결제 팁"을 기반으로 소수의 웹 사이트를 시도했습니다. 그들은왔다 갔다. 괜찮습니다. 출판사 관점에서, 그것은

See all articles

핫 AI 도구

뜨거운 도구

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