Neste documento estaremos inserindo elementos tipo block e inline direto no body
do documento.
Para ver o mesmo efeito num container div veja a página 33-Browser Boxes-Inline e Box.html.
O leioute desta página é horrivel mas como ela tem o propósito de explicar algo que seria afetado pela formatação do bootstrap e css resolvi deixar ela assim mesmo.
O objetivo deste documento é mostrar como o browser exibe dinâmicamente os elementos do body, UM A UM.
Temos 2 tipos de elementos que podem ser adicionados: a Div (que é block) e o Span (que é inline)
Pontos Importantes :
•1-Elementos tipo bloco sempre ocupam a linha inteira do documento, sempre
do começo ao fim.
•2-Antes de renderizar um elemento tipo bloco o browser verifica se esta no
inicio da linha.
Se não estiver a renderização do elemento começará na próxima linha.
Sempre o elemento tipo bloco ocupara uma linha inteira.
•3-Note que na mudança de exibição de um elemento tipo bloco para um tipo inline existe uma margem.
Os elementos são criados apendando a tag no document ou body da página dinâmicamente ao pressionar o botão.
Os botões abaixo quando pressionados adicionam o elemento (appendChild) ao body do documento.
Com fundo colorido