Módulo 2 / HTML & CSS

Box Model, Display e
Posicionamento

Como o navegador calcula o tamanho dos elementos e como controlamos seu comportamento no layout.

school Aula 06 schedule 2 horas

Conceito central

O Box Model

layers Modelo visual

margin

border

padding

Conteúdo

Todo elemento HTML é uma "caixa" composta por estas 4 camadas.

description Cada camada

Content O conteúdo em si (texto, imagem)

Padding Espaço interno entre o conteúdo e a borda

Border Borda ao redor do padding

Margin Espaço externo entre o elemento e os vizinhos

Na prática

Box Model em código

code Propriedades

.card {
  /* Conteúdo */
  width: 300px;
  height: 200px;

  /* Padding (espaço interno) */
  padding: 20px;
  padding: 10px 20px;       /* vertical | horizontal */
  padding: 10px 20px 15px 5px; /* T R B L */

  /* Border */
  border: 2px solid #6366f1;
  border-radius: 12px;

  /* Margin (espaço externo) */
  margin: 16px auto;      /* centralizar */
}

warning O problema do cálculo

Com content-box (padrão):

Largura total = width + padding + border
300 + 40 + 4 = 344px

check_circle A solução

/* Inclui padding e border no width */
* {
  box-sizing: border-box;
}

Largura total = 300px. Sempre!

Comportamento

A propriedade display

view_day block

div

p

h1

▸ Ocupa a largura total disponível
▸ Sempre começa em nova linha
▸ Aceita width, height, margin

view_stream inline

span a strong em

▸ Ocupa apenas o espaço do conteúdo
▸ Fica na mesma linha
▸ Ignora width e height

view_module inline-block

A

B

C

▸ Fica na mesma linha (como inline)
▸ Aceita width e height (como block)
▸ O melhor dos dois mundos

Visibilidade

Esconder elementos

visibility_off display: none

.oculto {
  display: none;
}

Elemento 1

(removido do layout)

Elemento 3

Remove completamente o elemento. Não ocupa espaço.

blur_on visibility: hidden

.invisivel {
  visibility: hidden;
}

Elemento 1

Elemento 2 (invisível)

Elemento 3

Esconde visualmente, mas continua ocupando espaço.

Layout

Position CSS

pin_drop static (padrão)

.elemento {
  position: static;
  /* Fluxo normal do documento */
  /* top, left, etc. não funcionam */
}

open_with relative

.elemento {
  position: relative;
  top: 10px;
  left: 20px;
  /* Desloca a partir da posição original */
  /* Mantém espaço no fluxo */
}

picture_in_picture absolute

.pai { position: relative; }

.filho {
  position: absolute;
  top: 0;
  right: 0;
  /* Posiciona em relação ao pai relative */
  /* Sai do fluxo normal */
}

push_pin fixed

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Fixo na tela (não acompanha scroll) */
}

Destaque

Position sticky

.cabecalho-tabela {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

lightbulb Combina relative e fixed: comparta-se normalmente até atingir o top definido, depois fica fixo.

compare_arrows Resumo comparativo

static Fluxo normal

relative Desloca, mantém espaço

absolute Posiciona no pai, sai do fluxo

fixed Fixo na tela

sticky Gruda ao rolar

Controle

Z-index e Overflow

stacks z-index

/* Controla a sobreposição */
.atras  { z-index: 1; }
.frente { z-index: 10; }
.topo   { z-index: 100; }

z:1

z:10

z:100

Só funciona com position diferente de static.

crop overflow

.container {
  width: 200px;
  height: 100px;

  overflow: visible;  /* padrão */
  overflow: hidden;   /* corta */
  overflow: scroll;   /* barra */
  overflow: auto;     /* barra se necessário */
}

Controla o que acontece quando o conteúdo ultrapassa o tamanho do contêiner.

Dica de ouro

Como centralizar

Texto

.centro {
  text-align: center;
}

Centraliza conteúdo inline (texto, spans)

Bloco horizontal

.centro {
  width: 300px;
  margin: 0 auto;
}

Centraliza um elemento block com largura definida

Absoluto (ambos eixos)

.centro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Centraliza vertical e horizontalmente

lightbulb Na próxima aula veremos Flexbox, que torna a centralização muito mais simples!

Mão na massa

Exercício prático

edit_note Layout com Box Model e Position

Adicione * { box-sizing: border-box; } no seu CSS
Crie um <header> fixo no topo com position: fixed
Estilize os cards da sua página com:
- ▸ padding interno
- ▸ border com border-radius
- ▸ margin entre os cards
Centralize o contêiner principal com margin: 0 auto
Use display: inline-block para colocar elementos lado a lado

star Bônus: crie um badge com position: absolute no canto superior de um card!

Próxima aula

Aula 07

Flexbox: layouts flexíveis.

task_alt O que aprendemos hoje

check_circle Box Model: content, padding, border, margin
check_circle box-sizing: border-box
check_circle Display: block, inline, inline-block, none
check_circle Position: static, relative, absolute, fixed, sticky
check_circle Z-index, overflow e centralização