CSS 표시 및 가시성

CSS 표시 및 표시 여부

숨겨진 요소 - 표시:없음 또는 표시 여부:숨김 <…

블록 수준 요소의 특징은 div, p, h1과 같은 일반 너비와 강제 줄 바꿈입니다

인라인 요소는 너비가 필요하고 범위와 같은 줄 바꿈을 강요하지 않습니다.

는 범위{display:block;} 또는 li{display:inline;}<🎜과 같은 두 요소의 표시 모드를 상호 변경할 수 있습니다. >

visible 속성 값은 hide, visible 또는collapse일 수 있으며,collapse 속성은 테이블의 레이아웃에 영향을 주지 않고 테이블의 행이나 열을 숨기는 데 사용할 수 있습니다. 숨겨진 요소의 위치를 동일한 값으로 바꿉니다. 공백

CSS 표시 - 블록 및 인라인

요소는 전체 너비를 차지하고 앞뒤에 요소가 있습니다. 줄 바꿈. 블록 요소의 예:

<h1>

<p>

<div>

인라인 요소만 필요한 너비가 필요하며 줄 바꿈이 강제로 적용되지 않습니다.

인라인 요소의 예:

<span>

<a>

요소 표시를 변경하는 방법

예 인라인 및 블록 요소를 변경하거나 그 반대로 변경하면 페이지가 특정 방식으로 구성되어 웹 표준을 준수하는 것처럼 보일 수 있습니다.

다음 예에서는 범위 요소를 블록 요소로 사용합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>标题</h2>
<span>这是一段内容</span>
<span>这也是一段内容</span>
<h2>标题</h2>
<span>内容</span>
<span>也是内容</span>
</body>
</html>

참고: 요소의 표시 유형을 변경하여 요소가 표시되는 방식과 요소의 종류를 확인하세요. 예를 들어, display:block으로 설정된 인라인 요소는 그 안에 중첩된 블록 요소를 가질 수 없습니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> span { display:block; } </style> </head> <body> <h2>标题</h2> <span>这是一段内容</span> <span>这也是一段内容</span> <h2>标题</h2> <span>内容</span> <span>也是内容</span> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear