공간을 차지하지 않고 CSS에서 요소를 숨기는 방법-프런트엔드 Q&A-php.cn

공간을 차지하지 않고 CSS에서 요소를 숨기는 방법

青灯夜游

풀어 주다： 2022-06-01 19:34:40

원래의

5179명이 탐색했습니다.

두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.

공간을 차지하지 않고 CSS에서 요소를 숨기는 방법

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

공간을 차지하지 않고 CSS에서 요소를 숨기는 두 가지 방법

방법 1: 표시 속성 사용

그냥 display:none; 스타일을 요소에 설정하세요display:none;样式即可

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

로그인 후 복사

공간을 차지하지 않고 CSS에서 요소를 숨기는 방법

说明：

display:none可以不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样；不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。

方法2：利用position和top属性

只需给元素添加position: absolute;top: -9999px;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .position{
                position: absolute;
                top: -9999px;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="position">隐藏元素</div>
        <div>正常显示元素</div>
    </body>
</html>

로그인 후 복사

공간을 차지하지 않고 CSS에서 요소를 숨기는 방법 설명:

display:none은 공간을 차지하지 않고 요소를 숨길 수 있으므로 이 속성을 동적으로 변경하면 재배열(페이지 레이아웃 변경)이 발생하며 이는 페이지에서 요소를 삭제하는 것으로 이해될 수 있습니다. 후손에게 상속되지는 않지만, 결국 그 후손은 모두 함께 숨겨지지 않습니다.

방법 2: 위치 및 상단 속성 사용🎜🎜🎜position:absolute;top: -9999px; 스타일을 요소에 추가하기만 하면 됩니다🎜rrreee🎜🎜🎜🎜지침:🎜🎜이 종류 이 방법은 요소의 위치를 결정한 다음 요소의 상단을 화면에 표시되지 않도록 충분히 큰 음수로 설정하여 공간을 차지하지 않고 문서 흐름에서 요소를 배치하는 것입니다. 🎜

위 내용은 공간을 차지하지 않고 CSS에서 요소를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!