DS & II

capitulo_14_box_model

Leitura de 2 min

Capítulo 14: A Armadura do Bloco (Box Model) 📦🛡️

Neste capítulo, vamos aprender o conceito mais importante do CSS: o Modelo de Caixa (Box Model), que define o espaçamento e as bordas dos elementos, usando o tema Armaduras e Escudos!

📖 O que é o Box Model?

Todo elemento no HTML é considerado uma caixa retangular pelo navegador. Essa caixa tem 4 partes principais, de dentro para fora:

  1. Conteúdo (Content): Onde fica o texto ou imagem.
  2. Preenchimento (Padding): O espaço entre o conteúdo e a borda (o acolchoado da armadura).
  3. Borda (Border): A casca dura do elemento (o metal do escudo).
  4. Margem (Margin): O espaço externo entre este elemento e os outros ao redor (distância de segurança).

📖 Exemplo Guiado: Criando um Cartão de Item

Vamos aplicar o Box Model para criar um botão ou cartão destacado.

  1. Crie o arquivo caixa.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Box Model</title>
    <link rel="stylesheet" href="caixa.css">
</head>
<body>
    <div class="item">
        <h2>Espada Lendária</h2>
        <p>Ataque +100</p>
    </div>
</body>
</html>
  1. Crie o arquivo caixa.css:
.item {
    background-color: #34495e;
    color: white;
    
    /* Box Model */
    width: 200px;      /* Largura da caixa */
    padding: 20px;     /* Espaço interno */
    border: 3px solid #f1c40f; /* Borda dourada de 3px */
    margin: 50px;      /* Espaço externo */
}

📊 Ilustração Visual: O Box Model

graph TD
    A[Margin] --> B[Border]
    B --> C[Padding]
    C --> D[Content]

🛠️ Prática Obrigatória 1: Seu Cartão de Status

Crie um arquivo chamado meu_cartao.html e o CSS. Crie uma div com a classe cartao. Dê a ela uma cor de fundo, um padding de 15px e uma borda de 2px solid red!

🔑 Gabarito de Código

Prática 1: meu_cartao.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Cartão</title>
    <link rel="stylesheet" href="cartao.css">
</head>
<body>
    <div class="cartao">
        <h2>Aviso de Perigo!</h2>
        <p>Inimigos se aproximando.</p>
    </div>
</body>
</html>

cartao.css

.cartao {
    background-color: #fce4ec;
    color: black;
    padding: 15px;
    border: 2px solid red;
    margin: 20px;
}

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo X) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.
  3. ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
  4. No Microsoft Teams:
    • Copie o link do seu repositório.
    • Cole na tarefa correspondente no Teams.
    • Clique em Entregar.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks