CSS에 숨겨진 요소를 배치하는 방법-CSS 튜토리얼-php.cn

CSS에 숨겨진 요소를 배치하는 방법

青灯夜游

풀어 주다： 2023-01-05 16:12:29

원래의

7171명이 탐색했습니다.

CSS 자리표시자를 사용하여 요소를 숨기는 방법: 1. 가시성 속성을 사용하고 요소에 "가시성: 숨김;" 스타일을 설정합니다. 요소가 숨겨지더라도 여전히 원래 공간을 차지합니다. 2. 불투명도 속성을 사용하여 다음을 수행합니다. "opacity:0;" 요소를 설정하면 충분합니다.

CSS에 숨겨진 요소를 배치하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

방법 1: visibility:hidden;을 사용하여 자리 표시자 visibility: hidden;隐藏占位

visibility 属性规定元素是否可见。

这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素隐藏--visibility: hidden</title>
        <style>
            .visibility{
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="visibility">隐藏元素</div>
        <div>正常显示元素</div>

    </body>
</html>

로그인 후 복사

CSS에 숨겨진 요소를 배치하는 방법

方法2：使用opacity: 0

visibility 속성을 숨겨 요소 표시 여부를 지정합니다.

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

예:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素隐藏--opacity: 0</title>
        <style>
            .opacity{
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="opacity">隐藏元素</div>
        <div>正常显示元素</div>

    </body>
</html>

로그인 후 복사

CSS에 숨겨진 요소를 배치하는 방법