Pequenas Dúvidas

  • HTML
  • CSS
  • JS
  • PHP
  • MySQL
  • Marketing Digital
  • Photoshop

CSS Display, como e de que forma utilizar?

CSS Display

O CSS Display é utilizado para controlar como um elemento irá se comportar, por exemplo, se ele deve ficar visível, oculto, se comportar como uma coluna de uma tabela, etc. Na postagem de hoje as opções de display.

A sintaxe da propriedade display é simples, acompanhe abaixo:

display: none;

Utilizando como no exemplo acima, o elemento não será exibido e toda a sua formatação não permanecerão na página.

Já para exibir um conteúdo, tem muitas outras formas, acompanhe abaixo:

inline: exibi o conteúdo em na mesma linha (padrão por exemplo para um elemento como <span>).

block: exibi o elemento como um “bloco”.

flex: (css3) exibi o elemento como um bloco mais flexível (permitindo o auto ajuste).

inline-block: exibi o elemento da seguinte forma: em sua área externa ele se comporta inline, ou seja, em linha (os elementos que estão a volta, entende esse elemento como sendo um elemento em linha), e em usa área interna se comporta como um bloco.

inline-flex: (css3) exibi o elemento como linha, mas de forma flexível.

inline-table: exibi o elemento em linha, mas com um padrão de tabela.

list-item: exibi o elemento como se fosse uma <li> (item de uma listagem).

run-in: exibi o elemento em linha ou como um bloco, depende do contexto.

table: exibi o elemento como uma tabela (<table>).

table-caption: exibi o elemento como uma legenda de tabela (<caption>).

table-column-group: exibi o elemento como uma coluna agrupada de uma tabela (<colgroup>).

table-header-group: exibi o elemento como um cabeçalho de tabela (<thead>).

table-footer-group: exibi o elemento como um rodapé de uma tabela (<tfoot>).

table-row-group: exibi o elemento como corpo de uma tabela (tbody).

table-cell: exibi o elemento como uma célula de uma tabela.

table-column: exibi o elemento como uma coluna de uma tabela.

table-row: exibi o elemento com uma linha de uma tabela (<tr>).

initial: exibi o elemento como o padrão de exibição dele mesmo.

inherit: exibi o elemento com base na formatação do elemento contêiner dele (ou seja, o elemento pai).

É isso ai pessoal, dúvidas poste nos comentários.

Até a próxima.

jan 26, 2015Rodrigo Sarri
Trabalhando com funçõesCSS Borda arredondada, como utilizar?

Deixe uma resposta Cancelar resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

6 years ago CSSblock, css, display, inline, mostrar elemento, ocultar elemento
Posts recentes
  • Como abrir arquivos php no navegador? 21 de dezembro de 2015
  • Utilizando o F12, a ferramenta do desenvolvedor 7 de dezembro de 2015
  • Como recortar qualquer imagem usando a ferramenta caneta do Photoshop 3 de dezembro de 2015
  • Enviar dados de um formulário sem atualizar a página com JQUERY (ajax) 7 de abril de 2015
  • Separar as palavras de uma frase em PHP 9 de fevereiro de 2015
Categorias
  • Adobe Dreamweaver
  • CSS
  • Dicas
  • facebook
  • HTML
  • JQUERY
  • JS
  • Marketing Digital
  • MySQL
  • Photoshop
  • PHP
  • Sem categoria
Nuvem de tags
phpcssjqueryhtmljavascriptcss3inlinematrizlayoutfacebookfan pagedimensõesstyleimagensremover espaço em brancoclassdreamweaveradobetruqesdicaclasseidpáginacadastrar site no googleimplodeadicionar item de segurança banco de dadosvalidar emailarrayrandacertar horahorário de verãofuso horáriogerar número aleatóriovalidar campos phpmysqlsitemapcomo cadastrar site no buscadorcadastrar site no bingcadastrar site no yahoositemap para videossitemap para imagenscadastro no banco de dados phpsitemap para smartphonesitemap para googlecomo construir um sitemap
Outras postagens
Enviar email utilizando o PHP através da função mail()
Enviar email utilizando o PHP mail()
6 years ago
Como abrir arquivos php no navegador?
5 years ago
PHP - Trabalhando com funções
Trabalhando com funções
6 years ago
Buscar
2018 © Pequenas Dúvidas - Aprenda um pouco de HTML CSS JS PHP MySQL e Marketing Digital