CSS

Depois de um tempo sempre caindo em sites com explicações ruins sobre CSS e sempre esquecendo tudo minutos depois (explicações ruins não se fixam na minha memória), encontrei um ou dois sites quases bons (perdi os links, mas um deles deve ser este: http://css-tricks.com/almanac/
properties/d/display/
) e decidi colecionar minhas próprias explicações, para não precisar mais me contentar com explicações mais ou menos dali em diante.

O resumo abaixo não passou por um controle de qualidade completo™ (isto é, algumas coisas eu testei e outras não), mas deve ser razoavelmente útil, nem que seja para mim mesmo. Foquei este tira-dúvidas em 3 propriedades: display, position, e white-space.

display:

block

  1. Sempre começa numa nova linha.
  2. Dá pra manipular height, line-height e as margens top e bottom.
  3. A largura (width) default é 100% da largura da página, mas dá pra especificar outro valor.

Exemplos em que é o default: <div>, <p>, <h1>, <form>, <ul>, <ol>

inline

  1. Começa na mesma linha.
  2. Não dá pra manipular height, line-height nem as margens top e bottom, essas propriedades serão ignoradas (ver inline-block abaixo para a solução).
  3. A largura (width) é o tamanho do texto ou imagem contida no elemento e não é possível mudar.

Exemplos em que é o default: <span>, <a>, <label>, <strong>, <em>, <b>, <i>.

inline-block

  1. Começam na mesma linha
  2. É possível manipular height, width, etc.

Exemplos em que é o default: <button>, <select>. Há algumas divergências quanto a <img>, <input>, <textarea>, se eles devem ser inline-block ou apenas inline por default. Ver: http://stackoverflow.com/questions/21614938/html-element-which-defaults-to-displayinline-block

position:

static

É o default.

  1. A posição depende do fluxo normal dos elementos da página: seguindo a ordem de leitura de texto, com elementos block começando novas linhas, etc.
  2. Posicionamento com CSS com top, left, right, e bottom será ignorado.
  3. A única situação onde seria necessário usar position: static seria para remover outro posicionamento que foi adicionado em outro lugar. Isso ocorre raramente.

absolute

  1. Removido do fluxo normal da página. Não afeta a posição dos outros elementos e não é afetado por eles.
  2. Posicionado nas coordenadas especificadas (por exemplo, com top e left).
  3. As coordenadas usadas no posicionamento são a posição absoluta dentro do elemento contêiner.
  4. O elemento contêiner pode ser a página como um todo ou o primeiro elemento circundante que especifique  position: relative.

relative

  1. Aceita ser posicionado com top, left, etc.
  2. As coordenadas usadas no posicionamento são relativas à posição onde o elemento estaria no fluxo normal da página. Ou seja, é possível fazer coisas como: posição_normal + 10, posição_normal – 5, etc. apenas especificando relative e 10px, -5px, etc.
  3. Usar position: relative e não setar uma posição não vai alterar a localização do elemento, mas vai permitir duas coisas:
    1. usar z-index
    2. servir como elemento contêiner de elementos com position: absolute.

fixed

  1. Semelhante ao absolute.
  2. Não se move quando é usada a barra de rolagem.

white-space:

normal

  1. Seqüências de espaços viram um espaço só.
  2. Quebras de linha só quando necessário (quando o texto atinge a margem), mesmo que o fonte tenha suas próprias quebras.
  3. Quebras de linha nos <br>
  4. É o default.

nowrap

  1. Seqüências de espaços viram um espaço só.
  2. Não adiciona quebras de linha mesmo que necessário (gera linhas mais longas que a tela).
  3. Quebras de linha nos <br>.

pre

  1. Seqüências de espaços são preservadas.
  2. Não adiciona quebras quando necessário.
  3. Quebras de linha onde existirem no fonte.
  4. Quebras de linha nos <br>.
  5. Age como a tag <pre>.

pre-line

  1. Seqüências de espaços viram um espaço só.
  2. Quebras de linha quando necessário.
  3. Quebras de linha onde existirem no fonte
  4. Quebras de linha nos <br>.

pre-wrap

  1. Seqüências de espaços são preservadas.
  2. Quebras de linha quando necessário.
  3. Quebras de linha onde existirem no fonte.
  4. Quebras de linha nos <br>.

(aliás, o CSS fez aniversário de 20 anos recentemente)

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s