sábado, 21 de janeiro de 2017

Conceito de Display em CSS

 Uma das componentes mais importantes em CSS, juntamente com Float ou Clear, é o conceito de Display.
 Display é talvez a ferramenta mais importante para gerir o layout de uma página pois afeta a maneira como os elementos selecionados nos é apresentada.
 Podemos então atribuir 3 valores de display a um elemento: o valor de display:inline, o valor de display:block e o valor de display:inline-block. Caso entendamos estes 3 valores conseguimos utilizar da melhor forma esta componente.


 Ao atribuirmos a um elemento o valor de display:inline, isto significará que ele fica na mesma linha, tendo um efeito semelhante ao do uso da tag <span></span> em HTML. É atribuído por padrão esta característica quer a imagens, quer a texto. Para além disso quaisquer alterações a nível da margem (por exemplo) que atribuamos a elementos "inline", apenas terão efeito horizontalmente. Não sofrendo também quaisquer mudanças caso alteremos quer a largura, quer a altura do elemento em questão.
 Por sua vez o valor de display:block (atribuído automaticamente a divisões) tem um efeito parecido ao da tag <p></p> em HTML. Isto é ao atribuirmos a um elemento esta característica,  este criará uma espécie de parágrafo de forma a isolar o elemento selecionado do restante conteúdo. É de ter em consideração que, num elemento "block" todas as alterações a nível de padding, margem, altura... terão efeito.
 Por fim, o valor display:inline-block acaba por juntar as características de elementos inline, mantendo o elemento selecionado alinhado com o resto do corpo, permitindo também que se altere esteticamente a nível vertical, por exemplo, a margem ocupada ou a altura do elemento. Revelando-se assim, apesar de ser usado em menos casos, bastante útil.
  Para os mais curiosos, segue aqui um pequeno vídeo explicativo feito pelo utilizador LearnWebCode que explica de forma rápida o conceito de display em CSS:




Sem comentários:

Enviar um comentário