Scribd
Carregar
4 visualizações2 páginas

Box Model

O Box Model do CSS descreve como cada elemento HTML é representado como uma caixa retangular, composta por conteúdo, padding, borda e margem. O documento também detalha diferentes métodos de posicionamento de elementos, incluindo static, relative, absolute, fixed e sticky. Dicas práticas são fornecidas para ensino e reutilização de recursos educativos, como o uso de outline e exemplos visuais.

Enviado por

Magalhães Lemos
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
4 visualizações2 páginas

Box Model

O Box Model do CSS descreve como cada elemento HTML é representado como uma caixa retangular, composta por conteúdo, padding, borda e margem. O documento também detalha diferentes métodos de posicionamento de elementos, incluindo static, relative, absolute, fixed e sticky. Dicas práticas são fornecidas para ensino e reutilização de recursos educativos, como o uso de outline e exemplos visuais.

Enviado por

Magalhães Lemos
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

Box Model: O Modelo de Caixa do CSS

Todo elemento HTML é tratado como uma caixa retangular no CSS. O Box Model
define como essa caixa é construída e como ela se comporta no layout.

Estrutura do Box Model

Componentes

 Content: O conteúdo real do elemento (texto, imagem, etc.).


 Padding: Espaço entre o conteúdo e a borda.
 Border: A borda que envolve o padding e o conteúdo.
 Margin: Espaço externo entre a borda do elemento e outros elementos.

Exemplo prático em CSS

div { width: 200px; padding: 20px; border: 5px solid #333; margin: 10px; }

Esse div terá:

 200px de largura para o conteúdo


 +40px de padding (20px de cada lado)
 +10px de margem externa
 +10px de borda (5px de cada lado)

📍 Posicionamento de Elementos

O CSS oferece diferentes formas de posicionar elementos na página. Aqui estão os


principais:

1. Static (padrão)

 Elementos seguem o fluxo natural do documento.


 Não respondem a top, left, right, bottom.

position: static;

2. Relative

 Posiciona o elemento em relação à sua posição original.


 Pode usar top, left, etc., para ajustar levemente.

position: relative; top: 10px; /* move 10px para baixo */


3. Absolute

 Posiciona o elemento em relação ao ancestral com position: relative (ou


ao body se não houver).
 Remove o elemento do fluxo normal.

position: absolute; top: 0; left: 0;

4. Fixed

 Fixa o elemento em relação à janela de visualização.


 Útil para cabeçalhos ou botões flutuantes.

position: fixed; bottom: 10px; right: 10px;

5. Sticky

 Mistura relative e fixed: o elemento se comporta como relative até atingir


um limite, e então se fixa.

position: sticky; top: 0;

🧠 Dica para ensino ou reuso

Se estiver criando recursos educativos ou templates:

 Use outline em vez de border para destacar caixas sem afetar o layout.
 Crie exemplos visuais com emojis ou Unicode para explicar cada camada do
Box Model.
 Combine position com z-index para mostrar sobreposição de elementos.

Você também pode gostar