Profe Johnny
Ejercicios · Grupo 3 de 6

Unidades y posicionamiento

Medidas relativas y sacar elementos del flujo normal. Intenta resolver cada ejercicio en el editor antes de revelar la solución.

1 Ejercicio 1 Básico

Define el tamaño de fuente del h1 en rem, asumiendo raíz de 16px.

ejercicio-1
Ver solución sugerida
solución 1
2 Ejercicio 2 Intermedio

Haz que una sección ocupe el 100% del alto de la ventana con vh.

ejercicio-2
Ver solución sugerida
solución 2
3 Ejercicio 3 Básico

Crea una caja con ancho en porcentaje (50%) dentro de un contenedor.

ejercicio-3
Ver solución sugerida
solución 3
4 Ejercicio 4 Intermedio

Usa position: relative y top/left para desplazar un elemento sin afectar a otros.

ejercicio-4
Ver solución sugerida
solución 4
5 Ejercicio 5 Avanzado

Crea un botón fijo (position: fixed) en la esquina inferior derecha.

ejercicio-5
Ver solución sugerida
solución 5
6 Ejercicio 6 Avanzado

Coloca una insignia con position: absolute sobre una tarjeta con position: relative.

ejercicio-6
Ver solución sugerida
solución 6
7 Ejercicio 7 Avanzado

Compara em vs rem anidando dos elementos con font-size distinto.

ejercicio-7
Ver solución sugerida
solución 7
8 Ejercicio 8 Intermedio

Cambia el display de un span a inline-block para poder darle width.

ejercicio-8
Ver solución sugerida
solución 8
9 Ejercicio 9 Básico

Crea 3 divs en línea usando display: inline-block con espacio entre ellos.

ejercicio-9
Ver solución sugerida
solución 9
10 Ejercicio 10 Intermedio

Usa max-width para que una imagen o caja nunca exceda 400px pero sí se reduzca en pantallas chicas.

ejercicio-10
Ver solución sugerida
solución 10