HTML - Maquetación con CSS

Modelo de caja CSS

Para crear diseños usando CSS, necesitas entender el modelo de caja CSS. El navegador trata cada elemento HTML como una caja, y el modelo de caja describe cómo se dimensionan y espacian estas cajas.

El modelo de caja tiene cuatro partes principales: contenido, relleno, borde y margen. El área de contenido es donde se muestra el contenido real del elemento, como texto o imágenes. Alrededor del área de contenido está el relleno, que añade espacio entre el contenido y el borde. El borde es una línea que envuelve el relleno y el contenido, y puede tener un grosor, estilo y color. El margen es el espacio fuera del borde que separa el elemento de otros elementos en la página.

Por defecto, el tamaño de un elemento se calcula basándose en la caja de contenido, lo que significa que el ancho y alto especificados de un elemento solo se aplican al área de contenido. Sin embargo, puedes cambiar este comportamiento usando la propiedad box-sizing. Establecer box-sizing: border-box; incluye el relleno y el borde en el ancho y alto especificados, facilitando el control del tamaño general de un elemento.

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

El elemento .box tiene un área de contenido de 200 píxeles de ancho y 100 píxeles de alto. También tiene 20 píxeles de relleno en todos los lados, un borde negro sólido de 1 píxel y un margen de 10 píxeles en todos los lados. El ancho total del elemento sería de 242 píxeles (200px de contenido + 20px de relleno izquierdo + 20px de relleno derecho + 1px de borde izquierdo + 1px de borde derecho), y la altura total sería de 142 píxeles (100px de contenido + 20px de relleno superior + 20px de relleno inferior + 1px de borde superior + 1px de borde inferior).

Al cambiar los valores del contenido, relleno, borde y margen, puedes controlar el espaciado y diseño de los elementos en tu página web. El modelo de caja CSS es un concepto básico en el diseño web y entenderlo es necesario para crear diseños usando CSS.

Propiedad Display

La propiedad display en CSS controla cómo se muestra un elemento en la página web. Determina el tipo de caja que genera un elemento, cómo se organiza en relación con otros elementos y cómo se muestra su contenido. Los valores más comúnmente utilizados para la propiedad display son block, inline, inline-block, flex y grid.

Los elementos de nivel de bloque, como <div>, <p>, <h1> a <h6>, y <ul>, generan una caja de nivel de bloque. Estos elementos comienzan en una nueva línea, ocupan todo el ancho disponible por defecto y se apilan verticalmente uno tras otro. Puedes establecer las propiedades de ancho, alto, relleno, margen y borde para los elementos de nivel de bloque.

Los elementos en línea, como <span>, <a>, <strong>, y <em>, generan una caja de nivel en línea. Estos elementos no comienzan en una nueva línea y solo ocupan el ancho necesario para mostrar su contenido. Los elementos en línea fluyen dentro del texto y no alteran el diseño del contenido circundante. No puedes establecer el ancho, alto, márgenes superiores o inferiores, ni el relleno vertical para los elementos en línea.

Los elementos inline-block tienen características tanto de los elementos en línea como de los elementos de nivel de bloque. Fluyen en línea como los elementos en línea, pero pueden tener un ancho, alto, márgenes y relleno especificados como los elementos de nivel de bloque. Los elementos inline-block son útiles cuando quieres colocar elementos uno al lado del otro mientras aún puedes controlar sus dimensiones.

.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}

Flexbox y Grid son dos sistemas de diseño poderosos en CSS que ofrecen formas más avanzadas de crear diseños flexibles y responsivos.

Flexbox, o Diseño de Caja Flexible, es un sistema de diseño unidimensional que te permite crear diseños donde los elementos pueden crecer, encogerse y reordenarse basándose en el espacio disponible. Es adecuado para crear menús de navegación, diseños de tarjetas y otros componentes flexibles.

CSS Grid es un sistema de diseño bidimensional que te permite crear diseños complejos basados en cuadrículas con filas y columnas. Proporciona una manera de definir el tamaño y la posición de los elementos dentro de un contenedor de cuadrícula, facilitando la creación de diseños responsivos sin depender de flotantes o posicionamiento.

Tanto Flexbox como Grid se cubrirán con más detalle más adelante en este tutorial.

Al usar la propiedad display y sus diversos valores, puedes controlar cómo se muestran y distribuyen los elementos en tu página web. Entender las diferencias entre los elementos de bloque, en línea e inline-block, así como los fundamentos de Flexbox y Grid, te ayudará a crear diseños más flexibles y responsivos usando CSS.

Posicionamiento

El posicionamiento en CSS permite controlar la ubicación de elementos en una página web. Existen cinco tipos principales de posicionamiento: estático, relativo, absoluto, fijo y pegajoso.

El posicionamiento estático es el posicionamiento predeterminado para todos los elementos. Un elemento con position: static; no se posiciona de manera especial y sigue el flujo normal del documento. Los elementos estáticos no se ven afectados por las propiedades top, right, bottom o left.

El posicionamiento relativo permite mover un elemento en relación con su posición normal en el flujo del documento. Cuando se establece position: relative; en un elemento, se pueden usar las propiedades top, right, bottom y left para mover el elemento desde su posición normal. El espacio originalmente ocupado por el elemento permanece en el flujo del documento, y otros elementos no se ven afectados por el reposicionamiento.

.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

El posicionamiento absoluto elimina un elemento del flujo normal del documento y lo posiciona en relación con su ancestro posicionado más cercano o el bloque contenedor inicial si no existe un ancestro posicionado. Un elemento con position: absolute; puede ser posicionado usando las propiedades top, right, bottom y left. Otros elementos actuarán como si el elemento posicionado absolutamente no existiera en el flujo del documento.

.absolute {
  position: absolute;
  top: 50px;
  right: 20px;
}

El posicionamiento fijo es similar al posicionamiento absoluto, pero el elemento se posiciona en relación con la ventana del navegador en lugar de cualquier elemento contenedor. Un elemento con position: fixed; permanecerá en la misma posición incluso si se desplaza la página. Esto se usa a menudo para crear encabezados, pies de página o menús de navegación fijos.

.fixed {
  position: fixed;
  bottom: 20px;
  left: 20px;
}

El posicionamiento pegajoso es una combinación de posicionamiento relativo y fijo. Un elemento con position: sticky; actúa como un elemento posicionado relativamente hasta que alcanza un desplazamiento específico desde la ventana gráfica, momento en el que se "pega" en su lugar como un elemento fijo. Esto es útil para crear elementos que se adhieren a la parte superior de la pantalla cuando el usuario se desplaza más allá de cierto punto.

.sticky {
  position: sticky;
  top: 20px;
}

Al usar las diferentes técnicas de posicionamiento, puedes crear diseños complejos y posicionar elementos con precisión en tu página web. Es importante entender cómo funciona cada tipo de posicionamiento y cómo afecta al flujo del documento para elegir el método más apropiado para tu caso de uso específico.

Floats

Los floats fueron uno de los principales métodos para crear diseños en CSS antes de la introducción de Flexbox y Grid. La propiedad float permite posicionar elementos a la izquierda o derecha de su elemento contenedor, mientras que el contenido circundante se envuelve alrededor de ellos.

Para hacer flotar un elemento, puedes usar la propiedad float con un valor de left o right. Cuando un elemento flota, se elimina del flujo normal del documento y el contenido circundante fluye a su alrededor.

.float-left {
  float: left;
  margin-right: 20px;
}

.float-right {
  float: right;
  margin-left: 20px;
}

En el ejemplo anterior, el elemento .float-left se posicionará a la izquierda de su contenedor, y el elemento .float-right se posicionará a la derecha. Las propiedades margin-right y margin-left agregan algo de espacio entre los elementos flotantes y el contenido circundante.

Al usar floats, es importante limpiarlos adecuadamente para evitar problemas de diseño. Si un elemento contenedor solo tiene hijos flotantes, su altura se reducirá a cero ya que los elementos flotantes se eliminan del flujo normal del documento. Para solucionar esto, puedes usar la propiedad clear en un elemento después de los elementos flotantes para restablecer el flujo.

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

La clase .clearfix se aplica al elemento contenedor. El pseudo-elemento ::after se usa para agregar un espacio vacío después del contenido del contenedor, y la propiedad clear: both; se aplica para restablecer el flujo y hacer que la altura del contenedor se expanda para encerrar los elementos flotantes.

Aunque los floats se usaron ampliamente en el pasado, presentan algunos desafíos y limitaciones:

Debido a estos desafíos, las técnicas de diseño modernas como Flexbox y Grid se han vuelto más populares en los últimos años. Ofrecen más flexibilidad, mejores capacidades de alineación y una capacidad de respuesta más fácil en comparación con los diseños basados en float.

Sin embargo, entender cómo funcionan los floats sigue siendo importante para mantener sitios web más antiguos y trabajar con código heredado que depende de diseños basados en float.

Flexbox

Flexbox, abreviatura de Flexible Box Layout, es un poderoso sistema de diseño CSS que permite crear diseños flexibles y responsivos. Proporciona una forma de organizar, alinear y distribuir el espacio entre elementos dentro de un contenedor, incluso cuando su tamaño es desconocido o dinámico.

La idea principal detrás de Flexbox es el concepto de un contenedor flex y elementos flex. Un contenedor flex es un elemento al que se le aplica display: flex;, y sus hijos directos automáticamente se convierten en elementos flex. Al establecer display: flex;, se crea un nuevo contexto de formato flex para el contenedor y sus elementos.

<div class="flex-container">
  <div class="flex-item">Elemento 1</div>
  <div class="flex-item">Elemento 2</div>
  <div class="flex-item">Elemento 3</div>
</div>

.flex-container {
  display: flex;
}

Flexbox introduce el concepto de un eje principal y un eje transversal. El eje principal es el eje primario a lo largo del cual se disponen los elementos flex, y puede ser horizontal (por defecto) o vertical. El eje transversal es perpendicular al eje principal. Puedes controlar la dirección del eje principal usando la propiedad flex-direction, que puede tener valores como row (por defecto), row-reverse, column o column-reverse.

Una de las características clave de Flexbox es la capacidad de justificar y alinear el contenido dentro del contenedor flex. La propiedad justify-content controla la alineación y distribución de los elementos flex a lo largo del eje principal, mientras que la propiedad align-items controla la alineación a lo largo del eje transversal.

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

En el ejemplo anterior, justify-content: space-between; distribuye los elementos flex uniformemente a lo largo del eje principal, con el primer elemento al inicio y el último elemento al final. La propiedad align-items: center; centra los elementos flex verticalmente a lo largo del eje transversal.

Flexbox también proporciona propiedades para controlar el orden y el tamaño de los elementos flex. La propiedad order te permite cambiar el orden visual de los elementos flex sin cambiar la estructura HTML. Las propiedades flex-grow, flex-shrink y flex-basis te permiten controlar cómo los elementos flex crecen, se encogen y establecen su tamaño inicial dentro del contenedor flex.

.flex-item:first-child {
  order: 2;
}

.flex-item:nth-child(2) {
  flex-grow: 2;
}

En este ejemplo, el primer elemento flex se mueve visualmente al final usando order: 2;, y el segundo elemento flex se configura para crecer el doble que los otros elementos usando flex-grow: 2;.

Flexbox es una herramienta versátil para crear diseños flexibles y responsivos. Simplifica muchas tareas comunes de diseño, como el centrado vertical y horizontal, columnas de igual altura y el redimensionamiento dinámico de elementos. Al usar Flexbox, puedes crear diseños más adaptables y mantenibles que funcionan bien en diferentes tamaños de pantalla y dispositivos.

Cuadrícula CSS

La cuadrícula CSS es un sistema de diseño bidimensional que permite crear diseños complejos y adaptables basados en cuadrículas. Proporciona una forma de definir filas y columnas dentro de un contenedor de cuadrícula y controlar la colocación y el tamaño de los elementos de la cuadrícula.

Para crear un diseño de cuadrícula, se establece la propiedad display de un elemento contenedor en grid o inline-grid. El contenedor se convierte en un contenedor de cuadrícula, y sus hijos directos automáticamente se convierten en elementos de la cuadrícula.

<div class="grid-container">
  <div class="grid-item">Elemento 1</div>
  <div class="grid-item">Elemento 2</div>
  <div class="grid-item">Elemento 3</div>
  <div class="grid-item">Elemento 4</div>
</div>

.grid-container {
  display: grid;
}

Una vez que tienes un contenedor de cuadrícula, puedes definir las filas y columnas usando las propiedades grid-template-rows y grid-template-columns. Estas propiedades aceptan una lista de valores separados por espacios que representan el tamaño de cada fila o columna. Puedes usar tamaños fijos (por ejemplo, píxeles), tamaños flexibles (por ejemplo, porcentajes o unidades fr), o una combinación de ambos.

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 1fr 2fr 1fr;
}

Este código define un contenedor de cuadrícula con dos filas de alturas de 100 píxeles y 200 píxeles. También tiene tres columnas, donde la primera y tercera columnas ocupan una unidad de fracción del espacio disponible, y la segunda columna ocupa dos unidades de fracción.

Para colocar elementos de la cuadrícula dentro de las filas y columnas definidas, puedes usar las propiedades grid-row y grid-column. Estas propiedades te permiten especificar las líneas de inicio y fin de un elemento de la cuadrícula usando números de línea o líneas nombradas.

.grid-item:first-child {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.grid-item:nth-child(2) {
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}

El primer elemento de la cuadrícula se extiende desde la línea de fila 1 hasta la línea de fila 3 y desde la línea de columna 1 hasta la línea de columna 2. El segundo elemento de la cuadrícula se extiende desde la línea de fila 1 hasta la línea de fila 2 y desde la línea de columna 2 hasta la línea de columna 4.

CSS Grid también introduce el concepto de áreas de plantilla de cuadrícula, que te permite definir áreas nombradas dentro de la cuadrícula y asignar elementos de la cuadrícula a esas áreas usando la propiedad grid-area. Esto puede hacer que tu código sea más legible y fácil de mantener.

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

El contenedor de cuadrícula define áreas nombradas usando la propiedad grid-template-areas. Cada cadena representa una fila, y cada palabra dentro de la cadena representa un área nombrada. Los elementos de la cuadrícula se asignan a estas áreas usando la propiedad grid-area.

Una de las principales ventajas de CSS Grid es su capacidad para crear diseños adaptables fácilmente. Al usar consultas de medios y ajustar las filas, columnas y áreas de la plantilla de cuadrícula, puedes adaptar tu diseño de cuadrícula a diferentes tamaños de pantalla y dispositivos.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

La función repeat() se usa con la palabra clave auto-fit para crear un diseño de cuadrícula adaptable. La función minmax() especifica un tamaño mínimo y máximo para las columnas, permitiéndoles ajustarse automáticamente al espacio disponible. La propiedad gap añade espaciado entre los elementos de la cuadrícula.

Diseño Responsivo

El diseño responsivo es un enfoque de diseño web que busca crear sitios que ofrezcan una experiencia óptima de visualización e interacción en una amplia gama de dispositivos, desde computadoras de escritorio hasta teléfonos móviles. Con el creciente uso de smartphones y tablets para acceder a la web, es importante asegurarse de que tu sitio se adapte y se vea bien en cualquier tamaño de pantalla. El diseño responsivo se basa en varias técnicas clave, incluyendo media queries, layouts fluidos, imágenes responsivas y tipografía responsiva.

Las media queries son una herramienta fundamental en el diseño responsivo. Permiten aplicar diferentes estilos a tu sitio web basados en las características del dispositivo, como el ancho de pantalla, altura, orientación o resolución. Usando media queries, puedes crear puntos de quiebre que definen diferentes layouts para distintos tamaños de pantalla.

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

Cuando el ancho de pantalla es de 768 píxeles o menos, el elemento .container tendrá un ancho del 100% y un padding de 10 píxeles. Esto te permite ajustar el layout y el estilo de tu sitio web para pantallas más pequeñas, como tablets o teléfonos móviles.

Los layouts fluidos son otro aspecto clave del diseño responsivo. En lugar de usar valores fijos en píxeles para anchos y alturas, los layouts fluidos utilizan unidades relativas como porcentajes o unidades em. Esto permite que el layout se adapte y redimensione proporcionalmente según el tamaño de la pantalla.

.container {
  width: 80%;
  margin: 0 auto;
}

El elemento .container tiene un ancho del 80% de su elemento padre, y el margin: 0 auto; lo centra horizontalmente. A medida que cambia el tamaño de la pantalla, el contenedor se redimensionará proporcionalmente, manteniendo su ancho relativo.

Las imágenes responsivas son importantes para optimizar el rendimiento y la experiencia del usuario de tu sitio web en diferentes dispositivos. Utilizando técnicas como el atributo srcset o el elemento <picture>, puedes servir diferentes tamaños y resoluciones de imagen basados en las capacidades del dispositivo.

<img src="imagen.jpg" srcset="imagen-pequeña.jpg 400w, imagen-mediana.jpg 800w, imagen-grande.jpg 1200w" alt="Imagen Responsiva">

El atributo srcset especifica múltiples fuentes de imagen y sus correspondientes anchos. El navegador elegirá la imagen más apropiada basándose en el tamaño y resolución de la pantalla del dispositivo, reduciendo la cantidad de datos transferidos y mejorando los tiempos de carga.

La tipografía responsiva asegura que tu texto permanezca legible y bien proporcionado en diferentes tamaños de pantalla. Usando unidades relativas como em o rem para tamaños de fuente y alturas de línea, puedes crear una tipografía que escale proporcionalmente con el tamaño de la pantalla.

body {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

El tamaño de fuente base se establece en 16 píxeles para pantallas más grandes, pero se reduce a 14 píxeles cuando el ancho de la pantalla es de 768 píxeles o menos. Esto ayuda a mantener la legibilidad en pantallas más pequeñas mientras se conservan las proporciones generales de la tipografía.

Combinando media queries, layouts fluidos, imágenes responsivas y tipografía responsiva, puedes crear sitios web que se adapten perfectamente a diferentes dispositivos y tamaños de pantalla. El diseño responsivo no solo mejora la experiencia del usuario, sino que también hace que tu sitio web sea más accesible y preparado para el futuro a medida que surgen nuevos dispositivos y tamaños de pantalla.