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>프로그램을 실행하여 시도해 보세요
