Módulo 4: Espaçamento Profissional
2. Resumo da Aula Anterior
No Módulo 3, descobrimos que tudo na web são caixas (Box Model) e aprendemos a usar o Padding, Border e Margin. No entanto, reparaste que adicionar padding às vezes "empurra" o layout e estraga tudo? Vamos resolver isso hoje.
3. O Que Vais Aprender Hoje
- ✅ O segredo do box-sizing: border-box.
- ✅ Como criar círculos e cantos suaves (border-radius).
- ✅ Lidar com conteúdo que transborda (overflow).
- ✅ Diferença entre largura fixa (width) e flexível (max-width).
4. Teoria: A Caixa Inteligente
Conceito: Por defeito, no CSS, se deres 200px de largura a uma caixa e adicionares 20px de padding, ela passa a medir 240px. Isso é confuso! O border-box muda a regra para que o padding "coma" espaço por dentro, mantendo os 200px originais.
🧳 Analogia: A Mala de Viagem
Imagina que tens uma mala com um tamanho limite:
- Content-box (O erro): É como tentares meter roupa e a mala começar a esticar para fora até não caber no compartimento do avião.
- Border-box (A solução): É como meteres a roupa lá dentro e ela ocupar o espaço interno. A mala mantém sempre o mesmo tamanho exterior, não importa quanto recheio metas.
5. Exemplos Práticos
Exemplo 1: O Reset Universal
O primeiro código que todos os profissionais escrevem num site novo.
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Fundamental! */
}Isto garante que todos os elementos comecem do zero e que o tamanho das caixas seja previsível.
Exemplo 2: Cantos Arredondados e Círculos
Dar um aspeto moderno aos elementos.
.botao { border-radius: 8px; } /* Cantos suaves */
.avatar {
width: 100px;
height: 100px;
border-radius: 50%; /* Círculo perfeito */
}Se usares 50% numa caixa quadrada (width = height), terás sempre um círculo.
Exemplo 3: Overflow (O Transbordo)
Lidar com muito texto numa caixa pequena.
.noticia {
height: 150px;
overflow: auto; /* Adiciona scroll se necessário */
/* overflow: hidden; -> Corta o que sobrar */
}O auto é o herói: só mostra a barra de scroll se o texto realmente não couber.
6. Agora é a Tua Vez!
Vamos criar um "Card de Perfil" resiliente:
- Cria uma
<div>com a classe `card`. - Lá dentro, coloca uma imagem (usa um ícone ou emoji) e um texto longo.
- No CSS, aplica o `border-box` a tudo (`*`).
- Dá ao `card` uma largura máxima:
max-width: 400px. - Adiciona padding e um
border-radius: 20px. - Observa como o card se ajusta se diminuíres a janela do browser!
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 Usa sempre box-sizing: border-box para evitar cálculos matemáticos chatos.
- 📌 border-radius: 50% cria círculos perfeitos.
- 📌 max-width é melhor que
widthpara sites que funcionam em telemóveis. - 📌 overflow: hidden limpa "lixo" visual que sai fora das caixas.
9. Desafios Práticos
Desafio 1: O Botão Pílula
Como criarias um botão com as pontas totalmente redondas (em forma de pílula)?
Desafio 2: O Scroll Fantasma
Tens uma div com texto mas não queres que ele saia para fora nem que mostre barras de scroll. Queres apenas que o que não couber desapareça. O que usas?
Desafio 3: A Diferença de largura
Qual a vantagem de usar max-width: 500px em vez de width: 500px num site?