일반적으로 사용되는 CSS 표시 속성 값과 해당 적용 시나리오

CSS 표시 속성의 공통 값과 해당 적용 시나리오를 익히려면 특정 코드 예제가 필요합니다.

CSS(Cascading Style Sheets)는 HTML 문서의 스타일을 설명하는 데 사용되는 마크업 언어입니다. 표시 속성은 매우 중요한 속성입니다. 표시 속성은 요소의 표시 동작을 정의하고 페이지의 요소 레이아웃, 상자 모델 유형 등을 결정하는 데 사용할 수 있습니다.

CSS에서 표시 속성에는 여러 공통 값이 있으며 각 값은 다양한 요소 표시 동작 및 애플리케이션 시나리오에 해당합니다.

1. display:none

display:none은 요소를 숨기는 데 사용되며 해당 요소는 더 이상 페이지 레이아웃 공간을 차지하지 않습니다. 요소가 display:none으로 설정되면 페이지에 전혀 표시되지 않습니다.

다음은 요소를 숨기기 위해 display:none을 사용하는 샘플 코드입니다.

<div style="display:none;">
  这是一个被隐藏的元素
</div>

2. display:block

display:block은 디스플레이 속성의 기본값입니다. 요소의 표시 속성이 블록으로 설정되면 해당 요소는 블록 수준 요소로 렌더링되며, 자체 줄을 차지하고 기본 너비는 상위 요소 너비의 100%입니다.

다음은 요소를 레이아웃하기 위해 display:block을 사용하는 샘플 코드입니다.

<div style="display:block; width:200px; height:200px; background-color:red;">
  这是一个块级元素
</div>

3. display:inline

display:inline은 요소를 인라인 요소로 렌더링하여 다른 인라인 요소와 함께 표시될 수 있도록 하는 데 사용됩니다. , 너비와 높이는 내용에 의해서만 결정될 수 있습니다.

다음은 요소를 레이아웃하기 위해 display:inline을 사용하는 샘플 코드입니다.

<span style="display:inline; background-color:green;">
  这是一个行内元素
</span>

4. display:inline-block

display:inline-block은 요소를 표시할 수 있는 인라인 블록 수준 요소로 렌더링할 수 있습니다. 다른 인라인 요소와 함께 너비, 높이, 여백 등과 같은 속성을 설정할 수 있습니다.

다음은 display:inline-block 레이아웃 요소를 사용하는 샘플 코드입니다.

<div style="display:inline-block; width:100px; height:100px; background-color:blue;"></div>
<div style="display:inline-block; width:100px; height:100px; background-color:yellow;"></div>

5. display:flex

display:flex는 유연한 상자 모델을 만드는 데 사용되며 다양한 설정을 통해 하위 요소의 레이아웃을 제어할 수 있습니다. 속성 레이아웃, 정렬 등

다음은 display:flex 레이아웃을 사용한 샘플 코드입니다.

<div style="display:flex; justify-content:center; align-items:center; height:200px; background-color:purple;">
  <div style="width:100px; height:100px; background-color:pink;"></div>
</div>

위는 CSS 디스플레이 속성의 몇 가지 일반적인 값과 해당 응용 시나리오의 코드 예제입니다. 이러한 공통 가치와 적용 시나리오를 익히면 CSS를 사용하여 페이지 레이아웃과 디자인을 더 잘 구현할 수 있습니다.

위 내용은 일반적으로 사용되는 CSS 표시 속성 값과 해당 적용 시나리오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!