CSS 표시

CSS 표시 및 가시성

표시 속성은 요소가 표시되는 방법을 설정하고 가시성 속성은 요소를 표시할지 아니면 숨길지 여부를 지정합니다.

요소 숨기기 - 표시:없음 또는 표시 여부:숨김

표시 속성을 "없음"으로 설정하거나 표시 속성을 "숨김"으로 설정하여 요소를 숨깁니다. 그러나 이 두 가지 방법은 서로 다른 결과를 낳는다는 점에 유의하세요.

visibility:hidden은 요소를 숨길 수 있지만 숨겨진 요소는 여전히 숨겨지기 전과 동일한 공간을 차지해야 합니다. 즉, 요소가 숨겨져 있어도 여전히 레이아웃에 영향을 미칩니다.

예

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        h1.hidden {visibility:hidden;}
    </style>
</head>

<body>
<h1>这是一个明显的标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意,隐藏标题仍然占用空间.</p>
</body>
</html>

프로그램을 실행하여 사용해 보세요

display:none요소를 숨길 수 있으며 숨겨진 요소는 공간을 차지하지 않습니다. 즉, 요소가 숨겨질 뿐만 아니라 해당 요소가 원래 차지했던 공간도 페이지 레이아웃에서 사라집니다.

Example

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        h1.hidden {display:none;}
    </style>
</head>

<body>
<h1>这是一个明显的标题</h1>
<h1 class="hidden">这是一个隐藏的标题</h1>
<p>注意,display:none 隐藏不占用空间.</p>
</body>

</html>

프로그램을 실행하고 사용해 보세요

CSS 표시 - 블록 및 인라인 요소

블록 요소는 전체 너비를 차지하는 요소이며 앞에 줄 바꿈이 있습니다. 그리고 그 이후.

블록 요소의 예:

<h1>
<p>
<div>

인라인 요소는 필요한 너비만 필요하며 강제로 래핑하지 않습니다.

인라인 요소의 예:

<span>
<a>

요소 표시를 변경하는 방법

인라인 요소와 블록 요소를 변경하거나 그 반대로 변경하여 페이지가 특정 방식으로 결합된 것처럼 보이면서도 여전히 웹 표준을 준수할 수 있습니다.

다음 예는 목록 항목을 인라인 요소로 표시합니다.

      <!DOCTYPE html>
<html>
<head>
    <style>
        li{display:inline;}
    </style>
</head>
<body>
<p>这个链接列表显示为一个水平菜单:</p>
<ul>
    <li><a href="" target="_blank">HTML</a></li>
    <li><a href="" target="_blank">CSS</a></li>
    <li><a href="" target="_blank">JavaScript</a></li>
    <li><a href="" target="_blank">XML</a></li>
</ul>
</body>
</html>

프로그램을 실행하여 사용해 보세요

예

다음 예는 범위 요소를 블록 요소로 표시합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
</body>
</html>

프로그램을 실행하여 시도해 보세요

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <style> li{display:inline;} </style> </head> <body> <p>这个链接列表显示为一个水平菜单:</p> <ul> <li><a href="" target="_blank">HTML</a></li> <li><a href="" target="_blank">CSS</a></li> <li><a href="" target="_blank">JavaScript</a></li> <li><a href="" target="_blank">XML</a></li> </ul> </body> </html>

제출하다 코드 재설정

자동운전