rectángulos everywhere....

introducción al diseño web

• Todos los elementos son rectángulos
• Mobile First
• Mantener una rejilla uniforme
• ... el modelo de caja

Principios de diseño

Mantener el modelo de caja es útil para simplificar el proceso de maquetación

Cajas dentro de cajas....

Más allá de lo obvio

• Las coordenadas X crecen hacia la derecha
• Las coordenadas Y crecen hacia abajo
• Las coordenadas Z crecen hacia afuera del monitor

Posicionamiento

• Propiedades width y height
• Tipo de cada elemento
• Posicionamiento de la caja
• Relaciones entre los elementos
• Otro tipo de información

La propiedad position cambia el posicionamiento.

Factores principales

Normal

• También conocido como estática
• El elemento se queda en la posición que le corresponde

Relativa

• Nos permite mover un elemento relativo a sus coordenadas

position: static

position: relative

Fija

• El elemento se queda siempre en pantalla en la posición establecida

Absoluto

• Las coordenadas de un elemento indican su posición respecto a todo el documento
• Se puede usar en conjunto con la posición relativa

position: fixed

position: absolute

Flotante

• Hace que un elemento flote sobre otros y que deje su espacio libre para que otros elementos puedan tomarlo

Pegadiza

• Hace que un elemento flote sobre otros y que deje su espacio libre para que otros elementos puedan tomarlo

propiedad float

position: sticky

construyendo layouts

• Simetría
• Accesibilidad
• Usabilidad
• Estética
• Arquitectura de información

La propiedad display cambia el layout de un elemento.

Factores principales

En línea

• Los elementos toman únicamente el espacio necesario.
• Las propiedades width y height no tienen efecto

Bloque

• El elemento inicia en una nueva fila y toma todo el ancho disponible

display: inline

display: block

Contents

• Hace "desaparecer" al elemento
• Sus hijos pasan a ser hijos del elemento superior más próximo

Item de lista

• El elemento se comporta como un elemento <li>

display: contents

display: list-item

Tablas

• Hace que los elementos se acomoden como en una tabla de datos.
• El elemento se comporta como un elemento <table>, y sus hijos

display: table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row

Flexbox

• Se comporta como un bloque
• Sus hijos se distribuyen a lo largo de un eje y se alinean a lo largo de otro

Grid

• Se comporta como bloque
• Sus hijos pueden distribuirse a lo largo de los ejes x,y con espacios parametrizables

display: flex

display: grid