📏 Ancho (width) y Alto (height)
📌 Conceptos clave:
- width y height definen dimensiones, pero no aplican a elementos inline
- Se pueden usar unidades como px, %, em, rem
- max-width y min-height son útiles para diseños responsivos
🎯 Ejercicio rápido:
width: 50% | height: 100px
💻 Código CSS:
.box {
width: 50%; /* Mitad del contenedor padre */
height: 100px;
background: lightgreen;
}
📐 Diferentes unidades de medida:
width: 200px | height: 80px
width: 75% | height: 80px
width: 15em | height: 4em
width: 12rem | height: 3rem
📋 Explicación de unidades:
- px (píxeles): Unidad fija, no cambia con el tamaño de pantalla
- % (porcentaje): Relativo al contenedor padre
- em: Relativo al tamaño de fuente del elemento
- rem: Relativo al tamaño de fuente del elemento raíz (html)
📱 Diseño responsivo con max-width y min-height:
max-width: 400px
Este elemento nunca será más ancho que 400px, pero puede ser más estrecho en pantallas pequeñas.
min-height: 120px
Este elemento nunca será más bajo que 120px, pero puede crecer si el contenido es más largo.
⚠️ Elementos inline vs block:
Elementos inline (width y height NO funcionan):
Span inline
Otro span
Tercer span
Elementos block (width y height SÍ funcionan):
Div block
Otro div
💡 Puntos importantes:
- Elementos inline: width y height se ignoran, solo ocupan el espacio del contenido
- Elementos block: width y height se aplican correctamente
- max-width: Útil para evitar que elementos sean demasiado anchos en pantallas
grandes
- min-height: Útil para asegurar una altura mínima, especialmente en contenido
dinámico
🎨 Ejemplos prácticos:
📱 Botón responsivo:
Este botón ocupa todo el ancho disponible hasta 300px máximo
🖼️ Imagen responsiva:
Imagen simulada
Esta "imagen" se adapta al ancho del contenedor pero nunca supera 400px
🚀 Consejos para diseño responsivo:
- Usa max-width en lugar de width fijo para elementos que deben ser
responsivos
- Combina width: 100% con max-width para elementos que se adapten
pero no sean demasiado anchos
- Usa min-height para asegurar que elementos tengan suficiente espacio para su
contenido
- Considera usar em o rem para tamaños que deben escalar con el
texto