CSS의 표시 속성 값은 무엇입니까?

CSS의 표시 속성 값에는 inline, block, inline-block, none, flex,grid, table, inline-table, list-item 또는 상속 등이 포함됩니다. 자세한 소개: 1. 인라인, 요소는 인라인 요소로 표시되며 인접한 요소와 동일한 줄에 표시됩니다. 너비 및 높이 속성은 효과가 없으며 여백 및 패딩 속성은 왼쪽 및 오른쪽 값만 설정할 수 있습니다. 2. 블록, 요소는 표시 등입니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, DELL G3 컴퓨터.

CSS의 표시 속성은 요소가 표시되는 방식을 정의하는 데 사용되며, 이는 요소가 페이지에 표시되는 방식을 결정합니다. display 속성에는 다음과 같은 공통 속성 값이 있습니다.

1. inline: 요소가 인라인 요소로 표시되며 인접한 요소와 같은 줄에 표시됩니다. width 및 height 속성은 효과가 없으며 margin 및 padding 속성은 왼쪽 및 오른쪽 값만 설정할 수 있습니다. 일반적인 인라인 요소에는 범위, a, img 등이 포함됩니다.

2. 블록: 요소가 블록 수준 요소로 표시되며 전용 라인을 차지합니다. width 및 height 속성을 설정할 수 있으며, margin 및 padding 속성을 4방향으로 설정할 수 있습니다. 일반적인 블록 수준 요소에는 div, p, h1 등이 포함됩니다.

3. inline-block: 요소가 인라인 블록 수준 요소로 표시되며 인접한 요소와 같은 줄에 표시됩니다. width 및 height 속성을 설정할 수 있으며, margin 및 padding 속성을 4방향으로 설정할 수 있습니다. 일반적인 인라인 블록 수준 요소에는 버튼, 입력 등이 포함됩니다.

4. 없음: 요소가 표시되지 않습니다. 즉, 요소가 숨겨집니다. 요소는 페이지의 공간을 차지하지 않으며 상호 작용 이벤트에 응답하지 않습니다.

5. flex: 유연한 레이아웃을 사용하여 요소를 표시합니다. 사용 가능한 공간에 따라 요소의 크기와 위치가 자동으로 조정될 수 있습니다. 일반적으로 flex-direction, flex-wrap 및 기타 속성과 함께 사용됩니다.

6. 그리드: 그리드 레이아웃을 사용하여 요소를 표시하고 2차원 그리드에 요소를 배치합니다. 그리드 레이아웃은 보다 정확한 레이아웃 제어를 제공하며 행과 열의 크기, 간격 등을 정의할 수 있습니다. 일반적으로 그리드 템플릿 열, 그리드 템플릿 행 및 기타 속성과 함께 사용됩니다.

7. 테이블: 요소는 HTML의 테이블 요소와 유사하게 테이블로 표시됩니다. 요소는 테이블 헤더(thead), 테이블 본문(tbody) 및 테이블 바닥글(tfoot)과 같은 하위 요소를 포함할 수 있는 테이블 개체로 구문 분석됩니다.

8. inline-table: 요소가 인라인 테이블로 표시되며 인접한 요소와 같은 줄에 표시됩니다. table 속성과 유사하지만 인라인 요소로 표시됩니다.

9. list-item: 요소는 HTML의 li 요소와 유사하게 목록 항목으로 표시됩니다. 순서가 지정되지 않은 목록(ul) 및 순서가 지정된 목록(ol)의 하위 항목에 적용됩니다.

10. 상속: 상위 요소의 표시 속성 값을 상속합니다. 상위 요소가 없으면 블록으로 간주됩니다.

다음은 CSS 표시 속성의 몇 가지 일반적인 속성 값입니다. 다양한 표시 속성 값을 설정하면 페이지에 요소가 표시되는 방식을 유연하게 제어하고 다양한 레이아웃 효과를 얻을 수 있습니다.

위 내용은 CSS의 표시 속성 값은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!