Módulo 2 — Layout e Posicionamento

setembro 02, 2026

Módulo 2 — Layout e Posicionamento

🚧 Estamos preparando este módulo!

Olá! 👋

Você chegou até aqui porque está pronto para continuar sua jornada no Curso Css do Zero ao Avançado.

Por enquanto, este módulo ainda está sendo preparado. Estamos trabalhando no conteúdo para que ele seja apresentado de forma clara, prática e organizada, assim como as aulas anteriores.

📚 O conteúdo está a caminho!

Enquanto esta etapa não fica disponível, aproveite para revisar os módulos anteriores e praticar os exemplos, exercícios e desafios.

💻 Continue praticando.
🧠 Revise o que você já aprendeu.
🚀 E prepare-se para o próximo passo.

A página será atualizada assim que o conteúdo estiver pronto.

Obrigado pela sua paciência e por fazer parte da Academy Code Christ! ❤️

🎯 Lembre-se: aprender programação é uma jornada. Não tenha pressa. Pratique, experimente, erre, corrija e continue avançando.

🚀 Em breve: Módulo 2 — Trabalhando com Conteúdo

Bons estudos e até a próxima aula! 💻

Nesse módulo 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 | |

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

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

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

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

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

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

💡 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

<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.

.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>

.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>

<head>

<title>Box Model e Posicionamento</title>

</head>

<body>

<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>

</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.

🧠 Flexbox

🌍 Este site está disponível em vários idiomas.
Fique à vontade para usar o tradutor no topo da página e aprender no seu idioma.

Nesse nessa segunda parte do módulo você vai aprender Como o Flexbox organiza e distribui elementos; Controle de eixos, alinhamentos e espaçamento; Diferença e uso das propriedades do container e dos itens; Criação de layouts fluidos e responsivos; Montagem de um layout de cards moderno e leve.

🧠 O Que é o Flexbox

O Flexbox (Flexible Box Layout) foi criado para facilitar o design de layouts que se ajustam automaticamente em diferentes telas —
sem precisar usar float, clear ou truques antigos de layout.

Ele trabalha com eixos e relacionamento entre pai e filhos:

● O container pai define o comportamento flexível com display: flex;

● Os filhos (itens) se alinham automaticamente ao longo dos eixos definidos.

🎯 Eixos do Flexbox

→ Eixo Principal (main axis)

↓ Eixo Secundário (cross axis)

Por padrão:

● Eixo principal: horizontal

● Eixo secundário: vertical

Mas isso pode mudar conforme a direção (flex-direction).

⚙️ Ativando o Flexbox

Para usar Flexbox, basta aplicar:

.container {

display: flex;

}

Agora, todos os elementos filhos diretos desse container passam a se comportar de forma flexível.

📏 As Principais Propriedades do Container Flex: Propriedade Função

flex-direction → Define a direção dos itens (row, column, row-reverse, column-reverse)

justify-content → Alinha os itens no eixo principal

align-items → Alinha os itens no eixo secundário

flex-wrap → Faz os itens quebrarem linha automaticamente

align-content → Controla o espaçamento entre linhas múltiplas

gap → Espaçamento automático entre itens (muito útil!)

🔹 Exemplo básico:

📄 HTML

</div>

📄 CSS

.container {

display: flex;

background: #f0f0f0;

padding: 20px;

gap: 10px;

}

.container div {

background: #0077ff;

color: white;

padding: 20px;

text-align: center;

border-radius: 8px;

flex: 1; /* todos crescem igualmente */

}

💡 Resultado: Três caixas lado a lado, automaticamente ajustadas e espaçadas.

🧭 Direção e Alinhamento

🔸 flex-direction

Define o eixo principal:

.container {

display: flex;

flex-direction: row; /* padrão */

}

Outras opções:

● row-reverse → inverte a ordem horizontal;

● column → itens empilhados verticalmente;

● column-reverse → itens de baixo para cima.

🔸 justify-content

Alinha no eixo principal (horizontal por padrão):

justify-content: flex-start; /* padrão, itens à esquerda */

justify-content: center;

justify-content: flex-end;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

💬 Dica: As variações space-between e space-evenly são ótimas para distribuir botões ou cards proporcionalmente.

🔸 align-items

Alinha no eixo cruzado (vertical por padrão):

align-items: flex-start;

align-items: center;

align-items: flex-end;

align-items: stretch; /* padrão */

Exemplo: centralizar conteúdo na tela:

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

💥 Um dos usos mais comuns e poderosos: centralização perfeita em 2 linhas de CSS!

🔸 flex-wrap

Permite que os itens “quebrem” linha se o espaço for pequeno:

.container {

display: flex;

flex-wrap: wrap;

}

Essencial para tornar galerias e grids responsivos.

🔸 align-content

Controla o espaçamento entre as linhas quando há quebra (com wrap ativo):

align-content: space-around;

🔧 Propriedades dos Itens Filhos (os “flex items”)

Cada item do container pode ter comportamento individual controlado com estas propriedades:

Propriedade Função

flex-grow → Define quanto o item pode crescer

flex-shrink → Define quanto o item pode encolher

flex-basis → Define o tamanho base do item

align-self → Alinha o item individualmente no eixo cruzado

order → Define a ordem de exibição entre os itens

🔹 Exemplo:

.item1 {

flex-grow: 2; /* ocupa o dobro de espaço */

}

.item2 {

order: -1; /* aparece antes dos outros */

}

💡 Ideal para priorizar conteúdos ou reorganizar cards sem mudar o HTML.

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

📱 Exemplo Prático – Layout Responsivo de Cards

Vamos aplicar tudo o que vimos para criar um layout profissional de produtos ou posts, 100% com Flexbox.

📄 index.html

<!DOCTYPE html>

<head>

<title>Layout Flexbox</title>

</head>

<body>

</div>

</body>

</html>

📄 style.css

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Poppins', sans-serif;

background: linear-gradient(135deg, #74ABE2, #5563DE);

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

}

.container {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 20px;

padding: 40px;

max-width: 1000px;

}

.card {

background: white;

color: #333;

border-radius: 12px;

flex: 1 1 250px; /* crescer, encolher, tamanho base */

padding: 30px;

text-align: center;

box-shadow: 0 8px 16px rgba(0,0,0,0.1);

transition: transform 0.3s;

}

.card:hover {

transform: translateY(-10px);

}

💥 Resultado:
Um conjunto de cartões que:

● Se alinham automaticamente lado a lado;

● Quebram para a linha de baixo quando o espaço é reduzido;

● Mantêm espaçamento (gap) e proporções suaves.

⚡ Técnicas Avançadas e Dicas Profissionais

● Use gap para espaçamento — substitui o antigo margin-right de colunas;

● Combine flex-wrap com min-width nos filhos para grid fluido;

● Centralize qualquer coisa (inclusive textos, ícones, botões) com:

display: flex; justify-content: center; align-items: center;

● Combine com media queries para layouts adaptáveis.