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?

PDP-1

O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.

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.

Cuidados com o notebook

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".