25 lines
1.6 KiB
Plaintext
25 lines
1.6 KiB
Plaintext
---
|
|
title: Qual é a propriedade CSS `display` e você pode dar alguns exemplos de seu uso?
|
|
---
|
|
|
|
Os valores comuns para a propriedade `display`: `none`, `block`, `inline`, `inline-block`, `flex`, `grid`, `tabela`, `table-row`, `table-cell`, `table-cell`, `list-item`.
|
|
|
|
| Valor `display` | Descrição |
|
|
| :-- | :-- |
|
|
| `none` | Não exibe um elemento (o elemento não afeta mais o layout do documento). Todos os elementos filhos também não são mais exibidos. O documento é renderizado como se o elemento não existisse na árvore do documento. |
|
|
| `block` | O elemento consome toda a linha na direção do bloco (que geralmente é horizontal). |
|
|
| `inline` | Elementos podem ser dispostos lado a lado. |
|
|
| `inline-block` | Semelhante ao `inline`, mas permite algumas propriedades `block` como configuração de `width` e `height`. |
|
|
| `flex` | Comporta-se como um contêiner `flex` de nível de bloco, que pode ser manipulado usando o modelo de flexbox. |
|
|
| `grid` | Comporta-se como um contêiner `grid` de nível de bloco usando o layout de grade. |
|
|
| `table` | Comporta-se como o elemento `<table>`. |
|
|
| `table-row` | Comporta-se como o elemento `<tr>`. |
|
|
| `table-cell` | Comporta-se como o elemento `<td>`. |
|
|
| `list-item` | Comporta-se como um elemento `<li>` que lhe permite definir `list-style-type` e `list-style-position`. |
|
|
|
|
Para uma lista completa de valores para a propriedade `display`, consulte [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
|
|
|
|
## Referências
|
|
|
|
- [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
|