더 "Try it Yourself" 아래의 예.
정의 및 사용
디스플레이 속성은 HTML 요소에 사용될 박스의 종류를 지정한다.
기본값: | inline |
---|---|
상속 : | no |
애니메이션 : | no. Read about animatable |
번역: | CSS1 |
자바 스크립트 구문 : | object .style.display="none" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
재산 | |||||
---|---|---|---|---|---|
display | 4.0 | 8.0 5.5에서 부분 | 3.0 | 3.1 | 7.0 |
Note: 값 "inline-table" , "table" , "table-caption" , "table-cell" , "table-column" , "table-column-group" , "table-row" 및 "table-row-group" IE7과 이전 지원되지 않습니다. IE8은!의 DOCTYPE이 필요합니다. IE9는 값을 지원합니다.
참고 : 값 "flex" 와 "inline-flex" 사파리에서 작동하는 접두사가 필요합니다. 를 들어 "flex" 사용 "display: -webkit-flex" 에 대해, "inline-flex" 사용 "display: -webkit-inline-flex;" .
CSS 구문
display:value;
속성 값
값 | 기술 | 플레이 |
---|---|---|
inline | 기본값. 인라인 요소로 요소를 표시합니다 (like <span>) | »플레이 |
block | 블록 요소로 요소를 표시합니다 (like <p>) | »플레이 |
flex | 블록 레벨 플렉스 컨테이너 등의 요소를 표시합니다. CSS3의 새로운 기능 | |
inline-block | 인라인 레벨 블록 컨테이너 등의 요소를 표시합니다. 이 블록의 내부는 블록 레벨 상자로 포맷하고, 요소 자체는 인라인 (inline-level) 상자로 포맷 | |
inline-flex | 인라인 수준 플렉스 컨테이너 등의 요소를 표시합니다. CSS3의 새로운 기능 | |
inline-table | 요소는 인라인 (inline-level) 테이블로 표시됩니다 | |
list-item | 요소가처럼 행동하자 <li> 요소 | »플레이 |
run-in | 문맥에 따라, 인라인 블록 또는 하나로서 표시 소자 | |
table | 요소가처럼 행동하자 <table> 요소 | |
table-caption | 요소가처럼 행동하자 <caption> 요소 | |
table-column-group | 요소가처럼 행동하자 <colgroup> 요소 | |
table-header-group | 요소가처럼 행동하자 <thead> 요소 | |
table-footer-group | 요소가처럼 행동하자 <tfoot> 요소 | |
table-row-group | 요소가처럼 행동하자 <tbody> 요소 | |
table-cell | 요소가처럼 행동하자 <td> 요소 | |
table-column | 요소가처럼 행동하자 <col> 요소 | |
table-row | 요소가처럼 행동하자 <tr> 요소 | |
none | 요소가 전혀 표시되지 않는다 (has no effect on layout) | »플레이 |
initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | »플레이 |
inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
예
내부에 약간의 유연성 항목의 방향 설정 <div> 역순으로 요소를 :
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
»그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 디스플레이 및 가시성
HTML DOM 참조 : display property