Fluxo de Documento Padrão
O fluxo de documento padrão define como os elementos são dispostos na página web, semelhante ao comportamento de um editor de texto. Elementos são posicionados sequencialmente, com ajustes automáticos de espaçamento e alinhamento.
Características do Fluxo Padrão
- Agrupamento de Espaços em BrancoEspaços em branco consecutivos entre elementos de texto são colapsados em um único espaço.
- Alinhamento de BaselineElementos de texto (como parágrafos, imagens e campos de formulário) são alinhados pela linha de base inefrior.
- Quebra Automática de LinhaQuando o conteúdo de um elemento excede a largura disponível, o texto é quebrado automaticamente para a próxima linha.
Elementos de Bloco vs. Elementos Inline
O fluxo padrão divide os elementos em dois tipos principais:
Elementos de Bloco
- Ocupam toda a largura disponível.
- Cada elemento de bloco começa em uma nova linha.
- Exemplos:
<div>,<p>,<ul>,<table>
Elementos Inline
- Não ocupam toda a largura.
- Podem coexistir na mesma linha.
- Exemplos:
<span>,<a>,![]()
Exemplo Prático
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Exemplo</title>
<style>
.bloco {
width: 200px;
height: 50px;
background: lightblue;
margin: 10px 0;
display: block;
}
.inline {
width: 150px;
height: 30px;
background: lightgreen;
margin: 5px;
display: inline;
}
</style>
</head>
<body>
<div class="bloco">Bloco 1</div>
<div class="bloco">Bloco 2</div>
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>
</body>
</html>
Propriedade display
A propriedade display permite alterar o comportamento de posicionamento dos elementos:
block: Elemento de bloco (começa em nova linha)inline: Elemento inline (não ocupa nova linha)inline-block: Combina características dos dois
Conversão de Elementos
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Conversão</title>
<style>
.caixa {
width: 180px;
height: 40px;
background: lightcoral;
margin: 10px;
}
.inline {
display: inline;
}
.bloco {
display: block;
}
.inline-block {
display: inline-block;
}
</style>
</head>
<body>
<div class="caixa inline">Inline</div>
<div class="caixa bloco">Bloco</div>
<span class="caixa inline-block">Inline-Block</span>
</body>
</html>
Limitações do Fluxo Padrão
O fluxo padrão tem restrições para layouts complexos. Para superar isso, elementos podem ser removidos do fluxo padrão usando:
- Float (flutuação)
- Position: absolute (posição absoluta)
- Position: fixed (posição fixa)