Voltar para o site

Modelo CSS para boxes - Parte 3

Publicado em: 10/06/2004

[Parte 1] [Parte 2]

Os blocos de conteúdo

Já sabemos que cada elemento nível de bloco cria uma caixa. Também já vimos que no centro de cada caixa existe o conteúdo.

Se o elemento contém elementos inline, então estes são exibidos dentro deste conteúdo.

Se ele contém outros elementos nível de bloco estes serão exibidos dentro da caixa "pai", como caixas "filho".

Para exibir um documento HTML o navegador cria uma caixa para o elemento <body> e coloca esta caixa no bloco de conteúdo viewport (a tela do monitor por exemplo).

Esta caixa com suas margens, bordas e espaçamentos é o bloco de conteúdo para todos os elementos nível de bloco que estão contidos no elemento <body>.

As caixas são colocadas uma após a outra em sequência. Se qualquer elemento tem um elemento nível de bloco "filho" este será colocado dentro do elemento "pai", repetindo-se esse processo até que não haja mais elemento para ser exibido.

Para exemplificar este conceito acompanhe o exemplo abaixo.

O elemento <body> contém:

  • um elemento cabeçalho <h3>;
  • um elemento <div>;
    • um elemento parágrafo 1;
    • um elemento parágrafo 2 ;
  • um elemento cabeçalho <h4>;
  • um elemento parágrafo 3;
    • um elemento <span>;

Abaixo o código HTML:

<body>
<h3>Conteúdo do cabeçalho</h3>
<div>
    <p>Conteúdo do primeiro parágrafo.</p>
    <p>Conteúdo do segundo parágrafo.</p>
</div>

<h4> Conteúdo do cabeçalho</h4>
    <p>Conteúdo do <span>terceiro</span> parágrafo.<p>
</body>

Observe um esquema do html na figura abaixo:

esquema de arvore mostrando pai-filho desde a tag html

E a seguir como o browser renderiza o código HTML:

Os dois cabeçalhos e tres parágrafos renderizados no browser e sem estilos aplicado

E agora o grande resumo final de tudo que foi estudado nestas três páginas do tutorial.

Acresentei propriedades CSS de bordas e margens coloridas nos elementos HTML do código, para você visualizar como as caixas se distribuem na aplicação do usuário (no caso o browser). Note caixas dentro de caixas e caixas após caixas como foi explicado no tutorial.

Se você entender com detalhes a figura abaixo, estará em condições de prosseguir com os assuntos de Posicionamento CSS e dar seu primeiro passo para o CSS avançado.

Os dois cabeçalhos e tres parágrafos renderizados e estilizados como caixas

[Parte 1] [Parte 2]

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo