Layouts CSS
O curso explica o fluxo normal, o algoritmo de layout que o navegador aplica a todo elemento por padrão. Ele cobre caixas block, que ocupam a largura disponível inteira e empilham na vertical, e caixas inline, que fluem com o texto e ignoram largura e altura. Depois apresenta o inline-block como um híbrido dos dois. Compara display: none com visibility: hidden e opacity: 0. Também mostra como sobrescrever o display padrão sem mudar o significado HTML. A última aula lê um pequeno card de curso, elemento por elemento.
O que você vai aprender
- ✓Como o fluxo normal organiza caixas block e inline por padrão
- ✓Quais propriedades do box model elementos block e inline respeitam ou ignoram
- ✓Quando usar display: inline-block em elementos em fileira que precisam de dimensões reais
- ✓Como display: none, visibility: hidden e opacity: 0 se diferenciam
- ✓Como sobrescrever o display padrão mantendo o significado HTML
- ✓Como ler o layout de uma página pelo display de cada elemento
Fluxo normal: como o navegador organiza o conteúdo por padrão
Toda página desta série até agora saiu com o layout certo sem uma única regra de layout. Títulos empilham acima de parágrafos, e uma palavra em <strong> fica dentro da frase em vez de pular para uma linha própria. Não é acidente. É o algoritmo de layout embutido do navegador, chamado fluxo normal,…
Ler a aula completa grátis →Currículo
7 aulasFluxo normal: como o navegador organiza o conteúdo por padrão
No fluxo normal, o display de cada elemento define se a caixa é block ou inline.
display: block — largura total, empilhado
Caixas block ocupam a largura disponível inteira, começam numa linha nova e respeitam todo o box model.
display: inline — flui com o texto, ignora largura e altura
Caixas inline têm o tamanho do conteúdo, ignoram width e height e não afastam linhas na vertical.
display: inline-block — o híbrido
O inline-block fica na linha como inline e respeita width, height, padding e margem como block.
display: none vs visibility: hidden
display: none tira o elemento do fluxo, e visibility: hidden mantém o espaço sem pintar nada.
Sobrescrevendo o padrão: mudando o display de qualquer elemento
Mudar o display altera só o layout, como em menus horizontais e cards clicáveis, com uma ressalva do VoiceOver.
Juntando tudo: lendo o fluxo de uma página real
Um pequeno card de curso é lido elemento por elemento para decidir se cada caixa é block, inline ou inline-block.