Introducción al modelo de formato visual

En este artículo, veremos el modelo de formato visual, es decir, cómo el agente de usuario procesa el árbol del documento y cómo se procesa y visualiza en los diversos medios. Comprenderemos el tema a través de las ilustraciones.

El modelo de formato visual ilustra cómo el agente de usuario toma el árbol del documento que se está procesando y procesa el árbol del documento procesado en los diversos medios visuales. En otras palabras, verifica si todo en la página web está colocado correctamente o no, lo que garantiza que el diseño de la página se muestre correctamente. Para representar la página, el navegador utiliza este modelo. Esto funciona en el algoritmo que calcula y usa un montón de cosas como el modelo de caja, los flotadores y el posicionamiento para representar la página de la manera más adecuada. Los medios visuales pueden ser medios continuos o medios paginados que se utilizan para mostrar los datos requeridos en el medio particular. Cada elemento genera cero o más cajas en el documento, según el Modelo de Caja. El trabajo del modelo de formato visual comienza cuando el navegador ya analiza el HTML y el CSS y tenemos el árbol de representación. El diseño de estas cajas depende de lo siguiente:

• Dimensiones y tipo de caja
• Esquema de posicionamiento (flujo normal, flotante y posicionamiento absoluto)
• Relaciones entre elementos en el árbol del documento
• Información externa (p. ej., tamaño de la ventana gráfica, dimensiones intrínsecas de las imágenes, etc.)

Ventana gráfica: define el área visible para la ventana del navegador en particular en los medios continuos, es decir, el área de visualización variará con el cambio del diseño del dispositivo y, en consecuencia, la ventana gráfica de la página también cambiará. El cambio en la ventana gráfica incluye cambiar el tamaño de la ventana o cambiar la orientación de un dispositivo móvil. Si el tamaño del documento es más grande que la ventana gráfica, el usuario puede obtener la barra de desplazamiento del navegador, que mostrará la parte restante del documento. La barra de desplazamiento se puede incluir verticalmente en una horizontal o de arriba a abajo.

Generación de cuadros: indica la parte del modelo de formato visual que ayuda a generar los cuadros de diferentes tipos para los elementos del documento, lo que afecta el formato visual y depende del valor de la propiedad de visualización de CSS . Un documento de origen CSS se representa en un lienzo utilizando la estructura intermedia, denominada árbol de caja, que representa la estructura de formato del documento representado. Este árbol Box, a su vez, representa el elemento (o pseudo-elemento) correspondiente en el lienzo, mientras que cada ejecución de texto indica el contenido de sus respectivos Nodes de texto.

La Generación Box se compone de las siguientes categorías:

• Caja principal : Es la de la caja generada por un elemento, que contiene sus cajas descendientes en el árbol de cajas y también la caja involucrada en un esquema de posicionamiento. Además del cuadro principal, algunos elementos pueden generar cuadros adicionales (como mostrar: elemento de lista, que genera un cuadro de bloque principal y un cuadro de marcador secundario.
• Cuadro anónimo : cuando no hay ningún elemento HTML que se pueda usar para el cuadro, se generará el cuadro anónimo. Generalmente sucede cuando, por ejemplo, declaramos la propiedad display:flex en un elemento principal, y directamente dentro de ese elemento, hay una secuencia de texto que no está contenida en otro elemento. Para solucionar el problema, se creará un cuadro anónimo que rodeará ese texto, que luego se comporta de manera similar al elemento flexible. Aunque, no hay ningún elemento al que apuntar, que está dirigido y tiene un estilo similar a un cuadro normal.
• Caja de línea : Indica la caja que envuelve cada línea de texto. 

Esquemas de posicionamiento de un elemento: Hay 3 esquemas de posicionamiento que ofrece box en CSS, es decir, flujo normal, flotantes o posicionamiento absoluto.

• Flujo normal: incluye el formateo a nivel de bloque de las cajas de bloque, el formato a nivel de línea de las cajas en línea, junto con el posicionamiento relativo y fijo de las cajas a nivel de bloque y a nivel de línea.
• Flotadores : en este tipo de modelo, la caja se alinea inicialmente de acuerdo con el flujo normal, luego se retira y se coloca, generalmente de izquierda a derecha, junto con su contenido.
• Posicionamiento absoluto : el modelo de posicionamiento absoluto (y posicionamiento fijo) elimina por completo la caja del flujo normal y le asigna una posición dentro de un bloque contenedor.

Ejemplo 1: suponga que diseñó la página web a continuación, todo lo relacionado con el diseño, como el tamaño del cuadro, el posicionamiento del cuadro, la ventana gráfica, etc., está determinado por el modelo de formato visual.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <title>Visual Formatting Model</title>
    <link rel="preconnect" href=
"https://fonts.gstatic.com" />
    <link href=
"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" 
          rel="stylesheet" />
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
            margin: 0;
            background-color: rgb(0, 0, 0);
        }
  
        a {
            text-decoration: none;
        }
  
        #main-header {
            height: 5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgb(255, 254, 253);
            padding: 0 5%;
        }
  
        #logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: rgb(40, 149, 23);
        }
  
        main h1 {
            text-align: center;
            color: rgb(40, 149, 23);
            font-size: 3rem;
        }
  
        #latest-products {
            width: 80%;
            margin: 2rem auto;
        }
  
        #latest-products ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
  
        .item {
            background-color: rgb(228, 206, 182);
            border-radius: 6px;
            overflow: hidden;
        }
  
        .item img {
            height: 22rem;
            width: 100%;
            object-fit: cover;
        }
  
        .item-content {
            padding: 1rem;
            text-align: center;
        }
  
        .item h2 {
            margin: 0 0 1rem 0;
        }
  
        @media (max-width: 48rem) {
            #latest-products ul {
                grid-template-columns: 100%;
            }
  
            main h1 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
  
<body>
    <header id="main-header">
        <a href="index.html" id="logo">
            GeeksforGeeks
        </a>
    </header>
    <main>
        <h1>GeeksforGeeks Article</h1>
        <section id="latest-products">
            <ul>
                <li class="item">
                    <article>
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220719215237/gfg-300x300.jpg" />
                        <div class="item-content">
                            <h2>GeeksforGeeks</h2>
                        </div>
                    </article>
                </li>
                <li class="item">
                    <article>
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220719215237/gfg-300x300.jpg" />
                        <div class="item-content">
                            <h2>GeeksforGeeks</h2>
                        </div>
                    </article>
                </li>
            </ul>
        </section>
    </main>
</body>
</html>

Producción:

 

Ejemplo 2: el navegador considera los elementos de la página web como cuadros y los coloca en consecuencia, como se muestra en el siguiente ejemplo.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <title>Visual Formatting Model</title>
    <style>
        * {
            margin: 0;
            box-sizing: border-box;
        }
  
        body {
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
  
        h1 {
            color: green;
            position: fixed;
            top: 0;
            left: 0;
            padding: 22px;
        }
  
        .box {
            border: 2px solid rgb(0, 0, 0);
            padding: 50px;
        }
  
        .parent-box {
            width: 500px;
            height: 600px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            border: 2px solid rgb(0, 0, 0);
            padding: 50px;
        }
  
        #big-box {
            height: 400px;
            width: 400px;
            background-color: rgb(140, 68, 68);
        }
  
        #div-1 {
            position: relative;
            left: 250px;
            height: 150px;
            width: 150px;
            background-color: black;
        }
  
        #div-2 {
            position: relative;
            left: 125px;
            height: 150px;
            width: 150px;
            background-color: rgb(51, 141, 10);
        }
  
        #div-3 {
            height: 150px;
            width: 150px;
            background-color: rgb(255, 0, 0);
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <div class="box">
        <div id="big-box"></div>
    </div>
    <div class="parent-box">
        <div id="div-1"></div>
        <div id="div-2"></div>
        <div id="div-3"></div>
    </div>
</body>
</html>

Producción:

Página web

Solo podemos dar instrucciones y valores en cualquier unidad, pero en última instancia, el navegador decidirá el lugar correcto para insertar el contenido de acuerdo con el algoritmo que calcula un montón de cosas como el modelo de caja, los flotadores y el posicionamiento para representar la página de la manera más adecuada. .