Aula 5: Box Model / Border-box / Position

Box model (Modelo de caixa)

1- Default (padrão) = Content-Box (caixa-conteúdo) *Widht e height
Content (conteúdo)
Padding (espaçamento entre o conteúdo e a borda)
Border (após o padding)
Margin

2- Border-box (caixa-borda)
Soma do padding + content

*DIV: O default é block (no ex. ele não fica ao lado um do outro)
*UL / LI: Block
*IMG: Inline (permite que outro elemento inline fique ao seu lado)


Para saber qual o tipo do display deve-ser procurar na documentação.
Para acrescentar uma img com o tamanho definido - placeholder.com

3- Position (posicionamento da caixa na tela)

3.1- Static (é o padrão - de acordo com a codificação do html)
posição = igual ao da marcação

3.2- Relative
posição = igual ao static mas modificável (de acordo com o top, bottom, right, left)
obs: mesmo alterando o valor, a área total se mantém, não é ocupada por outro elemento.
ex: position: relative;
top: 20px;

3.3- Absolute
posição = se posiciona com relação ao ancestral mais próximo - Diferente do static. Ocupa o espaço vazio após a modificação realizada.

3.4- Fixed
posição = se posiciona sempre relativamente ao viewport.