Esta tradução está incompleta. Ajude atraduzir este artigo.
Resumo
A propriedade CSS display
especifica o tipo de caixa de renderização usada por um elemento. No HTML, os valores padrões da propriedade display
são feitas a partir do comportamento descrito nas especificações HTML ou da folha de estilo padrão do navegador/usuário. O valor padrão em XML é inline.
Além dos muitos tipos diferentes de exibição de caixa, o valor none
permite desativar a exibição de um elemento; quando você usa none
, todos os elementos descendentes também tem a sua exibição desativada. O documento é renderizado como se o elemento não existisse na árvore do documento.
Initial value | inline |
---|---|
Aplica-se a | all elements |
Inherited | não |
Midia | all |
Computed value | 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 |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Sintaxe
Formal syntax: none | inline | block | list-item | inline-list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents
display: none display: inline display: block display: list-item display: inline-block display: inline-table display: 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: flex display: inline-flex display: grid display: inline-grid display: run-in display: inherit
Valores
display-value
- É a palavra-chave para definir tipo de renderização que será usada no elemento. Os valores possiveis e seus significados são:
Value set Value Description Valores Básicos (CSS 1) none
Desabilita a exibição do elemento (sem afetar o layout); todos os elementos filhos também tem sua exibição desabilitada. O documento é renderizado como se o elemento não existisse.
Para renderizar as dimenções de caixa do elemente, tendo ainda seu conteúdo "invisivel", veja a propriedade
visibility
.inline
The element generates one or more inline element boxes. block
The element generates a block element box. list-item
The element generates a block box for the content and a separate list-item inline box. Extended values (CSS 2.1) inline-block
The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would) Table model values (CSS 2.1) inline-table
The inline-table
value does not have a direct mapping in HTML. It behaves like a<table>
HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.table
Behaves like the <table>
HTML element. It defines a block-level box.table-caption
Behaves like the <caption>
HTML element.table-cell
Behaves like the <td>
HTML elementtable-column
These elements behave like the corresponding <col>
HTML elements.table-column-group
These elements behave like the corresponding <colgroup>
HTML elements.table-footer-group
These elements behave like the corresponding <tfoot>
HTML elementstable-header-group
These elements behave like the corresponding <thead>
HTML elementstable-row
Behaves like the <tr>
HTML elementtable-row-group
These elements behave like the corresponding <tbody>
HTML elementsFlexbox model values (CSS3) flex
The element behaves like a block element and lays out its content according to the flexbox model. inline-flex
The element behaves like an inline element and lays out its content according to the flexbox model. Grid box model values (CSS3) grid
The element behaves like a block element and lay out its content according to the grid model.
As this is experimental, most browsers don't support it. Especially pay attention that-moz-grid
is not the prefixed version of this, but a XUL layout model that must not be used on a Web site.inline-grid
The element behaves like an inline element and lay out its content according to the grid model. 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 a inline box follows, the run-in box becomes a block box.
Examples
p.secret { display: none } <p style="display:none"> invisible text </p>
Especificações
Specification | Status | Comment |
---|---|---|
CSS Basic Box Model The definition of 'display' in that specification. |
Working Draft | Added the run-in value. |
CSS Grid Layout The definition of 'display' in that specification. |
Working Draft | 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 | Basic values: none , block , inline , and list-item . |
Browser's compatíveis
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
none , inline and block |
1.0 | 1.0 (1.0) | 4.0 | 7.0 | 1.0 (85) |
inline-block |
1.0 | 3.0 (1.9) | 5.5 (-7.0) natural inline elements only |
7.0 | 1.0 (85) |
list-item |
1.0 | 1.0 (1.0) | 6.0 | 7.0 | 1.0 (85) |
run-in |
1.0 Not before inline-elements |
Não suportado | 8.0 | 7.0 | 1.0 (85) Not before inline-elements |
4.0 Removed in 32 |
5.0 (532.5) | ||||
inline-table |
1.0 | 3.0 (1.9) | 8.0 | 7.0 | 1.0 (85) |
table , table-cell , table-column , table-colgroup , table-header-group , table-row-group , table-footer-group , table-row , and table-caption |
1.0 | 1.0 (1.0) | 8.0 | 7.0 | 1.0 (85) |
flex |
21.0-webkit | 18.0 (18.0)(behind a pref) [1] | Não suportado | 12.50 | Não suportado |
inline-flex |
21.0-webkit | 18.0 (18.0)(behind a pref) [1] | Não suportado | 12.50 | Não suportado |
grid |
? | Não suportado | 10.0-ms | ? | ? |
inline-grid |
? | Não suportado | 10.0-ms | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
[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.