`. Cada elemento se desplaza 50 px hacia la derecha y hacia abajo respecto al anterior. El uso de colores semitransparentes ilustra claramente la posibilidad de superposición al utilizar posicionamiento absoluto. [![Imagen: Posicionamiento absoluto de cajas CSS](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/b/2/csm_css-position-absolute_9d1ed0e3c7.webp "Posicionamiento absoluto de cajas CSS")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-position-absolute.jpg) Tres cajas CSS transparentes con distinto posicionamiento absoluto. #### Posicionamiento relativo Con el posicionamiento relativo, la caja **permanece integrada en el flujo normal del documento**, pero puede desplazarse mediante valores de posicionamiento relativos a esa posición original. Es decir, la caja se ajusta con respecto a sí misma. Los elementos que la preceden o la siguen en el flujo se comportan como si la caja no se hubiera desplazado. Para desplazar una caja a partir de su posición dentro del flujo del documento, el conjunto de reglas correspondiente se amplía con la declaración `position: relative` y con los valores de posicionamiento deseados. El siguiente bloque de código lo ilustra con el ejemplo de la caja azul: ```css .azul { height: 150px; width: 150px; background-color: rgba(0,0,255,0.5); position: relative; left: 50px; } ``` La regla `position: relative` junto con la indicación `left: 50px` provoca que, en la vista del navegador, la caja azul se desplace 50 px hacia la izquierda. [![Imagen: Posicionamiento relativo a partir del flujo natural del documento](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/6/8/csm_css-position-relative_9c6bf62d8b.webp "Posicionamiento relativo a partir del flujo natural del documento")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-position-relative.jpg) Mediante el posicionamiento relativo, la caja azul se desplaza. El posicionamiento relativo también puede aplicarse a elementos flotados. #### Cajas CSS fijadas La alineación de las cajas fijadas funciona de forma similar al posicionamiento absoluto, es decir, fuera del flujo del documento. Todas las indicaciones de posición se definen en relación con el **viewport**. Una caja fijada de este modo aparece siempre en el mismo lugar de la pantalla, incluso cuando el usuario se desplaza por la página web. Así pueden fijarse **elementos de navegación**, como menús o botones de acción (por ejemplo, “Volver al inicio”), dentro del área visible. ## El modelo de cajas en CSS El modelo de cajas CSS describe cómo los navegadores representan y posicionan los elementos HTML como superficies rectangulares (“cajas”). En esencia, toda página web se compone de la interacción de estas cajas, cuya disposición viene determinada por el llamado **flujo de elementos**: por defecto, los elementos se colocan de izquierda a derecha y de arriba abajo. CSS distingue entre dos tipos de cajas: - **Cajas de bloque** (`div`, `p`): ocupan por defecto todo el ancho de su elemento padre y siempre comienzan en una nueva línea. - **Cajas inline** (`span`, `b`, `i`): se muestran dentro del flujo del texto y se ajustan a su contenido. El **flujo de elementos de las cajas de bloque e inline** puede visualizarse en las siguientes ilustraciones: [![Imagen: Tres cajas de bloque en el flujo de elementos CSS](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/3/e/csm_css-three-blocks_07c38c340f.webp "Tres cajas de bloque en el flujo de elementos CSS")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-three-blocks.jpg) Flujo de elementos CSS: las cajas de bloque se muestran cada una en una fila nueva. Las **cajas de bloque** estructuran el diseño de la página, mientras que las **cajas inline** se encargan del texto y de los elementos integrados en él. Los contenedores vacíos como `

` suelen utilizarse únicamente para la agrupación y el formateo mediante CSS.

Niveles del modelo de cajas	Descripción
Área de contenido (content box)	Superficie cuyo tamaño viene determinado por la cantidad de texto o por las dimensiones de una imagen. En los elementos de nivel de bloque, la altura y la anchura pueden definirse mediante las propiedades `height` y `width`. En los elementos inline, este tipo de formateo no está disponible.
Relleno (padding box)	La padding box (padding = relleno) define la distancia entre la content box y la border box.
Borde (border box)	La border box define el borde del elemento.
Margen (margin box)	La margin box define la distancia entre el elemento actual y su elemento padre o los elementos adyacentes. La propiedad `margin` también puede aceptar valores negativos.

Si se desea dar formato a los cuatro lados de una caja al mismo tiempo, se utilizan las propiedades `padding`, `border` y `margin`:

	Relleno	Borde	Margen
arriba	`padding-top`	`border-top`	`margin-top`
abajo	`padding-bottom`	`border-bottom`	`margin-bottom`
izquierda	`padding-left`	`border-left`	`margin-left`
derecha	`padding-right`	`border-right`	`margin-right`

Los valores posibles para las propiedades indicadas son valores de tamaño, así como `inherit` (heredado del elemento padre). Además, los márgenes exteriores pueden definirse también mediante el valor `auto`. La siguiente imagen muestra la estructura esquemática del **modelo de cajas en CSS**: [![Imagen: Modelo de cajas en CSS](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/5/3/csm_css-box-model_dc7a85cd37.webp "Modelo de cajas en CSS")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model.jpg) Representación esquemática del modelo de cajas CSS. ### El modelo de cajas en CSS en la práctica El modelo de cajas en CSS puede entenderse fácilmente añadiendo paso a paso cada uno de sus niveles a una caja de contenido. El punto de partida es un breve fragmento de texto que, en este ejemplo, se formatea mediante un **selector de clase**: ```html

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.

``` El siguiente conjunto de reglas define para la **caja de contenido** unas dimensiones de 150 px × 150 px. Además, se establecen letras negras sobre fondo gris y se alinea el texto en justificado: ```css .contenido { height: 150px; width: 150px; color: #000000; text-align: justify; background-color: #808080; } ``` Aplicadas al fragmento de texto, estas reglas de estilo dan lugar a la siguiente representación en el navegador web: [![Imagen: Caja de contenido sin relleno, borde ni margen](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/1/f/csm_css-box-model-standard_edb38fb300.webp "Caja de contenido sin relleno, borde ni margen")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model-standard.jpg) Si se define una caja de contenido sin relleno, borde ni margen, aparece situada en la esquina superior izquierda de la ventana del navegador. El fragmento de texto aparece, según el flujo de los elementos, en la esquina superior izquierda de su elemento padre. El texto y el color de fondo comienzan sin ningún margen en el lado izquierdo de la ventana del navegador y ocupan todo el espacio disponible. El fondo queda directamente ajustado al cuerpo del texto. Un diseño de este tipo resulta poco estético y dificulta la lectura. Por ello, la propiedad `padding` permite a **los diseñadores** definir un relleno para separar los elementos de texto de los elementos de diseño circundantes. ```css .contenido { height: 150px; width: 150px; color: #000000; background-color: #808080; text-align: justify; padding: 10px; } ``` Al añadirse al conjunto de reglas, la declaración `padding: 10px;` produce el siguiente cambio en la vista del frontend: [![Imagen: Caja de contenido con relleno](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/f/2/csm_css-box-model-padding_b788425ee7.webp "Caja de contenido con relleno")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model-padding.jpg) El relleno define el espacio interior. El navegador añade un **relleno** de 10 px en los cuatro lados de la **caja de contenido**. Como elemento de diseño adicional, puede añadirse un borde. ```css .contenido { height: 150px; width: 150px; color: #000000; background-color: #808080; text-align: justify; padding: 10px; border: 5px solid #d82451; } ``` En este ejemplo se utiliza la propiedad `border` para añadir al elemento un **borde** continuo de color burdeos. [![Imagen: Caja de contenido con relleno y borde](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/4/4/csm_css-box-model-border_d3bfe42d12.webp "Caja de contenido con relleno y borde")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model-border.jpg) El borde rodea la caja de contenido y la caja de relleno. De este modo, el borde queda separado del contenido gracias al valor de **relleno**. Según el flujo natural de los elementos, la caja formateada de esta manera se sitúa sin separación en la esquina superior izquierda de su elemento padre. La propiedad `margin` permite suavizar el diseño de una página web mediante un **margen exterior**. Para ello, basta con añadir la declaración correspondiente al conjunto de reglas existente: ```css .contenido { height: 150px; width: 150px; color: #000000; background-color: #808080; text-align: justify; padding: 10px; border: 5px solid #d82451; margin: 40px; } ``` En el navegador, un margen exterior de 40 px se aplica de la siguiente manera: [![Imagen: Caja de contenido con relleno, borde y margen](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/d/8/csm_css-box-model-margin_793102d75a.webp "Caja de contenido con relleno, borde y margen")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model-margin.jpg) La propiedad `margin` impone un margen exterior entre el borde y el elemento padre. Como alternativa a una medida concreta, la propiedad `margin` puede definirse con el **valor `auto`**. En este caso, la caja se centra automáticamente **en horizontal** dentro del elemento padre. En cambio, en sentido vertical el valor `auto` no tiene efecto. Nota El espacio que ocupa una caja en CSS puede calcularse sumando los valores de todos los componentes relevantes de la caja. ### Formato de cajas con `float` Cuando la caja que se va a formatear es una **caja de bloque**, las cajas siguientes pasan automáticamente a la línea siguiente según el flujo normal de los elementos. En la práctica, este salto de línea automático después de una caja de bloque no siempre es deseado y puede evitarse mediante la propiedad `float`. Esta propiedad saca las cajas de bloque del flujo normal del documento y las coloca en la posición deseada.

Valores de la propiedad `float`	Descripción
`none`	No se produce ningún desplazamiento del elemento. `float: none;` es el valor predeterminado de una caja CSS.
`left`	La caja de bloque se desplaza hasta el borde interior izquierdo del elemento padre.
`right`	La caja de bloque se desplaza hasta el borde interior derecho del elemento padre.
`inherit`	El valor de `float` se hereda del elemento padre.

Una caja a la que se aplica un formato con `float` se denomina elemento flotado. Cuando coinciden varios elementos flotados, estos se colocan en el orden en que aparecen en el código HTML, de izquierda a derecha (`float: left`) o de derecha a izquierda (`float: right`). El siguiente ejemplo de código muestra un conjunto de reglas que incluye la propiedad `float`: ```css .contenido { height: 150px; width: 150px; color: #000000; background-color: #808080; text-align: justify; padding: 20px; border: 5px solid #d82451; margin: 40px; float: left; } ``` Si este conjunto de reglas se aplica a dos elementos HTML, ambos se **extraen del flujo del documento** y se alinean uno junto a otro a la izquierda: ```html

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.

Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

``` [![Imagen: Dos cajas de bloque alineadas a la izquierda mediante elementos flotados](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/6/6/csm_css-boxmodell-float_7645e5270d.webp "Dos cajas de bloque alineadas a la izquierda mediante elementos flotados")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-boxmodell-float.jpg) Con la propiedad `float` es posible mostrar cajas de bloque una junto a otra sin salto de línea. El gran espacio intermedio se produce porque los márgenes exteriores de ambas cajas se suman. Sin los elementos flotados, los márgenes exteriores de los elementos adyacentes pueden colapsar. ## Diseño web adaptativo con CSS Para crear [diseño web adaptativo](https://www.ionos.com/es-us/digitalguide/paginas-web/diseno-web/que-es-el-diseno-responsivo/) con CSS, el lenguaje de hojas de estilo ofrece dos técnicas modernas de maquetación: [Flexbox](https://www.ionos.com/es-us/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/) y [Grid](https://www.ionos.com/es-us/digitalguide/paginas-web/creacion-de-paginas-web/css-grid-layout/). Ambos sistemas adaptan los contenidos de forma dinámica a distintos tamaños de pantalla. En combinación con las [media queries de CSS](https://www.ionos.com/es-us/digitalguide/paginas-web/diseno-web/css-media-queries/), los diseños pueden ajustarse de manera precisa a diferentes dispositivos y anchuras de pantalla. ### Flexbox Con CSS Flexbox (Flexible Box Layout) es posible crear **diseños unidimensionales de forma especialmente sencilla**. Flexbox alinea los contenidos en horizontal o en vertical, por lo que resulta ideal para menús de navegación, galerías o áreas de contenido modulares. Un contenedor flex se define mediante la propiedad `display: flex;`. Todos los elementos hijos directos se convierten automáticamente en elementos flexibles (flex items), cuya posición, orden y tamaño pueden controlarse de forma flexible.

Propiedad	Descripción
`flex-direction`	Determina la dirección principal de los elementos flexibles. El valor `row` se utiliza para una disposición horizontal y `column` para una vertical. `row-reverse` y `column-reverse` invierten la dirección.
`justify-content`	Alinea los elementos flexibles a lo largo del eje principal. Con `flex-start` se alinean al inicio, con `flex-end` al final y con `center` se centran. Los valores `space-between`, `space-around` y `space-evenly` definen la distribución del espacio entre los elementos (sin espacio en los extremos, espacio alrededor de cada elemento y espacio uniforme entre todos).
`align-items`	Alinea los elementos flexibles a lo largo del eje transversal. Los valores `flex-start`, `flex-end` y `center` funcionan de forma similar a `justify-content`. Además, `baseline` alinea por la línea base y `stretch` estira los elementos para ocupar el contenedor.
`flex-wrap`	Define si los elementos flexibles pueden pasar a una nueva línea. Con `nowrap` (valor predeterminado) todos permanecen en una sola línea. Con `wrap` y `wrap-reverse` se permiten saltos de línea (opcionalmente en sentido inverso).
`gap`	Define el espacio entre los elementos flexibles.

El siguiente ejemplo muestra una disposición horizontal de elementos con un espacio uniforme entre ellos: ```css .contenedor { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; } ``` Estas reglas se aplican al siguiente HTML: ```html

Elemento 1

Elemento 2

Elemento 3

``` Además, el comportamiento de cada elemento flexible puede controlarse de forma individual. Con la propiedad `flex`, por ejemplo, puedes definir en qué medida un elemento puede **crecer o reducirse** en relación con los demás. Un valor de 2 indica una duplicación: ```css .elemento1 { flex: 2; } ``` ### Maquetación con CSS Grid Con CSS Grid, los contenidos de una página web pueden organizarse en un **sistema bidimensional de filas y columnas**. Este sistema permite un control preciso de la estructura, lo que facilita la creación de maquetaciones complejas de forma flexible. Para crear una cuadrícula, se asigna la propiedad `display: grid;` al elemento padre. Todos sus elementos hijos directos pasan a ser **elementos de cuadrícula**. A partir de ahí, el sistema se ajusta mediante distintas propiedades.

Propiedad	Descripción
`grid-template-columns`	Define la estructura de columnas de la cuadrícula. La unidad más importante es `fr`, que indica qué proporción del espacio disponible se utiliza. Con `auto`, la distribución se realiza automáticamente.
`grid-template-rows`	Define la estructura de filas de la cuadrícula. Los valores disponibles son los mismos que en `grid-template-columns`.
`gap`	Determina el espacio entre los elementos de cuadrícula.
`justify-items`	Define la alineación horizontal de los elementos de cuadrícula. `start` alinea a la izquierda, `end` a la derecha y `center` centra los elementos. El valor predeterminado `stretch` hace que ocupen toda la celda.
`align-items`	Define la alineación vertical de los elementos de cuadrícula. Utiliza los mismos valores que `justify-items`.

El siguiente ejemplo muestra la creación de una cuadrícula con tres columnas de igual anchura y dos filas, utilizando valores `fr` uniformes: ```css .contenedor { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 10px; } ``` Además, cada elemento de cuadrícula puede **posicionarse de forma específica**, por ejemplo para ocupar varias columnas o filas. Para ello se utilizan las propiedades `grid-column` y `grid-row`. En estas se indican la línea de inicio (incluida) y la línea de fin (excluida), separadas por una barra (`/`). En el siguiente ejemplo, el elemento ocupa dos columnas y una fila: ```css .elemento1 { grid-column: 1 / 3; grid-row: 1; } ``` ### Media queries Las media queries permiten aplicar **reglas CSS en función de las características del dispositivo**. De este modo, el diseño puede adaptarse a smartphones, tablets o pantallas de escritorio sin necesidad de crear varios archivos HTML. Con una media query es posible activar o sobrescribir estilos cuando se cumplen determinadas condiciones. El caso más habitual es la adaptación a distintas anchuras del viewport, para lo que se utilizan las siguientes directivas:

Propiedad / sintaxis	Descripción
`@media`	Inicia una media query.
`screen`, `print`, `all`	Define el tipo de medio al que se aplican las reglas.
`min-width`	Activa reglas CSS a partir de una anchura mínima.
`max-width`	Activa reglas CSS hasta una anchura máxima.

El siguiente ejemplo muestra cómo utilizar una media query para modificar la maquetación por debajo de una anchura determinada: ```css / *Diseño estándar para pantallas grandes* / .contenedor { display: grid; grid-template-columns: 1fr 1fr 1fr; } / *Adaptación para pantallas más pequeñas* / @media (max-width: 768px) { .contenedor { grid-template-columns: 1fr; } } ``` También es posible combinar varias condiciones, por ejemplo para aplicar estilos solo en tablets en orientación vertical: ```css @media screen and (min-width: 600px) and (max-width: 900px) and (orientation: portrait) { body { font-size: 1.1em; } } ``` ## Variables CSS Las variables CSS (también llamadas *custom properties*) permiten **almacenar valores de forma centralizada y reutilizarlos varias veces** dentro de la hoja de estilos. De este modo, colores, espaciados o tamaños de fuente pueden modificarse en un único lugar sin tener que ajustar todo el CSS. Esto hace que el código sea más claro, fácil de mantener y coherente. Las variables CSS se definen con un doble guion (`--`) y se utilizan mediante la función `var()`.

Sintaxis	Descripción
`--nombre-variable`	Define una variable personalizada.
`var(--nombre-variable)`	Recupera el valor de una variable definida.
`:root`	Ámbito global (corresponde al elemento HTML raíz).

El siguiente ejemplo muestra cómo definir y utilizar variables CSS: ```css :root { --color-principal: #ff4081; --color-texto: #333; --relleno: 10px; } button { background-color: var(--color-principal); color: var(--color-texto); padding: var(--relleno); } ``` En este caso, las variables `--color-principal`, `--color-texto` y `--relleno` se definen en `:root`, es decir, de forma global para toda la página. El botón utiliza estos valores mediante `var()`, de modo que el color de fondo, el color del texto y el relleno **se aplican automáticamente a partir de las variables definidas**. This is a markdown version of: [https://www.ionos.com/es-us/digitalguide/paginas-web/diseno-web/que-es-css-un-tutorial-con-lo-que-necesitas-saber/](https://www.ionos.com/es-us/digitalguide/paginas-web/diseno-web/que-es-css-un-tutorial-con-lo-que-necesitas-saber/) for AI/LLM consumption.

Tipo de selector	Sintaxis CSS	Descripción	Especificidad
Selector de tipo	Elemento HTML (p. ej., `h2`)	Un selector de tipo corresponde al nombre del elemento al que hace referencia. Los estilos se aplican a todos los elementos HTML del mismo tipo.	1
Selector de clase	`.ejemplo`	Un selector de clase se aplica a todos los elementos que pertenecen a una clase determinada. Los selectores de clase se definen con un punto (`.`) seguido del nombre de la clase: `.ejemplo`. Las clases se asignan a los elementos HTML mediante el atributo `class` (`class="ejemplo"`).	10
Selector de ID	`#ejemplo`	Un selector de ID se aplica a un único elemento con un identificador exclusivo. Se integra en el código HTML mediante el atributo `id` (`id="ejemplo"`).	100
Selector universal	`*`	El selector universal, representado por un asterisco (`*`), se aplica a todos los elementos HTML de un documento.	0

Valores para la inclinación del texto	Descripción
`normal`	estilo de letra normal (valor predeterminado)
`italic`	letra cursiva
`oblique`	letra inclinada (aunque la fuente no tenga variante cursiva)

Valores para las variantes tipográficas	Descripción
`normal`	variante tipográfica normal (valor predeterminado)
`small-caps`	versalitas (las minúsculas se muestran como mayúsculas de menor tamaño)
`all-small-caps`	versalitas para mayúsculas y minúsculas

Unidad	Sintaxis CSS	Descripción
Píxel	`px`	La unidad px corresponde al tamaño de un elemento en píxeles. Los píxeles se representan en pantalla en relación con la densidad de puntos (por ejemplo, dots per inch, dpi). Como referencia de escalado se aplica: 1 píxel CSS equivale a 1/96 de pulgada. El usuario puede modificar la relación entre píxeles CSS y píxeles del dispositivo mediante el zoom del navegador.
Centímetro	`cm`	Tamaño en centímetros
Milímetro	`mm`	Tamaño en milímetros
Pulgada	`in`	Tamaño en pulgadas (1 in = 2,54 cm)
Punto	`pt`	Tamaño en puntos (1 pt equivale a 1/72 de pulgada)
Pica	`pc`	Tamaño en picas (1 pica equivale a 12 puntos)