CSS의 디스플레이 사용법에 대한 자세한 설명

CSS는 웹 디자인의 필수적인 부분이며, 디스플레이 속성은 더 중요한 속성 중 하나입니다. 표시 속성의 주요 기능은 블록, 인라인, 인라인 블록, 플렉스, 그리드 및 기타 방법을 포함하여 웹 페이지 요소의 표시 모드를 제어하는 ​​것입니다. 이번 글에서는 디스플레이 속성의 사용법을 소개하겠습니다.

1. block

block은 표시 속성의 기본값입니다. 요소가 블록으로 설정되면 페이지에 블록 수준 요소로 표시되어 전체 줄을 차지하고 자동으로 줄바꿈됩니다. 일반적인 블록 수준 요소에는 p, h1~h6, div 등이 포함됩니다. 블록 수준 요소는 너비, 높이, 여백 및 패딩과 같은 속성을 설정하거나 display:none을 통해 요소를 숨길 수 있습니다.

샘플 코드:

<div>我是一个块级元素</div>

2. inline

inline은 또 다른 일반적인 디스플레이 속성입니다. 요소가 인라인으로 설정되면 페이지에 인라인 요소로 표시되며 줄바꿈되지 않고 한 줄에 맞습니다. 일반적인 인라인 요소에는 a,span,img 등이 포함됩니다. 인라인 요소의 너비와 높이는 요소의 내용에 따라 달라집니다. 여백과 패딩을 설정할 수 없으며 display:none을 통해 요소를 숨길 수 없습니다.

샘플 코드:

<a href="#">我是一个内联元素</a>

3. inline-block

inline-block은 블록과 인라인의 조합입니다. 요소가 인라인 블록으로 설정되면 페이지에 인라인 블록 수준 요소로 표시됩니다. . 전체 줄을 차지하지는 않지만 너비, 높이, 여백 및 패딩을 가질 수 있으며 display:none으로 설정할 수 있습니다.

샘플 코드:

<span style="display:inline-block;width:50px;height:50px;background-color:red;"></span>

4. flex

flex는 CSS3에 새로 추가된 속성으로, 요소 레이아웃을 더욱 유연하게 만들 수 있습니다. 요소를 flex로 설정하면 컨테이너가 되며, 내부의 하위 요소는 flex 속성을 설정하여 너비, 높이, 레이아웃을 유연하게 조정할 수 있습니다. flex 속성을 활성화하려면 display:flex를 설정해야 합니다. flex-direction, justify-content, align-items, align-content 및 기타 속성을 설정하여 하위 요소의 레이아웃을 제어할 수 있습니다.

샘플 코드:

<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;">
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:red;"></span>
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:green;"></span>
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:blue;"></span>
</div>

5. grid

grid는 CSS3에 새로 추가된 또 다른 속성으로, 그리드 레이아웃을 만드는 데 사용할 수 있습니다. flex와 유사하게, 그리드 속성을 활성화하려면 display:grid를 설정해야 합니다. 그리드 템플릿 행, 그리드 템플릿 열, 그리드 템플릿 영역과 같은 속성을 통해 그리드 레이아웃을 제어할 수 있습니다.

샘플 코드:

<div style="display:grid;grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 50px 100px;">
  <div style="grid-row: 1/3;grid-column: 1/3;">1</div>
  <div style="grid-row: 1/2;grid-column: 3/4;">2</div>
  <div style="grid-row: 2/3;grid-column: 3/4;">3</div>
</div>

위는 요소의 레이아웃을 제어하고 웹 디자인 효과를 얻기 위해 필요에 따라 적절한 속성을 선택할 수 있습니다.

위 내용은 CSS의 디스플레이 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!