Fluxo: forma como os elementos, em bloco ou inline são dispostos na página. Serão apresentados da forma que foram declarados dentro do documento xhtml. Para entender bem, é necessário que os
conceitos aprendidos em html sobre box inline e bloco estejam suficientemente claros.
div, h1, h2...h6, p de parágrafo, bloquote.
Esses elementos geram quebra de linha acima e abaixo do texto.
strong, b, em, imagem,(também é um elemento inline), texto, span.
Não geram quebra de linha.
Na folha de estilo ficaria assim:
em, b{
border:1px solid black;
}
span{
border:3px solid red;
}
O posicionamento pode ser:
Se não for definido nenhum posicionamento, funcionará o padrão do browser. Nesse caso somente os elementos inline poderão ter a posição modificada.
O posicionamento feito com float tem regras diferentes. O box será retirado do lugar e ocupará a posição left ou right, dependendo do que foi estipulado à direita ou esquerda. Este posicionamento é usado para menu drop down. Como no exemplo abaixo:
Na folha de estilo ficaria assim:
li{
margin: 25px; /*separa um box de menu do outro*/
color:#990000; /*vermelho escuro*/
font-size: 24px;
font-style:italic;
float:left;
width:150px;
border:2px dotted black;
list-style:none; /*retira a marcação de lista. As bolinhas*/
}
No posicionamento absoluto, há uma liberação de espaço para o próximo elemento ocupar.
A propriedade position tem como finalidade colocar o elemento fora da posição original.
A propriedade float faz o objeto flutuar à esquerda ou à direita do restante do conteúdo.
/*.clearfix usado para adicionar um espaço vazio antes e depois dos elementos evitando que os floats se aglomerem.*/CSS usa o espaço tri-dimensional - altura, largura e profundidade. Os elementos em layers (camadas) dessa forma se sobrepõem uns aos outros. Para que isso seja possível definir para cada elemento um número índice (z-index). O resultado é que os elementos com índice maior irão se sobrepor àqueles com menor número.