Modelo de formato visual CSS

Regla face

El modelo de formato visual generalmente explica cómo procesar los elementos en el árbol del documento para medios visuales como las pantallas de computadoras.

Modelo de formato visual de CSSEl modelo de formato visual de CSS es un algoritmo utilizado para procesar documentos de medios visuales. En el modelo de formato visual, cada elemento en el árbol del documento se procesa segúnModelo de cuadro

Generar cero o más cuadros.

• El diseño de estos cuadros depende de los siguientes factores:

• Tamaño de la caja.

• El tipo de elemento (bloque o en línea).Plan de posicionamiento (flujo normal,FlotaciónyPosicionamiento absoluto

• )

• Las relaciones entre los elementos en el árbol del documento.

El árbol del documento es la jerarquía de elementos codificados en el documento fuente. Cada elemento en el árbol del documento tiene un solo elemento padre, excepto el elemento raíz.

Tipos de cuadros generados por CSS

Cada elemento que se muestra en una página web genera un cuadro rectangular. A continuación, se describe el tipo de cuadros que pueden generarse por los elementos.

Elementos de bloque y cuadros de bloqueLos elementos de bloque son aquellos que se formatean visualmente como bloques (es decir, ocupan toda la anchura disponible) y tienen saltos de línea antes y después del elemento. Por ejemplo, elementos de párrafo (<p>et al. dentro de título (1<h - et al. dentro de título (6<h>et al. dentro de separación (<div>

Por lo general, los elementos de bloque pueden contener elementos en línea y otros elementos de bloque. (

Elementos en línea y cuadros en línea

Los elementos en línea son aquellos que no constituyen nuevos bloques de contenido en el documento fuente; el contenido se distribuye por filas. Por ejemplo, párrafos (<em>et al. dentro de span (<span>et al. dentro de elementos fuertes (<strong>et al. dentro de texto en negrita.

Los elementos en línea suelen contener solo texto y otros elementos en línea.

Puede usar la propiedad display de CSS para cambiar la forma en que un elemento se muestra en una página web. Usted encontraráEn el siguiente capítuloConozca la propiedad display.