▷ Estructura y Propiedades CSS 【 TEORÍA 】

 

Estructura y Propiedades CSS

CSS es un lenguaje fundamental en el desarrollo web, permitiendo controlar la apariencia y disposición de los elementos en una página. A continuación, se explican algunas de las propiedades más utilizadas para estructurar y organizar los elementos de manera eficiente.

Propiedad float, overflow: hidden y clear

La propiedad float permite alinear elementos a la izquierda (left) o a la derecha (right) dentro de un contenedor, facilitando la creación de diseños con imágenes y texto.

img {
    float: left;
    margin-right: 10px;
}

El uso de float puede afectar la disposición de otros elementos. Para evitar que los elementos flotantes interfieran con los demás, se emplea clear, que indica que un elemento no debe posicionarse al lado de elementos flotantes.

div {
    clear: both;
}

Por otro lado, overflow: hidden se utiliza para manejar el contenido que desborda un contenedor, asegurando que los elementos internos no sobresalgan del área asignada.

.container {
    overflow: hidden;
}

Posicionamiento en CSS: Absoluta, Relativa y Fija

El posicionamiento de los elementos en CSS permite colocarlos en ubicaciones específicas dentro de la página:

• relative: Posiciona un elemento en relación con su posición original.

• absolute: Ubica un elemento en relación con su contenedor más cercano que tenga position: relative.

• fixed: Permite que un elemento permanezca en la misma posición mientras se desplaza la página.

.relative-box {
    position: relative;
    top: 20px;
    left: 30px;
}

.absolute-box {
    position: absolute;
    top: 50px;
    right: 20px;
}

.fixed-box {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

Cajas flexibles y alineación de elementos

El modelo de cajas flexibles (flexbox) permite distribuir los elementos dentro de un contenedor de manera eficiente.

.container {
    display: flex;
    justify-content: center; /* Alinea elementos en el centro horizontalmente */
    align-items: center; /* Alinea elementos en el centro verticalmente */
}

Algunas propiedades comunes en flexbox son:

• justify-content: Controla la alineación horizontal (flex-start, center, flex-end, space-between, space-around).

• align-items: Alinea elementos en el eje vertical (flex-start, center, flex-end, stretch).

• flex-direction: Define la dirección de los elementos (row, column).

margin, padding, border y border-radius

El modelo de caja en CSS define el espacio que ocupa un elemento y cómo se separa de otros.

• margin: Espacio exterior de un elemento.

• padding: Espaciado interno entre el contenido y el borde.

• border: Borde alrededor del contenido y el relleno.

• border-radius: Permite redondear las esquinas de un borde.

.box {
    margin: 20px;
    padding: 15px;
    border: 2px solid black;
    border-radius: 10px;
}

Puedes usar el siguiente generador de bordes para tus proyectos web▶️https://www.cssmatic.com/es/border-radius

Estas propiedades son esenciales para estructurar elementos en CSS, facilitando la creación de diseños visualmente organizados y responsivos.

En el siguiente video veremos algunas propiedades CSS en los distintos elementos HTML de un sitio web.

🗨️ ¿Qué opinas?
Me encantaría saber tu opinión sobre este tema. Déjame un comentario aquí abajo 💬 y, si te gustó el contenido, ¡no olvides seguir el blog para no perderte las próximas publicaciones! 📚✨