CSS-디스플레이

기술

디스플레이 속성 효과적으로 소자의 특정 유형으로 클래스라는 요소, 소자의 가장 기본적인 프레젠테이션에 영향을 미친다. 요소의 렌더링은 표시 유형에 따라 크게 달라질 수 있으며 특정 속성은 특정 표시 값이있는 요소에서만 작동합니다.

가능한 값

• inline−이 값은 요소가 인라인 수준 상자를 생성하도록합니다. 예를 들어 HTML 요소 STRONG, CODE 또는 EM (특히). 요소는 표시 될 때 하나 이상의 인라인 상자를 생성합니다.

• block−이 값은 요소가 블록 수준 상자를 생성하도록합니다. 예를 들어 HTML 요소 P, H1 또는 PRE (특히). 요소가 표시 될 때 블록 상자를 생성합니다.

• list-item−이 값은 요소가 블록 상자와 목록 항목 인라인 상자를 모두 생성하도록합니다. HTML에서 LI 요소는 이러한 요소의 유일한 예입니다.

• run-in− 특정 조건에서이 값은 요소가 삽입되도록합니다. 다음 요소의 시작 부분에. 요소 A가 표시되도록 설정되어 있고 블록 수준 요소 B가 뒤에 오는 경우 A는 B의 첫 번째 인라인 수준 상자가됩니다. A 다음 요소가 블록 수준이 아닌 경우 A는 블록 수준 상자.

• compact − 특정 조건에서이 값은 요소가 다음 요소의 한쪽에 배치되도록합니다.

• marker−이 값은 생성 된 콘텐츠를 마커로 설정합니다. 따라서 블록 수준 요소에 설정 될 때 : before 및 : after 의사 요소와 함께 만 사용해야합니다.

• table−이 값은 요소가 블록 레벨 테이블 상자를 생성하도록합니다. 이것은 HTML 요소 TABLE과 유사합니다.

• inline-table−이 값은 요소가 인라인 수준의 테이블 상자를 생성하도록합니다. HTML에는 아날로그가 없지만 텍스트 행 중간에 나타날 수있는 전통적인 HTML 테이블로 상상할 수 있습니다.

• table-cell−이 값은 요소를 표 셀로 선언합니다. 이것은 HTML 요소 TD와 유사합니다.

• table-row−이 값은 요소를 표 셀의 행으로 선언합니다. 이것은 HTML 요소 TR과 유사합니다.

• table-row-group−이 값은 요소를 테이블 행 그룹으로 선언합니다. 이것은 HTML 요소 TBODY와 유사합니다.

• table-column−이 값은 요소가 테이블 셀의 열이되도록 선언합니다. 이것은 HTML 요소 COL과 유사합니다.

• table-column-group−이 값은 요소가 테이블 열 그룹이되도록 선언합니다. 이는 HTML 요소 COLGROUP과 유사합니다.

• table-header-group−이 값은 요소가 항상 테이블 상단에 표시되며, 행 또는 행 그룹 앞에 있지만 상단 정렬 테이블 캡션 뒤에 배치되는 셀 그룹임을 선언합니다. 이것은 HTML 요소 THEAD와 유사합니다.

• table-footer-group−이 값은 요소가 항상 테이블의 맨 아래에 표시되며 행 또는 행 그룹 뒤에 있지만 맨 아래 정렬 된 테이블 캡션 앞에 배치되는 셀 그룹으로 선언됩니다. 이것은 HTML 요소 TFOOT과 유사합니다.

• table-caption−이 값은 요소를 표의 캡션으로 선언합니다. 이것은 HTML 요소 CAPTION과 유사합니다.

• none − 요소는 상자를 전혀 생성하지 않으므로 문서의 레이아웃에 표시되거나 영향을 미치지 않습니다.

적용

모든 HTML 요소.

DOM 구문

object.style.cueAfter = url("music.wav");

예

다음은 예입니다.

<p style = "display:inline;">
   This paragraph will inline with the next paragraph
</p>

<p style = "display:inline;">
   and will make a single line.
</p>

<br />
<br />

<div style = "display:block;">
   This paragraph will be separate from the next paragraph
</div>

<div style = "display:block;">
   and this is second paragraph.
</div>

이것은 다음 결과를 생성합니다-

 This paragraph will inline with the next paragraph 
 and will make a single line. 





      

        This paragraph will be separate from the next paragraph 
      

      

        and this is second paragraph.