1em 2em 3em 4em } Modelo de formtacao visual Modulo de formatacao visual Propriedade Descricao Valores Descricao / Exemplos display Modos de exibicao do conteudo [ inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none ] inline: O elemento renderizado em uma ou mais linhas block: renderizado como um bloco list-item: renderizado como um item de lista e em linha(s) run-in: renderizado como bloco ou linha(s), dependendo do contexto inline-block: renderizado em uma linha simples, mas comporta-se como um bloco table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption: esses valores farao com que o elemento se comporte como uma tabela (sujeito a restricoes descritas no capitulo sobre tabelas) none: o elemento nao sera mostrado no modo visual Exemplo: e {display: none;} position Esquema de posicionamento [ static | relative | absolute | fixed ] static: Posicionamento normal de acordo com o fluxo normal dos elementos na pagina. As proprieades 'top', 'right', 'bottom', e 'left' nao se aplicam relative: posicionamento e calculado de acordo com o fluxo normal. O efeito de 'position:relative' e indefinido nos elementos 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', e 'table-caption' absolute: Posicionamento (e possivelmente o tamanho) e especificado com as propriedades 'top', 'right', 'bottom', e 'left'. Essas propriedade sao especificadas em relacao ao conteudo do bloco fixed: Posicionamento e calculado tal como o modelo 'absolute', mas adicionalmente se mantera fixo, mesmo que se utilize a barra de rolagem Exemplo: @media screen { e#exemplo {position: fixed; }} @media print { e#exemplo {position: static;}} top right bottom left Distancia do elemento com relacao a extremidade de seu elemento-pai [ | | auto ] top: Distancia vertical em relacao a margem superior right: Distancia horizontal em relacao a margem direita bottom: Distancia vertical em relacao a margem inferior left: Distancia horizontal em relacao a margem esquerda Exemplo: e { top: 20px; left: 40px;} float Posicionamento adjacente a esquerda ou a direita do elemento { left | right | none ] left: o elemento sera posicionado flutuando a esquerda. O fluxo do conteudo nao integrante do elemento sera posicionado a direita a partir do 'top' do elemento que recebe a propriedade 'float' right: similar a 'left', mas com o elemento flutuando a direita none: o elemento nao flutua Exemplo: e {float: right;} clear Controle para os posicionamentos float [ none | left | right | both ] none: nenhum controle de limpeza de flutuacao sera executado left: limpeza de flutuacao a esquerda: o elemento sera posicionado abaixo da borda inferior do elemento flutuante a esquerda right: limpeza de flutuacao a direita: o elemento sera posicionado abaixo da borda inferior do elemento flutuante a direita both: o elemento sera posicionado abaixo da borda inferior de qualquer elemento flutuante, seja a direita ou a esquerda Exemplo: e { clear: both;} z-index Niveis de profundidade de sobreposicao de elementos [ auto | ] Os numeros serao considerados para ordenar os elementos que ficarao sobrepostos, do mais baixo para o mais alto: