CURSO de CSS 2021 Rapido y Facil #12 | 💻 CAJAS FLOTANTES

Summary

En este episodio del curso de CSS, el presentador Clayon se adentra en el concepto de 'caja flotante', una técnica utilizada para posicionar elementos en el navegador. Se inicia con un ejemplo sencillo, utilizando una imagen y un párrafo de texto, y se explica cómo aplicar la propiedad 'float' para desplazar la imagen a la izquierda o derecha, permitiendo que el texto rodee a la imagen. Además, se aborda la importancia de contener elementos en un contenedor y se sugiere el uso de medidas en porcentaje para adaptarse a diferentes tamaños de navegador. Se introducen conceptos como 'box-sizing' para manejar las dimensiones exactas de los elementos y se enfatiza la necesidad de ser cuidadoso con los márgenes y bordes al trabajar con cajas flotantes.

Takeaways

• 😀 El episodio trata sobre el tema de las cajas flotantes en CSS.
• 👨‍🏫 Se inicia eliminando todo lo previamente visto y se trabaja con un body vacío y estilos básicos.
• 🖼️ Se utiliza una imagen en el body y se le asigna un tamaño específico usando CSS.
• 📄 Se crea un contenedor para los elementos y se le aplica un ancho del 90% para adaptarse a diferentes tamaños de navegador.
• 📐 Se explica cómo posicionar elementos usando la propiedad 'float' y cómo esto afecta a los elementos alrededor.
• 🔄 Se muestra cómo cambiar la dirección de flotación de un elemento de izquierda a derecha.
• 💬 Se trabaja con párrafos y se les da estilo, incluyendo el uso de 'padding' para separar el texto.
• 🔲 Se crea un diseño dinámico usando contenedores anidados y se les aplica la propiedad 'float'.
• 🎨 Se discute la importancia de medir elementos con 'box-sizing' para evitar problemas de dimensionamiento.
• 🔲 Se menciona el uso de 'border' y 'padding' para dar estilo a los elementos y se advierte sobre el impacto en el tamaño total del elemento.

Q & A

¿Qué tema se aborda en este episodio del curso de CSS?

En este episodio se aborda el tema de las cajas flotantes en CSS, explicando cómo posicionar elementos en el navegador de manera que queden ordenados.

¿Cuál es el primer paso que se toma para comenzar con las cajas flotantes según el guion?

El primer paso es eliminar todo lo que se había visto anteriormente, dejar solo el body vacío y configurar el estilo de la etiqueta body.

¿Qué elemento HTML se utiliza para示范 las cajas flotantes en el ejemplo?

Se utiliza un elemento `<img>` para示范 las cajas flotantes, seleccionando una imagen de la carpeta web.

¿Cómo se le da dimensión a la imagen en el ejemplo?

Se le da dimensión a la imagen utilizando CSS, específicamente se le asigna un alto de 250 píxeles.

¿Qué se sugiere hacer para posicionar elementos dentro de un contenedor cuando se trabaja con cajas flotantes?

Se sugiere colocar los elementos dentro de un contenedor y aplicar un ancho limitado, como el 90%, para que se ajusten de manera adecuada al navegador.

¿Qué propiedad CSS se utiliza para hacer flotar un elemento y cómo se aplica en el ejemplo?

Se utiliza la propiedad 'float' en CSS para hacer flotar un elemento. En el ejemplo, se aplica a la imagen con la propiedad 'float: left;' para que se posicione a la izquierda.

¿Cómo se mejora la separación entre el texto y la imagen cuando se utiliza la propiedad 'float'?

Se mejora la separación agregando 'padding' al elemento flotante, en este caso, se le agrega un padding de 20 píxeles.

¿Qué cambios se realizan en el contenedor principal para adaptarse a las cajas flotantes?

Se le da un ancho del 90% y se le aplica un 'margin' automático para que se adapte al navegador y se posicionen correctamente los elementos flotantes dentro.

¿Cómo se trabaja con múltiples cajas flotantes dentro de un contenedor?

Se crean múltiples elementos dentro del contenedor, se les asigna la clase 'bloque' y se les aplica la propiedad 'float: left;' para que se posicionen a la izquierda.

¿Qué medida se sugiere para el ancho de los elementos tipo bloque cuando se trabaja con múltiples cajas flotantes?

Se sugiere un ancho del 30% para cada elemento tipo bloque, lo que permite que tres elementos se ajusten en el ancho del contenedor.

¿Qué propiedad CSS se recomienda usar para limitar las medidas exactas de un elemento cuando se trabaja con bordes y padding?

Se recomienda usar la propiedad 'box-sizing: border-box;' para limitar las medidas exactas de un elemento y evitar que el borde y el padding incrementen el tamaño total del elemento.