display
Özet
display
özelliği, bir eleman için kullanılan kutu görüntüleme türünü belirler. HTML'de, varsayılan display
değeri, daha önceden belirlenmiş HTML spesifikasyonlarından ya da tarayıcı/kullanıcı varsayılan stil şablonundan alınır. XML'de varsayılan display
değeri inline
'dır.
Bir çok farklı kutu görüntüleme tipi olmasıyla birlikte, none
değeri bir elementi görüntülemeye kapatır, bu değeri kullandığınızda, bütün alt elemanlar da görüntülenmezler. Belge, o eleman yokmuş gibi görüntülenir.
Initial value (en-US) | inline |
---|---|
Applies to | all elements |
Inherited (en-US) | no |
Computed value (en-US) | as the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified. |
Animation type | discrete |
Sözdizimi kuralları
display: none;
display: inline;
display: block;
display: inline-block;
display: contents;
display: list-item;
display: inline-list-item;
display: table;
display: inline-table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: table-caption;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
display: run-in;
/* Global values */
display: inherit;
display: initial;
display: unset;
Değerler
display-value bir elementin görüntülenme biçimini tanımlamak için kullanılan bir değerdir.
-
Değer kümesi Değer Tanım Basic values (CSS 1) none
Elementi görüntülemeye kapatır.(Tasarım değişikliğe uğramaz.);bütün alt elementler de görüntülenmez. Belge, bu element yokmuş gibi davranır.
Görüntülemeye kapadığınız elementin kutu boyutlarının halen tasarımda var olmasını istiyorsanız
visibility
(en-US) özelliğine gözatın.inline
bir veya daha fazla satıriçi kutusu oluşturur. block
blok element kutusu oluşturur. list-item
Element içerik için bir blok kutusu oluşturur, ve içeriği listeye ayırır. Gelişletilmiş değerler (CSS 2.1) inline-block
inline-block değeri, kendisini çevreleyen bir block element alanı oluşturur. Table model değerler (CSS 2.1) inline-table
inline-table
değeri HTML üzerinde direkt olarak bir mapping'e sahip değildir. <table> (en-US) HTML elementi gibi davranır ancak farklı olarak, block elementi değil, inline-block özelliklerini taşır.table
Bu elementler block <table> (en-US) gibi davranır. table-caption
Bu elementler <caption> (en-US) HTML elementler gibi davranır. table-cell
Bu elementler <td> (en-US) gibi davranır.. table-column
Bu elementler <col> (en-US) gibi davranır. table-column-group
Bu elementler <colgroup> (en-US) gibi davranır. table-footer-group
Bu elementler <tfoot> (en-US) gibi davranır. table-header-group
Bu elementler <thead> (en-US) gibi davranır. table-row
Bu elementler <tr> (en-US) gibi davranır. table-row-group
Bu elementler <tbody> (en-US) gibi davranır. CSS3 liste değerleri (CSS3) inline-list-item The inline-list-item display value makes the element a list item, with the effects described above. Additionally, the outside value of list-style-position computes to inside on this element. Otherwise, this display value is treated identically to inline. Flexbox model değerleri (CSS3) flex
Element, block elementi gibi davranır ve flexbox modeline uygun olarak görünür. inline-flex
Element inline element gibi davranır ve flexbox modeline uygun olarak görünür. Grid box model değerleri (CSS3) grid
Element, block elementi gibi davranır ve
grid modeline uygun olarak görünür.Deneyimlenebileceği üzere, çoğu tarayıcı henüz desteklememektedir. Özellikle-moz-grid
'in display:grid'e ait bir prefix olmadığını belirtmeliyiz. -moz-grid XUL layout model 'de belirtilen ve kullanmamanız gereken bir prefix'tir.inline-grid
Element inline element gibi davranır ve grid modeline bağlı olarak içeriği kapsar. Ruby formatting model values (CSS3) ruby
Element inline element gibi davranır ve
içeriği ruby format modelinde kapsar <ruby> (en-US) gibi davranır.ruby-base
Bu elementler <rb> (en-US) gibi davranır. ruby-text
Bu elementler <rt> (en-US) gibi davranır ruby-base-container
These elements behave like <rbc>
elements generated as anonymous boxes.ruby-text-container
These elements behave like <rtc> (en-US) elements. Experimental values run-in
- If the run-in box contains a block box, same as block.
- If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.
- If an inline box follows, the run-in box becomes a block box.
contents
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
Formal syntax
[ (en-US) <display-outside> || (en-US) <display-inside> ] (en-US) | (en-US) <display-listitem> | (en-US) <display-internal> | (en-US) <display-box> | (en-US) <display-legacy>where
<display-outside> = block | (en-US) inline | (en-US) run-in
<display-inside> = flow | (en-US) flow-root | (en-US) table | (en-US) flex | (en-US) grid | (en-US) ruby
<display-listitem> = <display-outside>? (en-US) && (en-US) [ (en-US) flow | (en-US) flow-root ] (en-US)? (en-US) && (en-US) list-item
<display-internal> = table-row-group | (en-US) table-header-group | (en-US) table-footer-group | (en-US) table-row | (en-US) table-cell | (en-US) table-column-group | (en-US) table-column | (en-US) table-caption | (en-US) ruby-base | (en-US) ruby-text | (en-US) ruby-base-container | (en-US) ruby-text-container
<display-box> = contents | (en-US) none
<display-legacy> = inline-block | (en-US) inline-list-item | (en-US) inline-table | (en-US) inline-flex | (en-US) inline-grid
Examples
p.secret { display: none }
<p style="display:none"> invisible text </p>
Specifications
Specification | Status | Comment |
---|---|---|
CSS Lists Module Level 3 The definition of 'display' in that specification. |
Working Draft | Added the inline-list-item values. |
CSS Display Module Level 3 The definition of 'display' in that specification. |
Candidate Recommendation | Added the run-in and contents values. |
CSS Ruby Layout Module Level 1 The definition of 'display' in that specification. |
Working Draft | Added the ruby , ruby-base , ruby-text , ruby-base-container , and ruby-text-container |
CSS Grid Layout The definition of 'display' in that specification. |
Candidate Recommendation | Added the grid box model values. |
CSS Flexible Box Layout Module The definition of 'display' in that specification. |
Candidate Recommendation | Added the flexible box model values. |
CSS Level 2 (Revision 1) The definition of 'display' in that specification. |
Recommendation | Added the table model values and inline-block. |
CSS Level 1 The definition of 'display' in that specification. |
Recommendation | Initial definition. Basic values: none , block , inline , and list-item . |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
none , inline and block |
1.0 | 1.0 (1.7 or earlier) | 4.0 | 7.0 | 1.0 (85) |
inline-block |
1.0 | 3.0 (1.9) | 5.5 [4] | 7.0 | 1.0 (85) |
list-item |
1.0 | 1.0 (1.7 or earlier) | 6.0 | 7.0 | 1.0 (85) |
inline-list-item | No support | No support [6] | No support | No support | No support |
run-in |
1.0 [5] | No support | 8.0 | 7.0 | 1.0 (85) [5] |
4.0 Removed in 32 |
5.0 (532.5) Removed in 8.0 |
||||
inline-table |
1.0 | 3.0 (1.9) | 8.0 | 7.0 | 1.0 (85) |
table , table-cell , table-column , table-column-group , table-header-group , table-row-group , table-footer-group , table-row , and table-caption |
1.0 | 1.0 (1.7 or earlier) | 8.0 | 7.0 | 1.0 (85) |
flex |
21.0-webkit (en-US) | 18.0 (18.0) [1] 20.0 (20.0) |
11 | 12.50 | 6.1-webkit (en-US) |
inline-flex |
21.0-webkit (en-US) | 18.0 (18.0) [1] 20.0 (20.0) |
11 | 12.50 | 6.1-webkit (en-US) |
grid |
? | No support | 10.0-ms (en-US) | ? | ? |
inline-grid |
? | No support | 10.0-ms (en-US) | ? | ? |
ruby , ruby-base , ruby-text , ruby-base-container , ruby-text-container |
? | 34.0 (34.0) [3] | ? | ? | ? |
contents |
No support | 37 (37) [2] | No support | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 4.4 | ? | ? | ? | 7.0-webkit (en-US) |
[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true
. Multi-line flexbox are supported since Firefox 28.
[2] In Firefox 36, it the preference governing this feature was off by default.
[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.
[4] Natural inline elements only
[5] Not before inline-elements
[6] See bug 1105868