CSS로 div를 숨기는 방법-CSS 튜토리얼-php.cn

CSS로 div를 숨기는 방법

藏色散人

풀어 주다： 2023-01-05 16:11:05

원래의

10608명이 탐색했습니다.

CSS로 div를 숨기는 방법: 1. "display:none"을 사용하여 div를 숨깁니다. 2. "visibility: hide;"를 사용하여 div를 숨깁니다.

CSS로 div를 숨기는 방법

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

보통 웹사이트 레이아웃을 할 때 p를 숨기고 싶은데, CSS를 사용하여 p의 표시 및 숨기기를 제어하는 방법을 모르시는 분들이 많으시죠? CSS로 p를 숨기는 방법을 설명하겠습니다.

1 div를 숨기려면 display:none을 사용하세요.

display:none 속성을 사용하면 텍스트와 이미지를 포함한 모든 정보를 숨길 수 있습니다. 구문은 다음과 같습니다.

<div>这里你是看不到的</div>

로그인 후 복사

p에서 CSS 스타일을 사용하면 display:none 속성을 사용하여 콘텐츠를 숨길 수 있으며, 동시에 숨겨진 콘텐츠는 공간을 차지하지 않습니다. 일반적으로 우리는 js 통계를 사용합니다. 표시된 아이콘을 숨기는 코드입니다.

2. div

visibility 속성을 숨기려면 visible:hidden을 사용하여 요소가 표시되는지 여부를 지정합니다.

이 속성은 요소에 의해 생성된 요소 상자를 표시할지 여부를 지정합니다. 이는 요소가 여전히 원래 공간을 차지하지만 완전히 보이지 않을 수 있음을 의미합니다. 값 축소는 테이블 레이아웃에서 열이나 행을 제거하기 위해 테이블에서 사용됩니다.

속성 값:

표시되는 기본값. 요소가 표시됩니다.
숨겨진 요소는 보이지 않습니다.
collapse 테이블 요소에 사용되는 경우 이 값은 행이나 열을 삭제하지만 테이블 레이아웃에는 영향을 주지 않습니다. 행이나 열이 차지하는 공간을 다른 콘텐츠에 사용할 수 있습니다. 이 값이 다른 요소에 사용되면 "숨김"으로 렌더링됩니다.

3. div를 숨기려면 opacity: 0을 사용하세요.

opacity 속성은 요소의 투명도를 설정하는 것을 의미합니다. 요소의 경계 상자를 변경하도록 설계되지 않았습니다.

즉, 불투명도를 0으로 설정하면 요소가 시각적으로만 숨겨집니다. 요소 자체는 여전히 자체 위치를 차지하고 웹 페이지 레이아웃에 기여합니다. 이는 가시성: 위의 숨겨진 것과 유사합니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素隐藏--opacity: 0</title>
        <style>
            div{
                height: 20px;
            }
            .demo{
                width: 800px;
                height: 60px;
                margin: 50px auto;
                border: 1px solid red;
            }
            .hide,span{
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <div sty>元素隐藏1--opacity: 0</div>
            <div>元素隐藏2--opacity: 0</div>
            <div>元素隐藏3--opacity: 0</div>
        </div>
        <div>
        <div>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</div>

        <div>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</div>
        </div>
    </body>
</html>

로그인 후 복사

렌더링: