Arquitectura de Entornos

Web
Unidad 3: Estructuras y bloques
Tema 5: Modelo de cajas y posicionamiento CSS
Semanas 07 - 09
Tema 5: Modelo de cajas y posicionamiento CSS

2
Índice
3.1. Tema 5: Modelo de cajas y posicionamiento CSS
3.1.1. Modelo de cajas
3.1.2. Posicionamiento de cajas: estático, relativo, absoluto, flotante;
visualización: display, visibility, overflow, z-index
3.1.3. Etiquetas estructurales: header, nav, aside, main, section, article, footer
3.1.4. Etiquetas flexibles: box-sizing, flexible box layout, grid

3
Capacidades
• Diseña páginas web utilizando etiquetas HTML5, CSS3 y bloques.

4
Introducción
• En este capítulo aprenderá a diseñar páginas web utilizando el modelo de cajas, definiendo el posicionamiento y
visualización de los elementos dentro de la página web.

5
3.1 Modelo de cajas y posicionamiento CSS

6
3.1.1 Modelo de cajas
• El modelo de cajas es la característica más importante de las hojas de estilos CSS, ya que condiciona el diseño de
todas las páginas web.
• Este modelo de cajas hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

7
3.1.1 Modelo de cajas: componentes
Componente Definición

Contenido (content) Se trata del contenido HTML del elemento (las palabras de
un párrafo, una imagen, el texto de una lista de elementos,
etc.)
Relleno (padding) Espacio libre opcional existente entre el contenido y el
borde
Borde (border) Línea que encierra completamente el contenido y su
relleno
Imagen de fondo Imagen que se muestra por detrás del contenido y el
(background image) espacio de relleno.
Color de fondo (background Color que se muestra por detrás del contenido y el espacio
color) de relleno.
Margen (margin) Separación opcional existente entre la caja y el resto de
cajas adyacentes

8
3.1.1 Modelo de cajas: ancho y alto
• Ancho (width): controla el ancho de la caja, puede estar expresado en pixeles, porcentaje, etc.
Por ejemplo.- width: 200px
• Alto (height): controla la altura de la caja, puede estar expresada en pixeles, porcentaje, etc.
Por ejemplo.- height: 100px

MUNDO 100px

200px

9
3.1.1 Modelo de cajas: margen, borde y relleno
margin

border

padding

MUNDO height

width
10
3.1.1 Modelo de cajas: margen, borde y relleno
margin-top

border-top

padding-top

padding-right

margin-right
border-right
padding-left
margin-left

border-left MUNDO
padding-bottom

border-bottom

margin-bottom

11
3.1.1 Modelo de cajas: margen

Propiedades extendidas
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;

1
Propiedades resumidas
margin: 20px 20px 20px 20px; 4 2
3
1
Propiedades resumidas
4 2
margin: 20px;
3
12
3.1.1 Modelo de cajas: margen

Propiedades extendidas
margin-top: 20px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 5px;

1
Propiedades resumidas
margin: 20px 5px 20px 5px; 4 2
3
1
Propiedades resumidas
2
margin: 20px 5px;

13
3.1.1 Modelo de cajas: margen

Propiedades extendidas
margin-top: 20px;
margin-right: 5px;
margin-bottom: 40px;
margin-left: 5px;

1
Propiedades resumidas
margin: 20px 5px 40px 5px; 4 2
3
1
Propiedades resumidas
2
margin: 20px 5px 40px;
3
14
3.1.1 Modelo de cajas: borde

Propiedades extendidas
border-width: 5px;
border-style: solid;
border-color: red;

Propiedades resumidas
border: 5px solid red;

15
3.1.1 Modelo de cajas: borde

Propiedades extendidas
border-bottom-width: 5px;
border-bottom-style: solid; border-bottom
border-bottom-color: red;

Propiedades resumidas
Border-bottom: 5px solid red;
border-bottom

16
3.1.1 Modelo de cajas: relleno

20
_25 30

40

20 30 40 40 30 20

40

30

20

17
3.1.1 Modelo de cajas: atributo display

18
3.1.1 Modelo de cajas: atributo display

19
3.1.2 Posicionamiento de cajas
• Para cumplir con el modelo de cajas, los navegadores crean una caja para representar a cada elemento de la
página.
• Los factores que se tienen en cuenta para generar cada caja son:
• Las propiedades width y height de la caja establecidas.
• Tipo de selector: etiqueta, id, clase, etc.
• Posicionamiento de la caja (normal, relativo, absoluto, fijo o flotante).

20
3.1.2 Posicionamiento de cajas
• Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML.
• No obstante, CSS permite al diseñador modificar la posición en la que se muestra cada caja para realizar efectos
muy avanzados y diseñar estructuras de páginas que de otra forma no serían posibles.

21
3.1.2 Posicionamiento de cajas

Tipo de Descripción
posicionamiento

Estático Posicionamiento por defecto que utilizan los navegadores.

Relativo Consiste en posicionar una caja de su posición original a través de
las propiedades: top, right, botton y left.
Absoluto La posición de la caja se establece de forma absoluta respecto de su
elemento contenedor y el resto de los elementos ignorar la posición
del elemento.
Fijo Convierte una caja en un elemento inamovible de modo que su
posición es independiente del resto de los elementos.
Flotante Desplaza las cajas todo lo posible hacia la izquierda o derecha de la
línea en la que se encuentran.

22
3.1.2 Posicionamiento de cajas: visualización
• Junto con las propiedades que controlan el posicionamiento de los elementos, CSS define cuatro propiedades
para controlar su visualización: display, visibility, overflow y z-index.
• Utilizando estas propiedades es posible ocultar y/o hacer invisibles las cajas de los elementos, para realizar efectos
avanzados y animaciones.

23
3.1.2 Posicionamiento de cajas: visualización
Tipo de Descripción
visualización

Oculta completamente un elemento, donde el resto de elementos de la

Display página se mueven para ocupar su lugar.
Valores: none, display, inline, inline-block, block, table, etc.
Permite hacer invisible un elemento (no se muestra), donde el resto de
Visibility elementos de la página no modifican su posición, ocupa su sitio.
Valores: visible, hidden, collapse, inherit
Permite controlar la forma en la que se visualizan los contenidos que
sobresalen de sus elementos y evitar que su espacio reservado para ese
Overflow
elemento se desborda.
Valores: visible, hidden, scroll, auto
Establece la posición tridimensional (eje Z) de un elemento. A través de esta
Z-index
propiedad es posible crear páginas complejas con varias capas.

24
3.1.3 Etiquetas estructurales
• Para distribuir mejor el contenido de una página se han definido en etiquetas estructurales.
• La razón para trabajar con etiquetas estructurales es dividir una página web en partes lógicas que describan el
tipo de contenido que incluyen. La maquetación en HTML5 poco a poco se impone en el desarrollo web actual.

header
body
nav

main

article

aside
section
article

footer
25
3.1.3 Etiquetas estructurales
Etiqueta Descripción

Es un contenedor que forma la cabecera de la página: con un logotipo o

<header>
gráfico de la compañía, el título de página principal, etc.
Es utilizado para demarcar una sección que contiene los enlaces a otros
<nav>
contenidos o secciones.
Sirve para definir el contenido principal o más destacado del DOM. Sólo
<main>
puede haber una etiqueta <main> en la página.
<aside> Barra lateral en la que se colocan barras de navegación vertical, publicidad.
Representa un bloque que tiene valor semántico, es decir, que aporta un
<section>
significado a la página, es decir, el cuerpo de la página.
Es una caja de contenido para separar o clasificar, generalmente está dentro
<article>
del <section>.
<footer> Pie de página de la pagina web.

26
3.1.3 Etiquetas estructurales
• Por defecto, todas las etiquetas estructurales (main, header, nav, section, aside, article y footer) son elementos
de bloque.

header

nav

aside

main

section

article

footer

27
3.1.4 Etiquetas flexibles
• Box-sizing: permite cambiar cómo el espacio total ocupado por un elemento en pantalla será calculado forzando a
los navegadores a incluir en el ancho original los valores de las propiedades padding y border.
• Flexible box layout: está especialmente diseñado para crear, mediante CSS, estructuras de una sola dimensión.
Para activar el modo flexbox, utiliza la propiedad display y especificar el valor flex o inline-flex dependiendo de
cómo desees que se comporte el contenedor.
• Grid: para activar la cuadrícula grid, utiliza sobre el elemento contenedor la propiedad display y especificar el valor
grid o inline-grid. Este valor influye en cómo se comportará la cuadrícula con el contenido exterior.

28
3.1.4 Etiquetas flexibles: selector id

• Permite establecer características que prevalecerán en toda la

página web. Debe ir dentro de una etiqueta <div>. Ejemplo:

29
3.1.4 Etiquetas flexibles: cajas flotantes

caja no flotante
float: left; float: right;

caja no flotante

30
3.1.4 Etiquetas flexibles: cajas flexibles
#contenedor {
display: flex;
flex-direction: column;
}

contenedor

31
3.1.4 Etiquetas flexibles: cajas flexibles
#contenedor {
display: flex;
flex-direction: row;
}

contenedor

32
3.1.4 Etiquetas flexibles: cajas flexibles
etiquetaEstructural {
display: flex;
flex-direction: row;
justify-content: flex-start;
}

justify-content: flex-start;;

33
3.1.4 Etiquetas flexibles: cajas flexibles
etiquetaEstructural {
display: flex;
flex-direction: row;
justify-content: flex-end;
}

justify-content: flex-end;;

34
3.1.4 Etiquetas flexibles: cajas flexibles
etiquetaEstructural {
display: flex;
flex-direction: row;
justify-content: center;
}

justify-content: center;;

35
3.1.4 Etiquetas flexibles: cajas flexibles
etiquetaEstructural {
display: flex;
flex-direction: row;
justify-content: space-around;
}

justify-content: space-around;;

36
3.1.4 Etiquetas flexibles: cajas flexibles
etiquetaEstructural {
display: flex;
flex-direction: row;
justify-content: space-between;
}

justify-content: space-between;;

37
3.1.4 Etiquetas flexibles: cajas flexibles
etiquetaEstructural {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}

flex-wrap: wrap;;
38
Conclusiones
• El modelo de cajas es la característica más importante de las hojas de estilos CSS. Este modelo de cajas hace que
todos los elementos de las páginas se representen mediante cajas rectangulares.
• Todo elemento (expresado como una caja) esta conformado por: width, height, margin, padding, border, content
y background-image.
• Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML; CSS
permite al diseñador modificar la posición en la que se muestra cada caja para realizar efectos muy avanzados y
diseñar estructuras de páginas que de otra forma no serían posibles.
• Entre los tipos de posicionamiento existen: estático, fijo, relativo, absoluto y flotante.
• Junto con las propiedades que controlan el posicionamiento de los elementos, CSS define cuatro propiedades
para controlar su visualización: display, visibility, overflow y z-index. Utilizando estas propiedades es posible
ocultar y/o hacer invisibles las cajas de los elementos, para realizar efectos avanzados y animaciones.

39
Conclusiones
• Para distribuir mejor el contenido de una página se han definido en etiquetas estructurales.
• La razón para trabajar con etiquetas estructurales es dividir una página web en partes lógicas que describan el
tipo de contenido que incluyen: header, nav, main, aside, section, article, footer.

40
Referencias bibliográficas
 Acera Garcia, M.A. (2012). CSS3. Madrid: Anaya Multimedia

Centro de Información: Código 006.7 ACER

 Álvarez Garcia, A. (2012). Manual imprescindible de HTML. Madrid : Anaya Multimedia.

Centro de Información: Código 006.74HTML ALVA/M

 Gauchat, J.D (2019). El gran libro de HTML5, CSS3 y JavaScript. 3ra Edición. Barcelona:Marcombo. Recuperado de
https://elevaciondigital.pe/wp-content/uploads/2019/06/El-gran-libro-de-HTML5-CSS3-y-JavaScript.pdf

• JL. Curso de HTML. (s.f.). Recuperado de https://www.uv.es/jbosch/PDF/Curso%20de%20HTML.pdf

• Sanchez, J. (2003). HTML Guía práctica de referencia. Recuperado de

http://www.aragonemprendedor.com/archivos/descargas/manual_rapido_html.pdf

41
 GRACIAS

SEDE MIRAFLORES SEDE INDEPENDENCIA SEDE BREÑA SEDE TRUJILLO

Calle Diez Canseco Cdra. 2 / Pasaje Tello Av. Carlos Izaguirre 233 Av. Brasil 714 – 792 Calle Borgoño 361
Miraflores – Lima Independencia – Lima (CC La Rambla – Piso 3) Trujillo
Teléfono: 633-5555 Teléfono: 633-5555 Breña – Lima Teléfono: (044) 60-2000
Teléfono: 633-5555

SEDE SAN JUAN DE LURIGANCHO SEDE LIMA CENTRO SEDE BELLAVISTA SEDE AREQUIPA
Av. Próceres de la Independencia 3023-3043 Av. Uruguay 514 Av. Mariscal Oscar R. Benavides 3866 – 4070 Av. Porongoche 500
San Juan de Lurigancho – Lima Cercado – Lima (CC Mall Aventura Plaza) (CC Mall Aventura Plaza)
Teléfono: 633-5555 Teléfono: 419-2900 Bellavista – Callao Paucarpata - Arequipa
Teléfono: 633-5555 Teléfono: (054) 60-3535

www.cibertec.edu.pe