Programación IV

(Web)
CONTENIDO

UNIDAD 2.

2. HOJAS DE ESTILOS CSS

2.5 Modelo de Cajas - CSS Box Model
 2. HOJAS DE ESTILOS CSS

2.5 Modelo de Cajas - CSS Box Model [6]

Todos los elementos HTML se pueden considerar como cuadros. En CSS, el término
"modelo de caja" se usa cuando se habla de diseño y maquetación.

El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML.
Consiste en: márgenes, bordes, relleno y el contenido real. La siguiente imagen ilustra
el modelo de caja:

Explicación de las diferentes partes:

Content: el contenido del cuadro, donde aparecen el texto y las imágenes.

Padding: limpia un área alrededor del contenido. El acolchado es transparente
Border: un borde que rodea el relleno y el contenido.
Margin: borra un área fuera del borde. El margen es transparente
El modelo de caja nos permite agregar un borde alrededor de los elementos y definir
el espacio entre los elementos.

Ejemplo # 1:
Ejemplo # 2
Ejercicio en clase
Para tener en cuenta: Ejemplos de elementos en línea:

 Todos los elementos de mi sitio web son rectángulos. <span>

 Existen elementos de tipo línea y de tipo bloque. <a>
 Los elementos en línea no tienen ancho ni alto, por lo tanto se debe forzar a <img>
convertirlos en elemento en bloque, con la propiedad display

CSS Layout - The display Property Display: none;

display:none; se usa comúnmente con JavaScript para ocultar y mostrar elementos sin
The display Property eliminarlos ni volver a crearlos.

La displaypropiedad especifica si / cómo se muestra un elemento. Override The Default Display Value - Anular el valor de visualización
predeterminado
Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de
elemento que sea. El valor de visualización predeterminado para la mayoría de los Cada elemento tiene un valor de visualización predeterminado. Sin embargo, puede
elementos es block o inline. anular esto.

Block-level Elements - Elementos a nivel de bloque Cambiar un elemento en línea a un elemento de bloque, o viceversa, puede ser útil para
hacer que la página se vea de una manera específica y aún así siga los estándares web.
Un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa todo el
ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como puede). Un ejemplo común es la creación de <li>elementos en línea para menús horizontales:

Ejemplo: Listas en líneas

Ejemplos de elementos a nivel de bloque:

<div>
<h1> - <h6>
<p>
<formulario>
<encabezado>
<pie de página>
<sección>

Inline Elements - Elementos en línea

Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario.
 Recuerda:

display: linline-block; convierte elementos a línea-bloque, es decir

que estén en línea, pero que sigan teniendo las características de un bloque,
por lo tanto puede tener más elementos o tags dentro de el.

dislay:inline; convierte elementos bloques a líneas

display:block; convierte elementos líneas a bloques

Ejemplo: Elemento <a> a bloque Ejemplo: Prueba el siguiente código, y observa lo que pasa, aunque no se ha visto el
lenguaje de programación JavaScript, pruébalo y mira su funcionalidad junto a CSS
 Luego, los elementos se colocan utilizando las propiedades superior, inferior,
izquierda y derecha. Sin embargo, estas propiedades no funcionarán a menos que
position se establezca primero. También funcionan de forma diferente según el valor
de la posición.

position: static;

Los elementos HTML se colocan estáticos de forma predeterminada.

Los elementos de posición estática no se ven afectados por las propiedades superior,
inferior, izquierda y derecha.

Un elemento con position: static;no se posiciona de ninguna manera especial; siempre

se posiciona de acuerdo con el flujo normal de la página:

Salida
Aquí está el CSS que se utiliza:

CSS Layout - The position Property

La position propiedad especifica el tipo de método de posicionamiento utilizado para
un elemento (estático, relativo, fijo, absoluto o fijo).

The position Property

La positionpropiedad especifica el tipo de método de posicionamiento utilizado para

un elemento.

Hay cinco valores de posición diferentes:

 static
 relative
 fixed
 absolute
 sticky
position: relative;
Un elemento con position: relative; está posicionado en relación con su posición
normal.
Establecer las propiedades superior, derecha, inferior e izquierda de un elemento en
una posición relativa hará que se ajuste lejos de su posición normal. El resto del
contenido no se ajustará para encajar en ningún espacio dejado por el elemento.
Ejemplo:
position: fixed;
Un elemento con position: fixed; está posicionado en relación con la ventana gráfica, lo
que significa que siempre permanece en el mismo lugar incluso si se desplaza la página.
Las propiedades superior, derecha, inferior e izquierda se utilizan para colocar el
elemento.
Un elemento fijo no deja un hueco en la página donde normalmente se habría ubicado.
Observe el elemento fijo en la esquina inferior derecha de la página. Aquí está el CSS
que se utiliza:
position: absolute;

Un elemento con position: absolute; está posicionado en relación con el antepasado

posicionado más cercano (en lugar de posicionado en relación con la ventana gráfica,
como fijo).

Sin embargo; si un elemento de posición absoluta no tiene antepasados de posición,

utiliza el cuerpo del documento y se mueve junto con el desplazamiento de página.

Nota: Un elemento "posicionado" es aquel cuya posición es cualquier cosa excepto

static.

He aquí un ejemplo sencillo:

position: sticky;

Un elemento con position: sticky;se posiciona según la posición de desplazamiento del

usuario.

Un elemento fijo alterna entre relativey fixed, según la posición de desplazamiento. Se

posiciona en relación hasta que se alcanza una posición de desplazamiento
determinada en la ventana gráfica, luego se "pega" en su lugar (como posición: fija).
 REFERENCIAS BIBLIOGRÁFICAS

[1] M. Contreras, Desarrollo de aplicaciones web móvil. 2018.

[2] A. Gomez, Julio y Alcayde, Construcción de paginas web, RA-MA Edit. 2018.
[3] “(18) ¿Qué es CSS? bien explicado - YouTube.” [Online]. Available:
https://www.youtube.com/watch?v=8cSo0ijtkzU. [Accessed: 31-Aug-2019].
[4] “El Modelo de Caja en CSS.” [Online]. Available:
https://desarrolloweb.com/articulos/modelo-caja-en-css.html. [Accessed:
31-Aug-2019].
[5] Uniwebsidad, “2.4. Herencia (Introducción a CSS).” [Online]. Available:
https://uniwebsidad.com/libros/css/capitulo-2/herencia. [Accessed: 05-Sep-
2019].
[6] Modelo de cajas. Recuperado de:
https://www.w3schools.com/css/css_boxmodel.asp