표시 없음은 무엇을 의미하나요? 디스플레이 사용예 없음-CSS 튜토리얼-php.cn

표시 없음은 무엇을 의미하나요? 디스플레이 사용예 없음

不言

풀어 주다： 2018-10-23 14:58:49

원래의

65457명이 탐색했습니다.

CSS의 표시 속성은 웹 페이지 레이아웃에서 자주 사용됩니다. 특히 표시 속성 중 block, inline-block, inline 및 none의 네 가지 속성 값이 표시 속성에 대해 소개됩니다. 필요는 none 속성 값의 사용법을 참조할 수 있습니다.

ps: CSS 표시 속성 관련 지식에 대한 간략한 소개를 참고하시면 됩니다. CSS 표시 속성은 무엇을 의미하나요? CSS의 표시 속성에 대한 자세한 설명입니다.

먼저 살펴보겠습니다디스플레이 없음이 무슨 뜻인가요?

display:none은 다음을 의미합니다.

요소를 숨기고 문서에서 분리합니다. 흐름은 영역을 숨기고 실제 공간을 차지하지 않지만 배경에는 실제적입니다. 간단히 말해서 요소가 없음으로 설정되면 공간을 차지하지도 않고 표시되지도 않으며 이는 존재하지 않는 요소와 동일합니다.

디스플레이 없음의 의미를 읽은 후 디스플레이 없음의 사용법을 살펴보겠습니다.

display none 사용법:

display:none의 예를 직접 살펴보겠습니다.

<html>
<head>
<title></title>
<style type="text/css">
    div{
        background: lightblue;
        width: 200px;
        height: 200px;
    }
    span{
        background: pink;
        display: none;
    }
</style>
</head>
<body >
    <div><span>需要隐藏的区域</span></div>
</body>
</html>

로그인 후 복사

위 코드의 범위에서 display:none 속성 값을 설정하지 않은 경우 효과는 다음과 같습니다.

표시 없음은 무엇을 의미하나요? 디스플레이 사용예 없음

display is set :none 속성 값은 아래 그림과 같은 효과를 갖습니다. 숨겨야 하는 영역이 숨겨집니다.

표시 없음은 무엇을 의미하나요? 디스플레이 사용예 없음

display:none을 사용할 때 주의할 사항은 다음과 같습니다.

1 요소의 display:none 스타일이 스타일 파일이나 을 통해 설정된 경우 js를 사용하여 style.display=""는 요소를 표시하지 않으므로 대신 블록 또는 인라인 값을 사용할 수 있습니다. style="display:none"을 통해 요소에 직접 설정하면 이 문제가 발생하지 않습니다.

2. 스타일 파일이나 페이지 파일 코드에서 요소를 숨기기 위해 직접 display:none을 사용하는 경우, 페이지를 로드한 후 요소를 표시하기 위해 js를 통해 스타일을 설정하지 않으면 요소를 올바르게 얻을 수 없습니다. js 코드를 사용하면 offSetTop, offSetLeft 등과 같은 요소의 일부 속성은 0 값을 반환합니다. 이러한 값은 요소를 표시하기 위해 js에서 style.display를 설정한 후에만 올바르게 얻을 수 있습니다.

위 내용은 표시 없음은 무엇을 의미하나요? 디스플레이 사용예 없음의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!