Layout de site com CSS
Display e Position ensinaram como as caixas se acomodam e empilham. O layout de um site faz a pergunta maior: como as regiões — cabeçalho, navegação, conteúdo principal, barra lateral, rodapé — compartilham uma tela com calma? Esboce primeiro a casca; Flexbox e Grid aprofundarão o ofício das colunas em breve.
Um kit de ferramentas de regiões de layout
📊 Regiões da página em um relance
| Região | Trabalho do dia a dia |
|---|---|
| Header | Identidade do site, ações principais, às vezes busca |
| Navigation | Links para seções importantes (muitas vezes dentro ou sob o header) |
| Main | Conteúdo principal sobre o qual a página trata |
| Aside / sidebar | Links relacionados, dicas, cards secundários |
| Footer | Notas legais, nav secundária, rastros de contato |
| Container | Wrapper max-width que centraliza conteúdo legível |
Um bom layout começa nos landmarks HTML, depois espaçamento e colunas com CSS. Pintar cada caixa com position: absolute raramente escala bem.
Casca semântica de página
Nomeie regiões com elementos reais. Classes refinam a aparência, mas landmarks mantêm a estrutura honesta para leitores e tecnologia assistiva.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #222;
}
header,
nav,
main,
aside,
footer {
display: block;
}
Container max-width centralizado
Linhas longas cansam os olhos. Envolva a coluna legível num container com max-width e margin horizontal auto.
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Básicos da barra de cabeçalho
Um header costuma abranger o container ou a largura total. Mantenha o padding consistente e deixe o estilo profundo de nav para a próxima lição.
.site-header {
padding: 1rem 0;
border-bottom: 1px solid #e5e5e5;
background: #fff;
}
.site-header .brand {
font-weight: 700;
font-size: 1.25rem;
}
Um esboço simples de duas colunas
Até as lições de Flexbox/Grid, um esboço float calmo pode mostrar main + aside. Prefira aprender Flex/Grid a seguir para colunas reais de página — isto é uma ponte, não o plano eterno.
.layout {
display: flow-root;
}
.layout__main {
float: left;
width: 68%;
}
.layout__aside {
float: right;
width: 28%;
}
Rodapé abaixo da história
Após colunas float, limpe o footer para que caia sob ambas. Depois, layouts Flex/Grid conterão colunas sem hábitos de clearfix float.
.site-footer {
clear: both;
margin-top: 2rem;
padding: 1.5rem 0;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #555;
}
Um hábito de layout calmo
Landmarks primeiro, container segundo, espaçamento terceiro. Use float só como esboço temporário de colunas. Nos módulos seguintes, vá de Flexbox e Grid para estrutura durável — não pilhas absolute nem grids float eternos.
.page {
min-height: 100vh;
}
.page__header { /* identity + nav hook */ }
.page__main { /* primary story */ }
.page__aside { /* secondary column */ }
.page__footer { /* closing chrome */ }
Experimente você mesmo
- Monte uma casca landmark: header, nav, main, aside, footer.
- Envolva o conteúdo num
.containercom max-width e margens centralizadas. - Estilize uma barra de header simples com padding e borda inferior.
- Esboce main + aside com larguras float, depois limpe o footer.
- Escreva uma frase: por que Flex/Grid substituirá este esboço float depois?
Erros comuns
- Posicionar em absolute cada coluna da página
- Deixar o texto na largura total do viewport sem max-width
- Pular landmarks semânticos por montes de div anônimos
- Tratar esta lição como object-fit (molduras de mídia, não regiões de página)
- Entregar grids float eternos em vez de aprender Flex/Grid a seguir
Resumo
- Layout de site é sobre regiões da página compartilhando uma tela
- Use landmarks semânticos mais um container max-width centralizado
- Um esboço float main/aside pode ilustrar colunas brevemente
- Limpe footers sob floats; em breve prefira Flex/Grid para estrutura
- Layout ≠ object-fit — regiões vs encaixe de mídia numa caixa
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo