집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 표시:숨김과 표시:없음의 차이점은 무엇입니까?

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

王林원래의: 2020-11-19 10:48:5410438검색

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에서 표시:숨김과 표시:없음의 차이점은 무엇입니까?

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

관련 기사