48 lines
1.5 KiB
Markdown
48 lines
1.5 KiB
Markdown
|
---
|
|||
|
|
title: Display Property
|
|||
|
|
localeTitle: Propriedade de exibição
|
|||
|
|
---
|
|||
|
|
## Propriedade de exibição
|
|||
|
|
|
|||
|
|
A propriedade `display` especifica o tipo de caixa usado para um elemento HTML. Existem 20 valores de palavra-chave no total, embora apenas 10 sejam usados normalmente. Os mais usados são:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.none {display: none}
|
|||
|
|
.block {display: block}
|
|||
|
|
.inline-block {display: inline-block}
|
|||
|
|
.inline {display: inline}
|
|||
|
|
.flex {display: flex}
|
|||
|
|
.inline-flex {display: inline-flex}
|
|||
|
|
.inline-table {display: inline-table}
|
|||
|
|
.table {display: table}
|
|||
|
|
.inherit {display: inherit}
|
|||
|
|
.initial {display: initial}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Exemplos comuns:**
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.myBox {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.myContainer {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.inlineList ul > li {
|
|||
|
|
display: inline;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### Mais Informações:
|
|||
|
|
|
|||
|
|
* Documentação e lista completa de valores de palavras-chave: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
|
|||
|
|
|
|||
|
|
* A referência CSS do W3Schools na propriedade de exibição está disponível: [W3Schools](https://www.w3schools.com/cssref/pr_class_display.asp)
|
|||
|
|
|
|||
|
|
* CSS-TRICKS tem uma ótima referência na propriedade display: [CSS-Tricks](https://css-tricks.com/almanac/properties/d/display/)
|
|||
|
|
|
|||
|
|
* Suporte ao Navegador: [caniuse](http://caniuse.com/#search=display)
|
|||
|
|
|
|||
|
|
* Um guia completo para o Flexbox: [CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|