O fluxo normal é a forma como os elementos são exibidos em uma página da web na maioria das circunstâncias. Todos os elementos em HTML estão dentro de caixas que são caixas embutidas ou caixas de bloco.
Disposição de caixas de bloco
No fluxo normal, as caixas de bloco são posicionadas em uma página, uma após a outra (na ordem em que são escritas no HTML). Eles começam na parte superior esquerda da caixa que os contém e são empilhados de cima para baixo. A distância entre cada caixa é definida pelas margens com as margens superior e inferior colapsando uma na outra. Por exemplo, você pode ter o seguinte HTML: Este é o primeiro div. Tem 200 pixels de largura com uma margem de 5 pixels ao redor.
Este é um div mais amplo. type = “code”> Cada
DIV é um elemento de bloco, portanto, será colocado abaixo do elemento de bloco anterior. Cada borda externa esquerda tocará a borda esquerda do bloco que o contém. Distribuindo Caixas Inline
As caixas embutidas são dispostas horizontalmente na página, uma após a outra, começando na parte superior do elemento contêiner. Quando não há espaço suficiente para caber todos os elementos da caixa embutida em uma linha, eles passam para a próxima linha e são empilhados verticalmente a partir daí. Por exemplo, no seguinte HTML: Este texto é negrito e este texto é itálico. E este é um texto simples.
type = “code”> O parágrafo é um elemento de bloco, mas existem 5 elementos embutidos:
- “Este texto é”
- “negrito”
- “e este texto é”
- “itálico”
- “. E este é um texto simples.”
Portanto, o fluxo normal é como esses elementos de bloco e embutidos serão exibidos na página da web sem qualquer intervenção do web designer. Se você deseja afetar a localização de um elemento em uma página, pode usar o posicionamento CSS ou flutuações CSS.
