[Proyecto] Resumen de lo aprendido en esta aula

En esta aula, exploramos conceptos clave de CSS relacionados con el diseño y posicionamiento de elementos en una página web. A continuación, un repaso de los temas abordados:

1. Patrones de diseño CSS con height y box-sizing

• height: Define la altura de los elementos, pudiendo ser fija (px), relativa (%) o adaptable (vh).

• box-sizing: Controla cómo se calculan las dimensiones de un elemento, especialmente en relación con el padding y border.

Ejemplo:

.elemento {
    height: 100px;  /* Altura fija */
    box-sizing: border-box;  /* Incluye padding y border en el tamaño total */
}

2. Unidad Viewport (vh y vw)

Las unidades de viewport permiten que los elementos se adapten al tamaño de la pantalla.

Ejemplos:

• 1vh = 1% de la altura de la ventana del navegador.
• 1vw = 1% del ancho de la ventana del navegador.

Ejemplo de uso:

.full-screen {
    width: 100vw;  /* Ocupa todo el ancho de la pantalla */
    height: 100vh; /* Ocupa todo el alto de la pantalla */
}

3. Jerarquía entre elementos padre e hijo

• En CSS, los elementos dentro de un contenedor (hijos) pueden heredar o verse afectados por las propiedades del contenedor (padre).

• Un contenedor con display: flex; afecta la alineación de los hijos.

• Las unidades de % en altura (height: 100%) solo funcionan si el elemento padre tiene una altura definida.

Ejemplo:

    .padre {
        height: 500px;
        background-color: lightgray;
        }

    .hijo {
        height: 50%;  /* Se ajusta al 50% del padre */
        background-color: coral;
        }

4. Flexbox: Diseño flexible y alineación

Flexbox permite distribuir elementos de manera eficiente dentro de un contenedor flexible.

• display: flex; → Activa Flexbox en un contenedor.
• justify-content → Alinea horizontalmente (center, space-between, etc.).
• align-items → Alinea verticalmente (stretch, center, etc.).
• flex-direction → Controla la dirección (row, column).

Conclusión

• height y box-sizing influyen en el tamaño de los elementos.
• Las unidades de viewport (vh, vw) permiten crear diseños adaptables.
• La relación entre elementos padre e hijo afecta el diseño y posicionamiento.
• Los diferentes valores de position controlan la ubicación de los elementos en la página.
• Flexbox facilita la alineación y distribución de elementos en un contenedor flexible.