Box Model

O modelo das caixas em CSS, descreve os box gerados pelos elementos HTML detalhando as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento.


Block Level

Exemplos de elementos block-level

  • div
  • h1-h6
  • p
  • ul
  • ol
  • table
  • form
  • fildset
  • hr

Inline Level

Exemplos de elementos inline-level

  • span
  • a
  • img
  • td
  • label
  • input
  • select
  • textarea

Inline-Block

O CSS pode alterar o tipo do elemento, com a propriedade display, com os valores: block, inline

Posicionamento

Estático - permanece na posição em que foi definido
Relativo - posicionado em relação onde foi definido
Absoluto - pode ser posicionado em qualquer lugar do documento
Fixed - permanece fixo durante a rolagem do conteúdo
Sticky - permanece fixo durante a rolagem a partir de onde foi definido

Layers

*passe o mouse
Camada 1
Camada 2

Float

A propriedade float do CSS determina que um elemento deve ser retirado do seu comportamento normal, e colocado flutuando à sua direita ou esquerda.

*o proximo paragrafo também esta dentro da tag e com o parametro float, note que ele sai fora do container onde estaria normalmente

Apesar de funcionar de uma forma simples, é considerado nos dias de hoje uma má pratica, tendo em vista que existem outros recursos para o alinhamento de elementos, como o Flex Box por exemplo.

< VOLTAR