Scribd
Cargar
62 vistas13 páginas

02 VisualFormattingModel

Este documento describe los conceptos básicos del modelo de formato visual en HTML y CSS. Explica que los elementos pueden ser de nivel de bloque u en línea, y que generan cajas de bloque u en línea respectivamente. Las cajas son dibujadas según el flujo normal, ya sea en un contexto de formato de bloques o en línea. El elemento contenedor actúa como caja contenedora para sus elementos descendientes.

Cargado por

Alexander Ramirez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
62 vistas13 páginas

02 VisualFormattingModel

Este documento describe los conceptos básicos del modelo de formato visual en HTML y CSS. Explica que los elementos pueden ser de nivel de bloque u en línea, y que generan cajas de bloque u en línea respectivamente. Las cajas son dibujadas según el flujo normal, ya sea en un contexto de formato de bloques o en línea. El elemento contenedor actúa como caja contenedora para sus elementos descendientes.

Cargado por

Alexander Ramirez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 13

Universidad Nacional del Litoral

Facultad de Ingeniería y Ciencias Hídricas


Departamento de Informática

Programación Web II

01-Visual Formatting Model

© 2023
MSc. Lic. Hugo Minni

Tecnicatura en Informática Aplicada al Diseño


Multimedial y de Sitios Web

Programación Web II - Visual Formatting Model Pág. 1 de 13


MSc. Lic. Hugo Minni 2023
Visual formatting model

En esta sesión de estudio y la siguiente nos zambulliremos de pleno en los aspectos internos
de cómo son interpretados y dibujados los elementos HTML que hemos venido usando. La
terminología es un poco dura al principio, pero es necesaria para definir conceptos y
características basales de HTML y CSS.

Consideremos el siguiente documento HTML de ejemplo:

<html>
<head>

<Style>
body {
font: normal 66%/normal Verdana, Helvetica, Arial, sans-serif
normal normal;
width: 400px;
height: 400px;
border-right:1px dotted #BCBCBC;
border-bottom:1px dotted #BCBCBC;
}

div {
background-color: #DFE7F2;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

</Style>

</head>
<body>

<div id="contenido" ">


It is a Law of Nature with us that a
<span id="span1" style="background-color:yellow" >male</span> child
shall have one more
side than his father, so that each generation shall rise (as a
rule) one step in the scale of development and nobility. Thus the
son of a Square is a Pentagon; the son of a Pentagon, a Hexagon;
and so on.
</div>
</body>

</html>

Todos los elementos de HTML caen en una de dos categorías: block-level element o
inline-level element.

Programación Web II - Visual Formatting Model Pág. 2 de 13


MSc. Lic. Hugo Minni 2023
Elementos block-level

Block-level element

Block-level elements son aquellos elementos HTML de la página que el browser “dibuja”
como bloques. Los elementos <p> y <div> son ejemplos de block-level elements.

En el documento HTML del ejemplo, el elemento div es un block-level element. El


documento posee un ancho de 400px, y el elemento div ocupa todo el ancho que el
contenedor le deja disponible, conformando un bloque:

ancho del documento: 400px

Los elementos block-level generan block-level boxes.

Programación Web II - Visual Formatting Model Pág. 3 de 13


MSc. Lic. Hugo Minni 2023
Containing block
Cada box que es dibujada por el browser puede contener elementos. En nuestro documento
HTML de ejemplo, el body conforma una box de 401px por 401px:

Esta box a su vez contiene a nuestro elemento div, que al ser un elemento block-level
(que genera una block-level box) ocupa el ancho completo que le proporciona su
contenedor:

Se dice que la box del elemento body es el containing-block de la box del elemento div.

En HTML, toda box actúa como containing block para sus boxes descendientes.

Programación Web II - Visual Formatting Model Pág. 4 de 13


MSc. Lic. Hugo Minni 2023
Elementos inline-level

Inline-level element

Son aquellos elementos de la página que no forman nuevos bloques de contenido, sino
que el contenido es distribuido en líneas.
Elementos como <span> o <img> son ejemplos de inline-level elements.

En el documento HTML del ejemplo, el elemento span es un inline-level element. No ocupa


todo el ancho disponible como el elemento div, sino que se ubica en una línea ocupando el
espacio que requiere su propio tamaño:

Los elementos inline-level generan inline-level boxes.

Programación Web II - Visual Formatting Model Pág. 5 de 13


MSc. Lic. Hugo Minni 2023
Normal flow

Normal flow es la manera en que los elementos son ubicados en una página Web cuando
no son afectados por ningún posicionamiento exacto. (Veremos posicionamiento exacto más
adelante).

Cuando el browser “dibuja” elementos de acuerdo al normal flow, puede trabajar en dos
“contextos” de dibujo: si está dibujando block-level boxes trabaja en un contexto de
dibujo de bloques, llamado block formatting context. Si en cambio está dibujando inline-
level boxes trabaja en un contexto orientado a líneas, que se llama inline formatting
context.

Block formatting context

Block formatting context

En este contexto de dibujo el browser dibuja las boxes una después de la otra,
verticalmente, comenzando desde el extremo superior del containing block.

<div style="width:70%;border:solid thin black;">


Primer elemento DIV.
</div>

<div style="width:70%;border:solid thin black;">


Segundo elemento DIV.
</div>

<div style="width:70%;border:solid thin black;">


Tercer elemento DIV
</div>

Programación Web II - Visual Formatting Model Pág. 6 de 13


MSc. Lic. Hugo Minni 2023
 La distancia vertical entre dos boxes “apiladas” es determinada por las propiedades
margin:

<div style="width:70%;border:solid thin black;margin-bottom: 4px;">


Primer elemento DIV.
</div>

<div style="width:70%;border:solid thin black;margin-bottom: 4px;">


Segundo elemento DIV.
</div>

<div style="width:70%;border:solid thin black;">


Tercer elemento DIV
</div>

4px)

Programación Web II - Visual Formatting Model Pág. 7 de 13


MSc. Lic. Hugo Minni 2023
 En este formatting context, cuando los márgenes verticales entre dos boxes
adyacentes se tocan, CSS considera solamente el margen mayor. El margen de la
otra box es ignorado. Si ambos márgenes son iguales, considera sólo uno de los dos.
A esto se le denomina margin collapse.

<div style="width:70%;border:solid thin black;margin-bottom: 4px;">


Primer elemento DIV.
</div>

<div style="width:70%;border:solid thin black;margin-bottom: 4px;margin-


top:4px;">
Segundo elemento DIV.
</div>

<div style="width:70%;border:solid thin black;">


Tercer elemento DIV
</div>

4px

El primer elemento div posee un margin-bottom de 4 pixels. El segundo elemento


div posee un margin-top de 4 pixels. El margin final entre ambas boxes debería ser
de 8 pixels, pero CSS aplica margin collapse y define un margin de 4 pixels.

Programación Web II - Visual Formatting Model Pág. 8 de 13


MSc. Lic. Hugo Minni 2023
Inline formatting context

Inline formatting context

En este contexto de dibujo el browser dibuja las boxes una después de la otra construyendo
una línea. Comienza a constituir la línea desde el extremo superior del containing block.

<span style="width:70%;border:solid thin black;">


Primer elemento SPAN.
</span>

<span style="width:70%;border:solid thin black;">


Segundo elemento SPAN.
</span>

<span style="width:70%;border:solid thin black;">


Tercer elemento SPAN
</span>

Programación Web II - Visual Formatting Model Pág. 9 de 13


MSc. Lic. Hugo Minni 2023
 En este formatting context, la distancia horizontal entre dos boxes es determinada
por las propiedades margin:

<span style="width:70%;border:solid thin black;margin-right:4px">


Primer elemento SPAN.
</span>

<span style="width:70%;border:solid thin black;;margin-right:4px">


Segundo elemento SPAN.
</span>

<span style="width:70%;border:solid thin black;">


Tercer elemento SPAN.
</span>

 Cuando los márgenes horizontales entre dos boxes adyacentes se tocan, CSS no
aplica margin collapse.

<span style="width:70%;border:solid thin black;margin-right:4px">


Primer elemento SPAN.
</span>

<span style="width:70%;border:solid thin black;;margin-right:4px;margin-


left:4px">
Segundo elemento SPAN.
</span>

<span style="width:70%;border:solid thin black;">


Tercer elemento SPAN.
</span>

8px

El primer elemento span posee un margin-right de 4 pixels. El segundo elemento


span posee un margin-left de 4 pixels. El margin final entre ambas boxes es de 8
pixels.

Programación Web II - Visual Formatting Model Pág. 10 de 13


MSc. Lic. Hugo Minni 2023
Line box

Se denomina line box al área rectangular que contiene a las inline-level boxes que
constituyen una línea.

line box

 Cuando una inline-level-box excede el ancho de una line box, la misma es dividida en
varias inline-level-boxes y las mismas se distribuyen en varias line boxes:

<span style="width:70%;border:solid thin black;margin-right:4px">


It is a Law of Nature with us that a male child shall have one more
side than his father, so that each generation shall rise (as a
rule) one step in the scale of development and nobility. Thus the
son of a Square is a Pentagon; the son of a Pentagon, a Hexagon;
and so on.
</span>

<span style="width:70%;border:solid thin black;;margin-right:4px;


margin-left:4px">
Segundo elemento SPAN.
</span>

<span style="width:70%;border:solid thin black;">


Tercer elemento SPAN.
</span>

El browser crea line boxes a medida que es necesario para ubicar contenido inline-
level.

Programación Web II - Visual Formatting Model Pág. 11 de 13


MSc. Lic. Hugo Minni 2023
Conversión entre inline-level y block-level

Algo que no muchos saben es que CSS nos permite modificar a gusto la forma en que se va
a dibujar cualquier elemento HTML. Podemos convertir un elemento block-level en inline-
level y viceversa.

 Convertimos un elemento inline-level en block-level especificando para el una


propiedad display con un valor block:

<div id="contenido" style="width:70%;margin-right:4px">


It is a Law of Nature with us that a <span id="span1"
style="display:block;background-color:yellow">male</span> child
shall have one more side than his father, so that each
generation shall rise (as a rule) one step in the scale of
development and nobility.
Thus the son of a Square is a Pentagon; the son of a
Pentagon, a Hexagon; and so on.
</div>

Programación Web II - Visual Formatting Model Pág. 12 de 13


MSc. Lic. Hugo Minni 2023
 A la inversa, convertimos un elemento block-level en inline-level especificando para
el una propiedad display con un valor inline.

<div id="contenido" style="width:70%;display:inline;">


It is a Law of Nature with us that a male child shall have one more
side than his father, so that each generation shall rise (as
a rule) one step in the scale of development and nobility.
Thus the son of a Square is a Pentagon; the son of a
Pentagon, a;
and so on.
</div>

Si agregamos una propiedad line-height superior al texto apreciaremos mejor que


lo que antes era un bloque ahora es una gran línea quebrada en cuatro line boxes:

Programación Web II - Visual Formatting Model Pág. 13 de 13


MSc. Lic. Hugo Minni 2023

También podría gustarte