CSS Display(표시)

디스플레이 속성은 요소가 생성하는 상자의 유형을 지정합니다. 일반적으로 사용되는 디스플레이 값은 block, none, inline 이这三个 값입니다.

CSS 디스플레이 속성

CSS 규범은 모든 요소의 기본 디스플레이 값을 정의합니다. 예를 들어, <div> 요소는 블록으로 표시되고, <span> 요소는 내장된 표시로 표시됩니다.

기본 디스플레이 값 변경

요소를 덮는 기본 디스플레이 값은 디스플레이 속성의 중요한 의미 중 하나입니다. 예를 들어, 인라인 단계 요소를 블록 단계 요소로 변경하거나 블록 단계 요소를 인라인 단계 요소로 변경합니다.

이 부분은 가장 일반적인 CSS 표시 값에 대해 설명합니다.

블록 표시

display 속성의 블록 값은 요소가 다음과 같은 행동을 강제합니다:블록요소, 예를 들어<div>또는<p>요소. 다음 예제의 스타일 룰은<span>및 <a>요소가 블록 요소로 표시됩니다:

span {
　　　　display: block;
}
a {
　　　　display: block;
}

내장 표시

display 속성의 내장 값은 요소가 다음과 같은 행동을 합니다:내장-레벨요소와 같습니다. 예를 들어<span>또는<a>요소. 다음 예제의 스타일 룰은<p>및 <li>요소가 내장 단계 요소로 표시됩니다:

p {
　　　　display: inline;
}
ul li {
　　　　display: inline;
}

내장 블록 표시-block)

display 속성의 inline-block 값은 요소가 방형 상자를 생성하도록 하며, 이 상자는 주위의 내용과 함께 흐르게 됩니다. 즉, 인접한 내용과 같은 행에 있습니다. 다음 스타일 룰은<div>및 <span>요소가 내장 블록으로 표시됩니다:

div {
　　　　display: inline-block;
}
span {
　　　　display: inline-block;
}

불표시(none)

display 속성 값이 none일 때, 요소가 어떤 상자도 생성하지 않으며 페이지에서 표시되지 않습니다. 자식 요소도 어떤 상자도 생성하지 않으며, 그들의 표시 속성이 비로도 그렇습니다. 표시되는 문서는 그 요소가 문서 트리에 존재하지 않는 것처럼 보입니다.

h1　{
　　　　display: none;
}
p {
　　　　display: none;
}