Modelo de Formato Visual (Modelo de Formato Visual) do CSS

O modelo de formatação visual geralmente descreve como os elementos na árvore do documento são processados para mídias visuais como telas de computador.

Modelo de Formatação Visual CSS

O modelo de formatação visual CSS é um algoritmo usado para lidar com documentos de mídia visuais. No modelo de formatação visual, cada elemento na árvore do documento éModelo de CaixaGera zero ou mais caixas.

A disposição dessas caixas depende dos seguintes fatores:

• Tamanho da caixa.

• Tipo de elemento (bloco ou linha).

• Plano de Alinhamento (fluxo normal,FlutuanteeAlinhamento Absoluto）

• Relações entre os elementos no documento.

• Informações externas, como o tamanho da viewport, o tamanho interno das imagens, etc.

Tipos de caixas geradas pelo CSS

Cada elemento exibido na página da web gera um retângulo. A seguir, descrevemos os tipos de caixas que podem ser geradas pelos elementos.

Elementos de bloco e caixas de bloco

Os elementos de bloco são aqueles que são formatados visualmente como blocos (ou seja, ocupam toda a largura disponível) e têm quebras de linha antes e após o elemento. Por exemplo, elementos de parágrafo (<p>e dentro de (<h1> - <h6>e dentro de (<div>e dentro de (

Geralmente, os elementos de bloco podem conter elementos de linha e outros elementos de bloco.

Elementos de linha e caixas de linha

Os elementos de linha são aqueles que não constituem novos blocos de conteúdo no documento de origem; o conteúdo é distribuído por linha. Por exemplo, parágrafos (<em>e dentro de (<span>e dentro de (<strong>e dentro de (

Os elementos de linha geralmente podem conter apenas texto e outros elementos de linha.

Você pode usar a propriedade display CSS para alterar a forma como o elemento é exibido na página da web. Você veráNo próximo capítuloEntenda a propriedade display.