Antes de usar Flexbox ou Grid, é essencial entender como o navegador organiza os elementos naturalmente.

Esse comportamento padrão é chamado de fluxo do documento, e ele depende diretamente da propriedade display.

O que é o fluxo do documento?

O fluxo do documento é a forma padrão como o navegador posiciona os elementos HTML na página.

Sem nenhum CSS especial:

  • Elementos aparecem na ordem do HTML
  • Um após o outro
  • Respeitando o tipo de display de cada elemento
Quando algo “quebra” o layout, quase sempre é o fluxo que foi alterado.

A propriedade display

A propriedade display define como um elemento se comporta em relação aos outros elementos.

Os valores mais importantes para começar são:

  • block
  • inline
  • inline-block
  • none

Display block

Elementos com display: block:

  • Ocupam toda a largura disponível
  • Quebram a linha
  • Aceitam width, height, margin e padding
 div { display: block; }

Exemplos comuns:

  • <div>
  • <p>
  • <section>

Display inline

Elementos com display: inline:

  • Não quebram a linha
  • Ocupam apenas o espaço do conteúdo
  • Ignoram width e height
 span { display: inline; }

Exemplos comuns:

  • <span>
  • <a>
  • <strong>
Margin vertical não funciona como esperado em elementos inline.

Display inline-block

O inline-block é uma mistura dos dois mundos:

  • Fica na mesma linha (como inline)
  • Aceita width, height e padding (como block)
 .button { display: inline-block; padding: 10px 20px; }

Foi muito usado antes do Flexbox.

Display none

Com display: none, o elemento:

  • Não aparece
  • Não ocupa espaço
  • Some do fluxo do documento
 .oculto { display: none; }
display: none remove completamente o elemento da página.
Exemplo de fundo colorido

Fluxo normal × quebra de fluxo

Enquanto os elementos seguem o fluxo normal:

  • A página se organiza sozinha
  • O layout é previsível

Quando alteramos display ou posição:

  • O fluxo muda
  • O layout pode quebrar
Entender o fluxo evita 90% dos problemas de layout.

💾🧠 Resumo da aula para nunca mais esquecer

  • O fluxo do documento organiza os elementos naturalmente
  • display define o comportamento dos elementos
  • block quebra linha e ocupa largura total
  • inline não quebra linha
  • inline-block combina os dois comportamentos
  • display: none remove o elemento do fluxo

Na próxima aula, vamos falar sobre position — como posicionar elementos fora do fluxo normal 📍✨

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.

Final Fantasy

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.

Muitos aplicativos

Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.