O que é HTML e como a Web funciona. 🌴 TRILHA HTML 🟠 Etapa 01

Seja muito bem-vindo à Academy Code Christ!

🌍 Academy Code Christ está disponível em vários idiomas.

Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 

e aprender no seu idioma.

📚 Continue sua jornada de aprendizado

A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  

📋 Menus correspondentes:

👉 Acesse Aqui o Menu Completo do Curso de 🟠 HTML!

👉 Acesse aqui o menu completo do Curso de 🎨 CSS!

👉Acesse aqui o menu completo do Curso de 🚀 JavaScript!

👉 Acesse aqui o menu completo do Curso de 🐍 Python!

👉 Acesse aqui o menu completo do Curso de ⚙️ C Sharp!

👉 Acesse aqui o menu completo do Curso de 🐘 PHP!

💻 Pratique o que você aprende

👉 Acesse o Code Editor Mr Digitals e comece a praticar 

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.

🎨 Etapa 03 

O que você vai aprender nesta aula?

Nessa aula, você vai aprender o Modelo de Caixa (Box Model)  o conceito mais importante do CSS moderno e aprender como posicionar, alinhar e criar layouts profissionais usando display, position, overflow, z-index, e muito mais.

👉 Box Model, Display e Posicionamento.

🧱 O Que é o Box Model

Todo elemento HTML é tratado pelo CSS como uma caixa retangular.
  Essa caixa é composta de 4 camadas:

+--------------------------+

|           MARGIN          |

|  +----------------------+ |

|  |         BORDER      |  |

|  |  +------------------+ |  |

|  |  |    PADDING    |  |  |

|  |  | +--------------+  |  |  |

|  |  |  | CONTENT |  |  |  |

|  |  |   +-------------+ |  |  |

|  |  +-----------------+  |  |

|  +---------------------+  |

+-------------------------+

💡 Explicando:

Camada                                Função

Content       →    O conteúdo real (texto, imagem, botão...)

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

Border         →    A linha que envolve o elemento

Margin         →   Espaço externo, separando um elemento do outro

🎨 Box Model na Prática

Vamos ver um exemplo prático rápido de como cada camada funciona.

📄 index.html

<div class="caixa">

  <p>Sou uma caixa CSS</p>

</div>

 

📄 style.css

.caixa {

  background-color: lightblue;

  color: #333;

  width: 300px;

  padding: 20px;

  border: 5px solid #0077ff;

  margin: 30px;

}

 

💬 Nesse exemplo:

●     A largura total da caixa não será apenas 300px —
  ela soma: width + padding + border + margin.

Dica Profissional:
  Para que o valor da width inclua padding e borda, use:

* {

  box-sizing: border-box;

⚙️Entendendo o Display

A propriedade display define como o navegador deve exibir o elemento.

Os mais importantes são:

Tipo                                                    Descrição

block  →     Ocupa toda a largura disponível; começa em nova linha. (ex: <div>, <p>, <section>)

inline   →   Ocupa apenas o espaço do conteúdo; não quebra linha. (ex: <span>, <a>, <strong>)

inline-block    →     Mistura dos dois: mantém em linha, mas aceita largura/margem/padding.

none   →      Esconde totalmente o elemento.

flex       →    Transforma o elemento num contêiner flexível (veremos na Aula 7).

grid     →     Transforma o elemento num contêiner de grade (veremos na Aula 8).

🎬 Exemplo visual:

<p>Texto normal com <span>um span inline</span> dentro!</p>

<div class="bloco">Sou um elemento block</div>

 

span {

  background: yellow;

  display: inline;

}

 

.bloco {

  background: lightgreen;

  display: block;

  width: 200px;

  padding: 10px;

}

 

💡 inline não respeita width/height, mas block sim!

📐 Display Inline-block

O tipo inline-block é muito útil para colocar elementos lado a lado — como botões, cartões ou menus.

<div class="botao">Sim</div>

<div class="botao">Não</div>

 

.botao {

  display: inline-block;

  background: #0077ff;

  color: white;

  padding: 10px 20px;

  margin: 10px;

  border-radius: 8px;

}

 

🟢 Resultado: os botões ficam lado a lado, mas continuam respeitando largura, altura e padding.

📍 Posicionamento (Position)

A propriedade position define como um elemento será posicionado em relação à página ou a outros elementos.

⚙️ Tipos principais: Tipo     Descrição

static  →  Padrão (segue o fluxo normal da página).

relative  →     Mantém posição original, mas pode ser deslocado usando top, left, right, bottom.

absolute  →      Sai do fluxo normal; é posicionado relativamente ao seu elemento pai posicionado.

fixed   →  Fixa o elemento na tela (mesmo rolando a página).

sticky →     Mistura relative e fixed: fica parado até certa rolagem.

🧩 Exemplo Prático:

<div class="container">

  <div class="box a">A</div>

  <div class="box b">B</div>

  <div class="box c">C</div>

</div>

 

.container {

  position: relative;

  background: #f0f0f0;

  width: 300px;

  height: 200px;

}

 

.box {

  width: 60px;

  height: 60px;

  text-align: center;

  line-height: 60px;

  color: #fff;

  font-weight: bold;

}

 

.a { background: #0077ff; }

.b { background: #ff0077; position: absolute; top: 20px; left: 80px; }

.c { background: #33cc33; }

 

💡 .b fica sobreposta às outras caixas, pois está position: absolute dentro de um contêiner position: relative.

📌 Z-index (Camadas e Profundidade)

Quando elementos se sobrepõem, o z-index decide qual fica na frente.

.caixa1 {

  position: absolute;

  top: 20px;

  left: 20px;

  background: orange;

  z-index: 2;

}

 

.caixa2 {

  position: absolute;

  top: 40px;

  left: 40px;

  background: purple;

  z-index: 1;

}

 

👉 Aqui, .caixa1 ficará por cima da .caixa2.

📘 Só funciona se o elemento tiver position diferente de static.

📘 Para um melhor Aprendizado            🎯 Pratique com exercícios, desafios e projetos

📎 Exemplo Prático: “Cartão com Botões Fixos e Layout Posicionado”

📄 index.html

<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>Box Model e Posicionamento</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="painel">

<h1>Caixas e Posições no CSS</h1>

<p>Aprender o Box Model é entender a alma do design!</p>

<button class="btn">Continuar</button>

  </div>

 

  <div class="botao-flutuante">💬</div>

</body>

</html>

 

📄 style.css

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

 

body {

  background: linear-gradient(135deg, #a2d2ff, #fcbf49);

  height: 100vh;

  font-family: 'Segoe UI', sans-serif;

}

 

.painel {

  width: 400px;

  background-color: #fff;

  border: 3px solid #0077ff;

  border-radius: 12px;

  padding: 20px;

  margin: 60px auto;

  text-align: center;

  box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}

 

h1 {

  color: #0077ff;

  margin-bottom: 10px;

}

 

p {

  color: #333;

  margin-bottom: 20px;

}

 

.btn {

  background: #0077ff;

  color: #fff;

  border: none;

  padding: 10px 20px;

  border-radius: 8px;

  cursor: pointer;

  transition: transform 0.2s;

}

 

.btn:hover {

  transform: scale(1.1);

}

 

/* Botão fixo */

.botao-flutuante {

  position: fixed;

  right: 30px;

  bottom: 30px;

  width: 50px;

  height: 50px;

  background: #ff0077;

  color: white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  cursor: pointer;

  box-shadow: 0 3px 12px rgba(0,0,0,0.3);

  transition: transform 0.3s;

}

 

.botao-flutuante:hover {

  transform: scale(1.2);

}

 

💥 Pronto!  Você tem:

●     Um painel centralizado com bordas, margens e padding bem definidos;

●     Um botão fixo no canto inferior direito (simulando o botão do WhatsApp ou “Fale Conosco”);

●     E todos os elementos perfeitamente organizados pelo Box Model e posicionamento CSS.

🧠 O Que Você Aprendeu Hoje

  ✔️ Como funciona o Box Model (Content, Padding, Border, Margin);

  ✔️ Diferenças entre display: block, inline, inline-block;

  ✔️ Como usar position (relative, absolute, fixed, sticky);

  ✔️ O que é z-index e como controlar camadas;

  ✔️ Criação de layout prático com elementos posicionados e botão flutuante. 

📚 Continue aprendendo CSS:

🎨 Etapa 1 👉  Introdução ao CSS

🎨 Etapa 2 👉 Sintaxe, Seletores e Propriedades Essenciais

🎨 Etapa 3 👉 Você está nessa Etapa

🎨 Etapa 4 👉 Tipografia, Cores e Fundos Avançados

🎨 Etapa 5 👉 Bordas, Sombreamentos e Efeitos Visuais

🎨 Etapa 6 👉 Pseudo-Classes e Pseudo-Elementos

🎨 Etapa 7 👉 Flexbox: Layouts Flexíveis e Responsivos

🎨 Etapa 8 👉 CSS Grid: Layouts de Grade Avançados

🎨 Etapa 9 👉 Responsividade e Media Queries

🎨 Etapa 10 👉 Transições e Animações no CSS

🎨 Etapa 11 👉 Gradientes, Sombras e Estilo Translúcido

🎨 Etapa 12 👉 Variáveis e Funções (CSS Custom Properties)

🎨 Etapa 13 👉 Layout Responsivo Completo com Grid, Flexbox e Media Queries

🎨 Etapa 14 👉 Boas Práticas, e Estrutura Profissional de Projeto CSS

🎨 Etapa 15 👉 Performance, Otimização e Boas Práticas Avançadas de CSS

Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.

Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 

sem enrolação. 

Você pode apoiar o projeto se quiser 

com um café. 

☕ Pix: [email protected]