Gerenciamento do Fluxo e Layout do Documento

Fluxo

O fluxo de uma página web determina a ordem em que os elementos são exibidos vertical e horizontalmente. Por padrão, os elementos são mostrados na ordem em que aparecem no documento HTML, de cima para baixo. O fluxo horizontal normalmente vai da esquerda para a direita; no entanto, o fluxo também é invertido da direita para a esquerda em idiomas que são lidos dessa forma.

Todo elemento em HTML é uma área retangular que ocupa uma posição em uma linha, semelhante a palavras em uma folha pautada. Existem dois tipos principais de elementos: elementos de bloco e elementos inline.

index.html

Block-level element 1

Block-level element 2

Block-level element 3

<a href="#">Inline element 1</a>

<a href="#">Inline element 2</a>

<a href="#">Inline element 3</a>

Após analisar o exemplo, chega-se à seguinte conclusão:

Elemento de bloco: ocupa toda a largura do seu contêiner, independentemente do tamanho do conteúdo. Elementos de bloco são empilhados verticalmente, um após o outro.

Elemento em linha: ocupa apenas a largura necessária para o seu conteúdo. Isso permite que elementos em linha fiquem na mesma linha. Eles serão quebrados para a próxima linha se não houver espaço suficiente em uma linha.

Nota

A propriedade display dos elementos HTML é predefinida de acordo com padrões e convenções estabelecidos pela especificação HTML. Esses padrões determinam o comportamento de renderização padrão dos elementos em diversos navegadores. É possível encontrar o tipo específico de qualquer elemento nos links de referência ou especificação fornecidos: HTML Reference e HTML Specification.

Tipos de Elementos

Como mencionado anteriormente, todo elemento na folha de estilos do navegador possui um tipo representado pela propriedade display, que determina seu comportamento. Os dois principais tipos de elementos são elementos de bloco e elementos em linha, havendo também tipos adicionais, como elementos inline-block.

Elementos inline: usados principalmente para estilizar e destacar pequenas partes do conteúdo, como links, botões e imagens. Permanecem na mesma linha até que o espaço seja preenchido, momento em que quebram para a próxima linha.

Elementos de bloco: utilizados para definir estruturas de conteúdo maiores, como títulos, parágrafos, listas e seções (por exemplo, cabeçalhos e rodapés). São exibidos visualmente como blocos retangulares que se empilham verticalmente uns sobre os outros.