From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/display/index.html | 355 +++++++++++++++++++++++++++++++++ 1 file changed, 355 insertions(+) create mode 100644 files/pt-br/web/css/display/index.html (limited to 'files/pt-br/web/css/display/index.html') diff --git a/files/pt-br/web/css/display/index.html b/files/pt-br/web/css/display/index.html new file mode 100644 index 0000000000..1b97bc92fe --- /dev/null +++ b/files/pt-br/web/css/display/index.html @@ -0,0 +1,355 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - Posicionamento CSS + - Propriedades CSS +translation_of: Web/CSS/display +--- +
{{CSSRef}}
+ +

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.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +
Sintaxe formal: {{csssyntax("display")}}
+
+ +
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 setValueDescription
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 dimensões de caixa do elemento, tendo ainda seu conteúdo "invisivel", veja a propriedade {{cssxref("visibility")}}.

+
inlineO elemento gera uma ou mais caixas de elementos inline.
blockO elemento gera uma caixa de elemento de bloco.
list-itemO elemento gera uma caixa de bloqueio para o conteúdo e uma caixa embutida de item de lista separada.
Valores estendidos(CSS 2.1)inline-blockO elemento gera uma caixa de elemento de bloco que fluirá com o conteúdo circundante, como se fosse uma única caixa embutida (se comportando como um elemento substituído)
Valores do modelo de tabela(CSS 2.1)inline-tableO inline-table O valor não possui um mapeamento direto em HTML. Se comporta como um{{HTMLElement("table")}} HTML elemento, mas como uma caixa embutida, em vez de uma caixa no nível do bloco. Dentro da caixa da tabela há um contexto em nível de bloco.
tableComporta-se como o{{HTMLElement("table")}} HTML elemento. Ele define uma caixa no nível do bloco.
table-captionComporta-se como o{{HTMLElement("caption")}} HTML elemento.
table-cellComporta-se como o {{HTMLElement("td")}} HTML elemento
table-columnEsses elementos se comportam como o correspondente {{HTMLElement("col")}} HTML elementos.
table-column-groupEsses elementos se comportam como o correspondente{{HTMLElement("colgroup")}} HTML elementos.
table-footer-groupEsses elementos se comportam como o correspondente {{HTMLElement("tfoot")}} HTML elementos
table-header-groupEsses elementos se comportam como o correspondente{{HTMLElement("thead")}} HTML elementos
table-rowComporta-se como o {{HTMLElement("tr")}} HTML elemento
table-row-groupEsses elementos se comportam como o correspondente {{HTMLElement("tbody")}} HTML elementos
Valores do modelo Flexbox (CSS3)flexO elemento se comporta como um elemento de bloco e apresenta seu conteúdo de acordo com o modelo flexbox.
inline-flexO elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo flexbox.
Valores do modelo de caixa de grade (CSS3) {{experimental_inline}}grid +

O elemento se comporta como um elemento de bloco e apresenta seu conteúdo de acordo com o modelo de grade.

+ +
Como isso é experimental, a maioria dos navegadores não suporta. Preste atenção especialmente que -moz-grid não é a versão prefixada disso, mas um modelo de layout XUL que não deve ser usado em um site.
+
inline-gridO elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo de grade.
Valores experimentais {{experimental_inline}}run-in +
    +
  • Se a caixa de entrada contiver uma caixa de bloco, o mesmo que bloco.
    • +
  • Se uma caixa de bloco segue a caixa de introdução, a caixa de introdução torna-se a primeira caixa embutida da caixa de bloco.
    • +
  • Se uma caixa embutida se seguir, a caixa de introdução se tornará uma caixa de bloco.
    • +
+
+
+
+ +

Exemplos

+ +

Ver exemplos ao vivo

+ +
p.secret  { display: none }
+<p style="display:none"> invisible text </p>
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#display', 'display')}}{{Spec2('CSS3 Box')}}Adicionado o run-in valor.
{{SpecName('CSS3 Grid', '#grid-declaration0', 'display')}}{{Spec2('CSS3 Grid')}}Adicionado os valores do modelo da caixa de grade.
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}Adicionado os valores do modelo de caixa flexível.
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}Foram adicionados os valores do modelo de tabela e inline-block.
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}Valores básicos:none, block, inline, e list-item.
+ +

Navegadores compatíveis 

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
none, inline e block1.01.0 (1.0)4.07.01.0 (85)
inline-block1.03.0 (1.9)5.5 (-7.0)
+ apenas elementos inline naturais		7.01.0 (85)
list-item1.01.0 (1.0)6.07.01.0 (85)
run-in {{experimental_inline}}1.0
+ Não antes dos elementos inline		{{CompatNo}}8.07.01.0 (85)
+ Não antes dos elementos inline
+

4.0

+ +

Removido em 32

+ 		5.0 (532.5)
inline-table1.03.0 (1.9)8.07.01.0 (85)
table, table-cell, table-column, table-colgroup, table-header-group, table-row-group, table-footer-group, table-row, and table-caption1.01.0 (1.0)8.07.01.0 (85)
flex21.0{{property_prefix("-webkit")}}{{CompatGeckoDesktop("18.0")}}(behind a pref) [1]{{CompatNo}}12.50{{CompatNo}}
inline-flex21.0{{property_prefix("-webkit")}}{{CompatGeckoDesktop("18.0")}}(behind a pref) [1]{{CompatNo}}12.50{{CompatNo}}
grid {{experimental_inline}}{{CompatUnknown}}{{CompatNo}}10.0{{property_prefix("-ms")}}{{CompatUnknown}}{{CompatUnknown}}
inline-grid {{experimental_inline}}{{CompatUnknown}}{{CompatNo}}10.0{{property_prefix("-ms")}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Para ativar o suporte ao flexbox, no Firefox 18 e 19, o usuário precisa alterar a preferência about: config "layout.css.flexbox.enabled" para true. O flexbox de várias linhas é suportado desde Firefox 28.

+ +

Veja mais

+ + -- cgit v1.2.3-54-g00ecf