initial commit

1 files changed, 110 insertions, 0 deletions

diff --git a/files/pt-br/web/css/css_display/index.html b/files/pt-br/web/css/css_display/index.html
new file mode 100644
index 0000000000..426aece9cd
--- /dev/null
+++ b/files/pt-br/web/css/css_display/index.html
@@ -0,0 +1,110 @@
+---
+title: CSS Display
+slug: Web/CSS/CSS_Display
+translation_of: Web/CSS/CSS_Display
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Display</strong> É um módulo de CSS que define como a árvore da caixa de formatação CSS é gerada a partir da árvore de elementos do documento e define as propriedades que a controlam.</p>
+
+<h2 id="Referência">Referência</h2>
+
+<h3 id="CSS_Propriedades">CSS Propriedades</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("display")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_tipos_de_dados">CSS tipos de dados</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<h3 id="CSS_Fluxo_Layout_(display_block_display_inline)">CSS Fluxo Layout (<code style="white-space: nowrap;">display: block</code>, <code style="white-space: nowrap;">display: inline</code>)</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Layout de bloco e embutido no fluxo normal</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Layout de fluxo e Overflow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Layout de fluxo e modos de gravação</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Contextos de formatação explicados</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">No fluxo e fora do fluxo</a></li>
+</ul>
+
+<h3 id="display_flex"><code style="white-space: nowrap;">display: flex</code></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Conceitos básicos de flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Alinhando itens em um container Flex</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Relações de controle de itens flexíveis ao longo do eixo principal</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Combinações Flexbox entre navegadores</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Dominando o agrupamento de itens flexíveis</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Pedido de itens flexíveis</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relação do flexbox com outros métodos de layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Compatibilidade com versões anteriores do Flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Casos de uso típicos do Flexbox</a></li>
+</ul>
+
+<h3 id="display_grid"><code style="white-space: nowrap;">display: grid</code></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceitos básicos de layout de grade</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relação com outros métodos de layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamento baseado em linha</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de modelo de grade</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout usando linhas de grade nomeadas</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamento automático no layout da grade</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alinhamento de caixa no layout da grade</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grades, valores lógicos e modos de escrita</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">Layout e acessibilidade da grade CSS</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Layout de grade CSS e aprimoramento progressivo</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizando layouts comuns usando grades</a></li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Display", "#the-display-properties", "display")}}</td>
+   <td>{{Spec2("CSS3 Display")}}</td>
+   <td>Adicionado <code style="white-space: nowrap;">run-in</code>, <code>flow</code>, <code style="white-space: nowrap;">flow-root</code>, <code>contents</code> e valores de várias palavras-chave.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "visuren.html#display-prop", "display")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Adicionados os valores do modelo de tabela e <code style="white-space: nowrap;">inline-block</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#display", "display")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Definição inicial. Valores básicos: <code>none</code>, <code>block</code>, <code>inline</code> e <code style="white-space: nowrap;">list-item</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Além do nível de especificação de exibição CSS 3, outras especificações definem o comportamento de vários valores da exibição.</p>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</div>
+
+<p>{{Compat("css.properties.display", 10)}}</p>