Saltar al contenido principal

Unidades de medida y posicionamiento en CSS

Unidades de medida y posicionamiento en CSS

En el desarrollo web, el manejo preciso de unidades de medida y técnicas de posicionamiento en CSS es esencial para crear interfaces web responsivas y bien diseñadas. Este artículo explorará los distintos tipos de unidades de medida y los métodos avanzados de posicionamiento que puedes usar para perfeccionar tus diseños web.

Unidades de Medida en CSS​

Las unidades de medida en CSS determinan cómo se dimensionan y posicionan los elementos en una página web. Existen varias unidades, cada una con sus propios casos de uso.

Unidades Absolutas​

Las unidades absolutas tienen un tamaño fijo que no se adapta al contexto del diseño. Son útiles cuando necesitas un control exacto sobre el tamaño de los elementos.

px (píxeles): Una de las unidades más comunes. Un píxel es un punto en la pantalla del dispositivo.

CSS
.box {
  width: 200px;
  height: 100px;
}

Puntos (pt): Comúnmente utilizados en la impresión, representan 1/72 de pulgada.

CSS
.print-text {
  font-size: 12pt;
}

cm (centímetros), mm (milímetros): Rara vez se usan en la web, pero son útiles para el diseño de impresión.

CSS
.print-box {
  width: 10cm;
  height: 5cm;
}

in (pulgadas): También útil principalmente para diseños de impresión.

CSS
.print-area {
  width: 3in;
  height: 2in;
}

Unidades Relativas​

Las unidades relativas se adaptan al entorno del diseño, haciendo que sean ideales para diseños responsivos.

% (porcentaje): Los porcentajes se utilizan en relación con el tamaño del contenedor padre.

CSS
.container {
  width: 80%; /* 80% del ancho del contenedor padre */
}

Unidades de Vista: (vw, vh, vmin, vmax)

  • vw: 1% del ancho de la ventana de visualización.
  • vh: 1% de la altura de la ventana de visualización.
  • vmin: El menor valor entre vw y vh.
  • vmax: El mayor valor entre vw y vh.
CSS
.full-screen {
  width: 100vw; /* 100% del ancho de la ventana de visualización */
  height: 100vh; /* 100% de la altura de la ventana de visualización */
}

Em (em): Se basa en el tamaño de la fuente del elemento padre.

CSS
.text {
  font-size: 2em; /* 2 veces el tamaño de la fuente del elemento padre */
}

Rem (rem): Se basa en el tamaño de la fuente de la raíz del documento (<html>).

CSS
html {
  font-size: 16px;
}
.text {
  font-size: 1.5rem; /* 1.5 veces el tamaño de la fuente del elemento raíz */
}

Posicionamiento en CSS​

El posicionamiento en CSS permite controlar cómo se colocan los elementos en la página. Existen varios métodos de posicionamiento, cada uno con sus propias características y usos.

Posicionamiento Estático​

El posicionamiento estático es el valor por defecto. Los elementos se colocan en el flujo normal del documento, uno tras otro.

CSS
.element {
  position: static; /* Valor por defecto */
}

Posicionamiento Relativo​

El posicionamiento relativo permite desplazar un elemento en relación con su posición original en el flujo del documento. Los desplazamientos se aplican a partir de su posición normal.

CSS
.element {
  position: relative;
  top: 20px; /* Desplaza el elemento 20 píxeles hacia abajo */
  left: 10px; /* Desplaza el elemento 10 píxeles hacia la derecha */
}

Posicionamiento Absoluto​

El posicionamiento absoluto saca el elemento del flujo normal del documento y lo posiciona en relación con su contenedor más cercano que tenga un posicionamiento distinto de estático.

CSS
.element {
  position: absolute;
  top: 50px; /* Posiciona el elemento 50 píxeles desde la parte superior del contenedor */
  left: 30px; /* Posiciona el elemento 30 píxeles desde la izquierda del contenedor */
}

Posicionamiento Fijo​

El posicionamiento fijo coloca un elemento en una posición específica en la ventana de visualización, independientemente del desplazamiento de la página. Es útil para elementos como barras de navegación o encabezados que deben permanecer visibles.

CSS
.element {
  position: fixed;
  top: 0; /* Fija el elemento en la parte superior de la ventana de visualización */
  left: 0; /* Fija el elemento en la parte izquierda de la ventana de visualización */
}

Posicionamiento Sticky​

El posicionamiento sticky combina características del posicionamiento relativo y fijo. El elemento se comporta como relativo hasta que alcanza un umbral específico, momento en el cual se comporta como fijo.

CSS
.element {
  position: sticky;
  top: 0; /* El elemento se adhiere a la parte superior de su contenedor cuando se desplaza */
}

Posicionamiento con Flexbox​

El modelo de diseño Flexbox permite crear diseños flexibles y responsivos. Los elementos hijos de un contenedor flex pueden alinearse y distribuirse de manera eficiente.

CSS
.container {
  display: flex; /* Activa el modelo Flexbox */
  justify-content: space-between; /* Distribuye los elementos con espacio entre ellos */
  align-items: center; /* Alinea los elementos verticalmente al centro */
}

Estudia más sobre Flexbox en nuestro artículo dedicado: Flexbox en CSS.

Posicionamiento con Grid​

El modelo de diseño Grid permite crear diseños bidimensionales complejos. Los elementos se colocan en una cuadrícula definida por filas y columnas.

CSS
.container {
  display: grid; /* Activa el modelo Grid */
  grid-template-columns: repeat(
    3,
    1fr
  ); /* Crea tres columnas de igual tamaño */
  grid-gap: 10px; /* Espacio entre las celdas de la cuadrícula */
}

Conoce más sobre Grid en nuestro artículo dedicado: Grid en CSS.

Conclusión​

El manejo de unidades de medida y técnicas de posicionamiento en CSS es fundamental para crear interfaces web responsivas y bien diseñadas. Al comprender las diferentes unidades y métodos de posicionamiento, puedes lograr un control preciso sobre el diseño y la presentación de tus páginas web. Experimenta con estas técnicas para perfeccionar tus habilidades en CSS y mejorar la experiencia del usuario en tus proyectos web.

Recursos
Ejercicios

💻 Mete mano al código con estos desafíos simples: