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-box/index.html | 112 +++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 files/pt-br/web/css/display-box/index.html (limited to 'files/pt-br/web/css/display-box') diff --git a/files/pt-br/web/css/display-box/index.html b/files/pt-br/web/css/display-box/index.html new file mode 100644 index 0000000000..7aec5790c6 --- /dev/null +++ b/files/pt-br/web/css/display-box/index.html @@ -0,0 +1,112 @@ +--- +title: +slug: Web/CSS/display-box +translation_of: Web/CSS/display-box +--- +
{{CSSRef}}
+ +

Essas palavras-chave definem se um elemento gera caixas de exibição.

+ +

Sintaxe

+ +
+
contents {{Experimental_Inline}}
+
Esses elementos não produzem uma caixa específica por si mesmos. Eles são substituídos por sua pseudo-caixa e suas caixas filho. Observe que a especificação CSS Display Level 3 define como o contents +

o valor deve afetar "elementos incomuns" - elementos que não são renderizados apenas pelos conceitos da caixa CSS, como elementos substituídos. Consulte o Apêndice B: Efeitos da exibição: conteúdo em Elementos incomuns para obter mais detalhes.

+ +

Devido a um erro nos navegadores, atualmente isso remove o elemento da árvore de acessibilidade - os leitores de tela não analisam o que está dentro. Consulte a seção Preocupações com acessibilidade abaixo para obter mais detalhes.

+
+
none
+
Desativa a exibição de um elemento para que não tenha efeito no layout (o documento é renderizado como se o elemento não existisse). Todos os elementos descendentes também têm a exibição desativada.
+ Para que um elemento ocupe o espaço que normalmente ocuparia, mas sem renderizar nada, use o {{CSSxRef("visibility")}} propriedade em vez disso.
+
+ +

Sintaxe formal

+ +
{{CSSSyntax}}
+ +

Exemplos

+ +

Neste primeiro exemplo, o parágrafo com uma classe de segredo é definido como display: none; a caixa e qualquer conteúdo agora não são renderizados.

+ +

display: none

+ +

HTML

+ +
+
<p>Visible text</p>
+<p class="secret">Invisible text</p>
+ +

CSS

+ +
p.secret {
+  display: none;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Hide_element", "100%", 60)}}

+
+ +
+

display: contents

+ +

Neste exemplo, o externo {{htmlelement("div")}} possui uma borda vermelha de 2 pixels e uma largura de 300 px. No entanto, também temdisplay: contents especificado, portanto, este <div> não será renderizado, a borda e a largura não serão mais aplicadas e o elemento filho será exibido como se o pai nunca tivesse existido.

+ +

HTML

+ +
<div class="outer">
+  <div>Inner div.</div>
+</div>
+
+ +

CSS

+ +
.outer {
+  border: 2px solid red;
+  width: 300px;
+  display: contents;
+}
+
+.outer > div {
+  border: 1px solid green;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Display_contents", 300, 60)}}

+
+ +

Preocupações com acessibilidade

+ +

As implementações atuais na maioria dos navegadores removerão da árvore de acessibilidade qualquer elemento com um display valor de contents. Isso fará com que o elemento - e em algumas versões do navegador, seus elementos descendentes - não sejam mais anunciados pela tecnologia de leitura de tela. Esse é um comportamento incorreto de acordo com a especificação CSSWG.

+ + + +

Compatibilidade do navegador

+ + + +

Support of contents

+ +

{{Compat("css.properties.display.contents", 10)}}

+ +

Veja também

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