Ejercicio 24 — Tamaños en CSS

En este ejercicio se trabaja con diferentes propiedades de tamaño en CSS, como width, height, min-height y max-height. Cada sección usa un comportamiento distinto para entender cómo estas propiedades afectan la apariencia y el comportamiento de los elementos dentro de una página web.

Enunciado

Crear tres cuadros con textos distintos.
Aplicar tamaño fijo a la primera sección.
Aplicar tamaño relativo (porcentaje) a la segunda sección.
Aplicar altura mínima y máxima a la tercera sección.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio Tamaño 24</title>
    <link rel="stylesheet" href="tamanio.css">
</head>
<body>

<div class="seccion1">
    Tamaño Fijo
</div>

<div class="seccion2">
    Porcentaje de Ancho
</div>

<div class="seccion3">
    Altura Mínima y Máxima
</div>

</body>
</html>

Código CSS

.seccion1 {
    width: 200px;
    height: 150px;
    background-color: rgb(181, 211, 11);
}

.seccion2 {
    width: 50%;
    height: 100px;
    background-color: aquamarine;
}

.seccion3 {
    width: 300px;
    min-height: 100px;
    max-height: 200px;
    background-color: antiquewhite;
}

🚀 Ver resultado del ejercicio