12 box-sizing

Apuntes

🔹 box-sizing box-sizing define CÓMO se calcula el tamaño final de una caja. Es decir: le dice al navegador qué incluye width y height. Hay dos valores importantes: 1️⃣ content-box (valor por defecto) box-sizing: content-box; Qué significa 👉 width y height SOLO miden el contenido Todo lo demás se suma después: padding ➕ border ➕ Ejemplo mental .caja { width: 300px; padding: 20px; border: 5px solid; } 📏 Tamaño real: contenido: 300px padding: 20 + 20 = 40px border: 5 + 5 = 10px 👉 300 + 40 + 10 = 350px ⚠️ Resultado: La caja termina siendo MÁS grande de lo que tú pensabas Por eso al principio “todo se rompe” 😵 2️⃣ border-box (el que se usa casi siempre) box-sizing: border-box; Qué significa 👉 width y height incluyen contenido + padding + border El navegador ajusta el contenido automáticamente. Mismo ejemplo: .caja { width: 300px; padding: 20px; border: 5px solid; } 📏 Tamaño real: 👉 300px TOTAL, no más El contenido se encoge para que: todo quepa dentro de esos 300px 🧠 Diferencia CLARA box-sizing Qué mide width content-box solo contenido border-box contenido + padding + border ❓ ¿Por qué border-box se usa casi siempre? Porque: 1️⃣ Lo que...