Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Gerenciamento do Fluxo e Layout do Documento | Estrutura do Documento HTML
HTML Definitivo

bookGerenciamento 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 apresentados 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

index.html

copy

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 inline: ocupa apenas a largura necessária para o seu conteúdo. Isso permite que elementos inline fiquem na mesma linha. Eles irão para a próxima linha se não houver espaço suficiente em uma linha.

Note
Nota

A propriedade display dos elementos HTML é predefinida de acordo com os padrões e convenções estabelecidos pela especificação HTML. Esses padrões determinam o comportamento de renderização padrão dos elementos em diferentes 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 inline, e também existem tipos adicionais, como elementos inline-block.

Elementos inline: utilizados 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 passam para a próxima linha.

Elementos de bloco: usados 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.

1. Por padrão, os elementos podem ser exibidos em uma página da web em qualquer ordem que o navegador escolher.

2. Quais são os dois principais tipos de elementos?

3. Parágrafo (tag <p>) é …

question mark

Por padrão, os elementos podem ser exibidos em uma página da web em qualquer ordem que o navegador escolher.

Select the correct answer

question mark

Quais são os dois principais tipos de elementos?

Select the correct answer

question mark

Parágrafo (tag <p>) é …

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 4

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

bookGerenciamento do Fluxo e Layout do Documento

Deslize para mostrar o menu

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 apresentados 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

index.html

copy

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 inline: ocupa apenas a largura necessária para o seu conteúdo. Isso permite que elementos inline fiquem na mesma linha. Eles irão para a próxima linha se não houver espaço suficiente em uma linha.

Note
Nota

A propriedade display dos elementos HTML é predefinida de acordo com os padrões e convenções estabelecidos pela especificação HTML. Esses padrões determinam o comportamento de renderização padrão dos elementos em diferentes 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 inline, e também existem tipos adicionais, como elementos inline-block.

Elementos inline: utilizados 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 passam para a próxima linha.

Elementos de bloco: usados 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.

1. Por padrão, os elementos podem ser exibidos em uma página da web em qualquer ordem que o navegador escolher.

2. Quais são os dois principais tipos de elementos?

3. Parágrafo (tag <p>) é …

question mark

Por padrão, os elementos podem ser exibidos em uma página da web em qualquer ordem que o navegador escolher.

Select the correct answer

question mark

Quais são os dois principais tipos de elementos?

Select the correct answer

question mark

Parágrafo (tag <p>) é …

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 4
some-alt