CSS의 표시 속성의 공통 속성 값에 대해 자세히 알아보세요.

CSS의 표시 속성의 공통 속성 값에 대한 심층적인 이해, 구체적인 코드 예제가 필요합니다.

소개:

CSS의 표시 속성은 요소가 표시되는 방식을 제어하는 ​​중요한 속성 중 하나입니다. . 상자 생성 여부, 전용 줄 점유 여부, 표시 여부 등 요소가 문서에 표시되는 방식을 결정합니다. 이 기사에서는 표시 속성의 공통 속성 값을 심층적으로 소개하고 특정 코드 예제를 첨부하여 독자가 이러한 속성 값의 사용법을 더 잘 이해하고 숙달할 수 있도록 돕습니다.

1. block

block은 요소가 블록 수준 상자를 생성하고 자체 줄을 차지하도록 하는 표시 속성의 기본값입니다. 공통 블록 요소에는 div, p, h1-h6 등이 포함됩니다.

샘플 코드:

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

2. inline

inline은 요소가 인라인 상자를 생성하고 행을 차지하지 않도록 합니다. 일반적인 인라인 요소에는 범위, a, img 등이 포함됩니다.

샘플 코드:

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

3. inline-block

inline-block은 요소가 전용 라인을 차지하지도 않고 너비와 높이를 설정할 수도 없는 인라인 블록 수준 상자를 생성하도록 합니다. 일반적인 인라인 블록 요소에는 입력, 버튼 등이 포함됩니다.

샘플 코드:

<input type="text" style="display: inline-block; width: 200px; height: 30px;">

4. none

none은 요소가 상자를 생성하지 않도록 합니다. 즉, 요소를 완전히 숨깁니다. 숨겨진 요소는 공간을 차지하지 않으며 다른 요소의 레이아웃에 영향을 주지 않습니다.

샘플 코드:

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

5. flex

flex는 요소를 유연한 상자 컨테이너로 설정하여 상자 속성을 통해 상자 내부 항목의 레이아웃을 조정할 수 있습니다. flex 속성의 일반적인 값에는 행, 열, 행 역방향, 열 역방향 등이 포함됩니다.

샘플 코드:

<div style="display: flex; flex-direction: row; justify-content: space-between;">
    <div style="width: 100px; height: 100px; background-color: red;"></div>
    <div style="width: 100px; height: 100px; background-color: blue;"></div>
    <div style="width: 100px; height: 100px; background-color: green;"></div>
</div>

결론:

display 속성은 요소의 표시 모드를 제어할 수 있는 CSS의 매우 유용한 속성으로, 일반적인 속성 값으로는 block, inline, inline-block, none 및 flex가 있습니다. 등. 이러한 속성 값에 대한 심층적인 이해를 갖고 이를 특정 코드 예제와 결합함으로써 독자는 이러한 속성 값을 더 잘 이해하고 적용할 수 있으며 더 나은 페이지 레이아웃 효과를 얻을 수 있습니다. 이 글이 독자들에게 도움이 되기를 바랍니다.

위 내용은 CSS의 표시 속성의 공통 속성 값에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!