CSS desde cero: el modelo de caja, y por qué Flexbox y Grid cuestan más que el resto

CSS lo dimos con el mismo esquema que HTML: pequeñas prácticas y ejercicios progresivos, hasta un examen final que combinaba las dos tecnologías en una sola página. La teoría general de CSS (colores, tipografías, márgenes sueltos) se entiende rápido. Donde de verdad cuesta es en dos sitios muy concretos: el modelo de caja con la especificidad, y más adelante, Flexbox y Grid.

Qué hace CSS que no hace HTML

Si HTML describe qué es cada cosa (un título, un párrafo, una imagen), CSS (Cascading Style Sheets) decide cómo se ve cada una de esas cosas: colores, tamaños, espaciados, posición en la pantalla.

Las tres formas de aplicar CSS

<link rel="stylesheet" href="estilos.css">

Anatomía de una regla CSS

p {
  color: #333;
  font-size: 16px;
}

• p es el selector (a qué elementos se aplica)
• color y font-size son propiedades
• #333 y 16px son valores
• El conjunto entre llaves es el bloque de declaración

Selectores más habituales

El modelo de caja: todo elemento es una caja

Esto es lo primero que cuesta interiorizar, porque no es intuitivo hasta que lo ves dibujado: cada elemento HTML es, para CSS, una caja rectangular, compuesta por cuatro capas que se envuelven unas a otras.

El error que comete todo el mundo: padding vs margin

La confusión típica al principio es mezclarlos. La forma más rápida de recordarlo:

• padding empuja el contenido hacia dentro de la propia caja — la caja se hace más grande, el contenido queda más separado del borde. Si le pones fondo de color, el padding también se pinta de ese color.
• margin empuja la caja entera lejos de sus vecinas — es espacio exterior, siempre transparente.

La propiedad que evita muchos dolores de cabeza

Por defecto, si le das width: 300px a una caja y luego le añades padding: 20px, la caja acaba midiendo 340px en total (300 + 20 a cada lado). Esto sorprende a todo el mundo la primera vez. Se soluciona con:

* {
  box-sizing: border-box;
}

Con border-box, el width que declaras incluye el padding y el border, así que 300px son 300px reales. Es tan práctico que casi todos los proyectos lo ponen al principio de la hoja de estilos.

La especificidad: por qué a veces tu CSS “no hace caso”

La especificidad es la regla que decide qué estilo gana cuando varias reglas CSS intentan aplicarse al mismo elemento a la vez. De mayor a menor peso:

Cuando algo “no se ve como debería” en CSS, casi siempre es esto: otra regla, en algún sitio de la hoja de estilos, tiene más peso y está ganando la partida sin que te des cuenta.

Un ejemplo típico: escribes .texto { color: blue; } pero el texto sigue rojo. Al mirar bien, resulta que había un #contenido p { color: red; } más arriba — y un ID más una etiqueta pesan más que una clase sola, así que gana el rojo.

Existe también !important, que salta por encima de toda la jerarquía:

.texto { color: blue !important; }

Funciona, pero conviene usarlo lo mínimo posible: si lo usas para “arreglar” un problema de especificidad, el siguiente conflicto que aparezca será todavía más difícil de depurar, porque ya no puedes subir más en la jerarquía.

Flexbox y Grid: por qué cuestan más que el resto

Tanto Flexbox como Grid sirven para organizar varios elementos dentro de un contenedor, pero no son intercambiables, y esa es justo la parte que lleva más tiempo interiorizar.

Flexbox: una dirección

.contenedor {
  display: flex;
  flex-direction: row;        /* row | column */
  justify-content: space-between;  /* reparte en el eje principal */
  align-items: center;        /* alinea en el eje perpendicular */
}

La clave de Flexbox son los dos ejes: el principal (marcado por flex-direction) y el perpendicular. justify-content trabaja sobre el principal, align-items sobre el otro. Confundir cuál es cuál es el error más habitual — y se resuelve recordando que si cambias flex-direction de row a column, los dos ejes se intercambian y esas propiedades pasan a hacer lo contrario de lo que hacían.

Grid: dos dimensiones

.contenedor {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

Aquí defines la cuadrícula por adelantado. La unidad fr (fracción) reparte el espacio disponible: en el ejemplo, la primera columna mide 200px fijos y las otras dos se reparten a partes iguales lo que sobre.

Cómo decidir cuál usar

La dificultad real no es memorizar las propiedades — es entender, antes de escribir una sola línea, si lo que quieres construir es “una fila que se reparte” (Flexbox) o “una cuadrícula con zonas” (Grid). Una regla práctica:

• Si puedes describir lo que quieres con la frase “quiero estos elementos en fila / en columna” → Flexbox
• Si necesitas decir “esto arriba a la izquierda, esto ocupando dos columnas, esto abajo” → Grid

Y una nota importante: no compiten entre sí. Lo habitual en un proyecto real es usar Grid para la estructura general de la página y Flexbox dentro de cada zona para alinear su contenido.

Pon a prueba lo que has entendido

Resumen rápido

• CSS decide la apariencia; HTML decide la estructura. Lo recomendable es un archivo .css externo.
• Todo elemento es una caja: content → padding → border → margin. padding empuja hacia dentro, margin separa hacia fuera.
• box-sizing: border-box evita que el padding infle el tamaño declarado — merece la pena ponerlo siempre.
• La especificidad decide qué regla gana: estilo en línea > ID > clase > etiqueta. Casi todo “CSS que no funciona” es en realidad esto.
• Flexbox organiza en una dirección; Grid en filas y columnas. No compiten: lo normal es usar Grid para la estructura y Flexbox dentro de cada zona.