BLOQUE 1 1 BOX MODEL 2fundamentos reales3

Apuntes

BLOQUE 1 — BOX MODEL (fundamentos reales) Antes de escribir CSS “bonito”, hay que entender qué es lo que CSS está manipulando. 👉 Idea clave (grábatela): TODO en una página web es una caja. Texto, imágenes, secciones, botones, todo. CSS no decora “texto” ni “páginas”. CSS modifica cajas. 1️⃣ ¿Qué es el Box Model? El Box Model es la forma en que el navegador entiende una caja HTML. Cada caja tiene 4 capas, de adentro hacia afuera: ┌─────────────────────┐ ← margin │ ┌─────────────┐ │ │ │ border │ │ │ │ ┌───────┐ │ │ │ │ │padding│ │ │ │ │ │ ┌───┐ │ │ │ │ │ │ │content│ │ │ │ │ │ └───┘ │ │ │ │ │ └───────┘ │ │ │ └─────────────┘ │ └─────────────────────┘ Vamos uno por uno, sin mezclar. 2️⃣ CONTENT (contenido) 📌 Qué es: Es lo que hay dentro de la caja: texto imagen formulario lo que escribiste en HTML 📌 Ejemplo mental: El texto "Soy una venezolana de 27 años" es el content. 📌 CSS relacionado: p { width: 300px; } 👉 width afecta al content, no al padding ni al margin. 3️⃣ PADDING (espacio interno) 📌 Qué es: Espacio entre el contenido y el borde de la caja. 📌 Sirve para: Que el contenido no esté pegado al borde. 📌...