CURSO de CSS 2021 Rapido y Facil #12 | 💻 CAJAS FLOTANTES
Summary
TLDREn 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.
Outlines
🌐 Introducción a las Cajas Flotantes en CSS
El primer párrafo presenta el tema de las cajas flotantes en CSS, una técnica utilizada para posicionar elementos dentro de un navegador de manera que no ocupen todo el ancho disponible. Se menciona que este método fue muy utilizado en el pasado, aunque existen nuevas reglas para posicionar objetos. El presentador, Clayon, inicia con un ejemplo sencillo utilizando una imagen en el body de un documento HTML, y luego se enfoca en darle estilos a la imagen y un párrafo de texto, utilizando un contenedor para organizar mejor los elementos.
🔄 Manipulación de Cajas Flotantes
En el segundo párrafo, se profundiza en el uso de la propiedad 'float' para crear cajas flotantes. Se explica cómo aplicar 'float' a una imagen y cómo esto permite que otros elementos se posicionen a su lado. Además, se discute la utilización de 'padding' para crear espacio entre el texto y la imagen, y se muestra cómo cambiar la dirección de flotación de 'left' a 'right'. Se sugiere trabajar con contenedores para organizar mejor los elementos y se da un ejemplo práctico de cómo aplicar 'float' a bloques dentro de un contenedor, estableciendo un ancho específico para cada bloque y utilizando 'margin' y 'border' para mejorar la visualización.
📏 Consideraciones sobre Medidas y Dimensiones
El tercer párrafo aborda consideraciones adicionales al trabajar con cajas flotantes, como el impacto de 'border' y 'padding' en el tamaño total de un elemento. Se menciona la importancia de ser cuidadoso con estas propiedades para evitar problemas de dimensionamiento. Además, se introduce la propiedad 'box-sizing', que permite controlar cómo se calculan las dimensiones de un elemento, incluyendo el contenido, bordes y padding. Se enfatiza la necesidad de ajustar estas medidas para que los elementos se acomoden correctamente en el diseño, especialmente cuando se trabaja con porcentajes de ancho. Finalmente, se invita a los espectadores a seguir el curso de CSS para aprender más sobre estas y otras técnicas de diseño web.
Mindmap
Keywords
💡Cajas flotantes
💡CSS
💡Contenedor
💡Margin
💡Padding
💡Imagen
💡Párrafo
💡Clase
💡Ancho
💡Box-sizing
Highlights
Iniciamos un nuevo episodio del curso de CSS enfocado en las cajas flotantes.
Se explica que las cajas flotantes son métodos antiguos de posicionamiento de elementos en CSS.
Se muestra cómo eliminar contenido anterior y comenzar con un body vacío para evitar problemas.
Se selecciona una imagen para ser utilizada en el ejemplo de las cajas flotantes.
Se describe cómo agregar una imagen a la carpeta web y cómo hacer referencia a ella en el código HTML.
Se establece el alto de la imagen en 250 píxeles para mejorar su visualización.
Se sugiere colocar los elementos en un contenedor para facilitar la manipulación y organización.
Se le da un nombre de clase 'contenedor' al elemento que agrupa los elementos HTML.
Se establece el ancho del contenedor al 90% para que sea adaptable a diferentes tamaños de navegador.
Se trabaja con el párrafo, estableciendo un tamaño de fuente y un margen superior para mejorar la presentación.
Se introduce la propiedad 'float' para hacer flotar la imagen a la izquierda, permitiendo que el texto se adapte al lado.
Se ajusta el padding de la imagen para crear espacio entre el texto y la imagen.
Se muestra cómo cambiar la dirección de flotación de la imagen a la derecha.
Se crea un nuevo contenedor para demostrar el uso de cajas flotantes en un contexto más dinámico.
Se explica cómo aplicar la propiedad 'float' a elementos dentro de un contenedor y establecerles un ancho específico.
Se agrega un borde y un margen a los elementos flotantes para mejorar la visualización y el alineamiento.
Se discute la importancia de la propiedad 'box-sizing' para manejar correctamente los márgenes y bordes en elementos con medidas porcentuales.
Se concluye el episodio con una revisión de los conceptos aprendidos sobre las cajas flotantes y se anuncia el siguiente tema.
Transcripts
[Música]
qué tal amigos hoy charla johnny
bienvenidos a un nuevo episodio dentro
de tu curso de css hoy vamos a tocar el
tema de las cajas flotantes
qué tal amigos soy yo clayon y
bienvenidos a un nuevo episodio dentro
de tu curso de css hoy vamos a ver el
tema de las cajas flotantes y como de
costumbre vamos a eliminar todo lo que
vimos anteriormente simplemente nos
vamos a quedar con el body vacío y con
el estilo de la etiqueta body ok
recuerda controles en css y también
controles en html para no tener ningún
inconveniente bien referente a las cajas
flotantes básicamente lo que vamos a
usar con este método es tratar de
posicionar los objetos dentro de mi
navegador de alguna manera que todo
quede totalmente en orden ok es uno de
los métodos que fue muy usado que
actualmente hay otro tipo de reglas para
posicionar objetos pero no está de más
saber el tipo de caja flotante y cómo
trabajar con este tipo de elementos ok
bien vamos a comenzar como siempre con
ejemplos muy sencillos en este caso en
la parte del body lo que yo voy a hacer
es trabajar con una imagen img ok yo lo
voy a seleccionar y acá necesito
depositar la dirección de la inversión
pero sí reviso acá en mi carpeta web
tengo ninguna imagen entonces tú puedes
buscar la imagen que tú veas conveniente
en mi caso yo voy a seleccionar esta
imagen y lo único que puedes hacer es
copiar a la carpeta o simplemente
directamente arrastrar en visual de
estudio code a la carpeta web de esta
manera yo lo voy a soltar y ahí lo
tienes por defecto tiene un visor de
imagen visual studio code yo lo voy a
cerrar porque no creo que sea un tema de
mucha importancia para este episodio y
acá ya podemos ver la imagen y si revisó
también la carpeta miren acá ella
también ya lo tengo ok bien vamos a
llamar a la imagen por su nombre
en este punto voy a escribir charla jon
de hecho acá rápidamente lo puedo
seleccionar presiono controles y ahí ya
podemos visualizar la imagen
vamos a recoger esto y vamos a dejar tal
como estaba nuestro documento html ahí
me parece bien
bueno en estilo css vamos a tratar de
dar dimensión a nuestra imagen ok pero
eso vamos a llamarla imagen imagen ok y
vamos a trabajar qué te parece la parte
del height en el cual por defecto yo voy
a decirle que mida 200 píxeles controles
en es un tamaño que se puede ver muy
bien vamos a aumentarle a 250 controles
en se ve mucho mejor bien de hecho para
hacerlo algo más complicado acá yo voy a
trabajar con un párrafo que y voy a
rellenarlo con texto falso ok
controles y ya podemos verlo por el
momento aún si yo trato de manipular mi
navegador obviamente lo vemos que
siempre va a ocupar todo el ancho que
está disponible de mi navegador entonces
yo te recomiendo bueno para este caso
posicionarlo o dejar estos elementos
dentro de un contenedor
entonces yo me vengo a esta parte del
body acá y yo lo que voy a hacer es
traer un contenedor de ok ok dentro de
este tipo vamos a depositar todo esto
vamos a cortarlo con un control x y acá
vamos a seleccionar esta opción cortar y
lo vamos a pegar acá
ok está dentro del sedif y de hecho este
dip vamos a darle un nombre para eso
vamos a introducirlo mediante una clase
el cual vamos a llamarle contenedor
[Música]
ok controlen se y no pasa nada porque
precisamente los estilos lo tengo que
hacer en css entonces vuélvase ss vaca
precisamente antes de imagen yo voy a
llamar al contenedor
muy bien abrimos llaves y en ese punto
yo voy a decir que precisamente el ancho
este limitado
witt del 90% es bueno trabajar con este
tipo de medida cuando quiero que mi
navegador tome diferente tipo de tamaño
controles ya y si revisa miren siempre
va a ocupar el 90% ok
está pegado por defecto al lado
izquierdo pero acá con un margin
por el momento automática
vamos a cambiar esa disposición ok ahí
lo tienes
bien ya trabajando con este tema vamos a
trabajar también un poquito con el
párrafo también vamos a darle algo de
estilo algo que se pueda ver con sites
que te parece de 23 píxeles punto y coma
control s
[Música]
perfecto ahora vamos a ver el tema de
cajas flotantes y para trabajar un
elemento como caja flotante lo único que
hacemos es dirigirnos el objeto en este
caso a la imagen
y yo voy a decir lo siguiente vamos a
traer la palabra float que permite hacer
eso flotar y en este caso por defecto se
puede seleccionar el lado izquierda
miren yo lo voy a seleccionar y si
presionó control s
ahí lo tienes mi elemento se puso a la
izquierda pero automáticamente los otros
elementos se posicionan al lado
izquierdo ok en este caso al lado ok
para que me puedes entender mejor que
esto vamos a moverlo para que puedas
verlo mejor
ok muy bien ahora también vemos que mi
texto está un poco
muy cercas entonces acá yo puedo poner
un padding
de 20 píxeles punto y coma control s
para andar algo de separación no es lo
más bueno pero para que de esta manera
podamos distinguir lo
y puedo cambiar lo que no sabías
controlarse y se ve mucho mejor
ok simplemente para distinguir los ojos
bien entonces recuerda que si quieres
aplicar a un objeto como elemento
flotante o caja flotante lo único que
tienes que hacer es aplicar la palabra
float y la dirección o bien izquierda o
derecha voy a cambiarlo a ver por
derecha en este caso write y mi imagen
debería venirse a este lado controles a
ahí está
nada del otro mundo ok y de esta manera
vamos a poder trabajar con cajas
flotantes o bien a la izquierda o bien a
la derecha bien básicamente ese son las
funciones en los cuales vamos a manejar
pero también podemos hacer lo siguiente
vamos a eliminar todo esto también todo
lo que tiene nuestro contenedor y ahora
vamos a trabajar más que todo contexto
entonces para hacerlo de una manera más
dinámica lo que yo voy a hacer es
trabajar dentro de este contenedor otro
contenedor en el cual voy a trabajar con
un h2 es tejido simplemente va a tener
del nombre 1 y voy a trabajar también
con un párrafo con texto falso
controles en ahí lo tienes y voy a
pegarlo dos veces o que todo este
contenedor de hecho voy a darle un
nombre específico class en este caso qué
te parece en bloque
ok muy bien ahora sí copiamos control c
vamos a pegarla
y una última vez ok de hecho esta es la
apariencia que deberías tenerlo
[Música]
presionamos controles y ahí ya lo
podemos ver simplemente vamos a
cambiarlos h2 en este caso esto va a ser
bloque 2 y acá vamos a cambiarlo por
bloque tres controles ya vemos los
cambios y ahora sí vamos a trabajar con
las cajas flotantes como está dentro de
un contenedor entonces todos mis
elementos están contenidos y ocupan el
90% del navegador que jon detalle muy
importante entonces ahora lo que yo
necesito es llamar a bloque punto bloque
y dentro del bloque yo voy a traer la
propiedad que estamos viendo que sería
flotante floor left muy bien controles y
básicamente no pasa nada porque porque
estos elementos recuerden que la
etiqueta and if también funciona como
elemento bloque que su máxima de
referencias recuerden que es elementos
que vienen uno debajo de otro ok
una referencia muy importante y miren si
me expande mantienen esa propiedad para
cambiarlo entonces yo necesito traer lo
siguiente yo necesito decir que estos
elementos de tipo bloque deben tener un
ancho específico ok
en este caso como ocupe el 90% y son
tres elementos yo te sugiero introducir
30% ok vamos a hacer la prueba controles
y ahí lo tienes qué pasa si aquí pongo
un 30.5
se vea un poquito mejor de hecho miren
se acopla perfectamente para poder
distinguir cada elemento o limitarlo
mediante bloques qué te parece si
hacemos con un margin o mejor dicho con
un border
en este caso simplemente vamos a darle
un solo píxel vamos a pintarlo de un
color muy sobresaliente que sea el rojo
y también que la línea sea totalmente
sólida controles y ahí ya lo podemos ver
de alguna manera
y eso es muy importante de hecho mira
acá me voy a ir a html
y si yo quiero hacer lo mismo puedo
copiar este elemento todo este
contenedor control sea voy a pegarlo
unas dos veces más
así ok que tengamos varios controles en
y ahí lo podemos notar son elementos que
ya están introducidos de hecho miran se
van acoplando pero aún hay un defecto en
particular
que vamos a ir consiguiendo en este
episodio bien vamos a volver a css
nuestra parte y lo que más me interesa
sobre este punto
es que cuando tenemos estos elementos y
generalmente trabajamos con medidas
exactas al poner un borde a world margin
incrementan el valor para que entiendes
un poquito más sobre este tema acá yo
voy a poner un padding y ese padding yo
lo voy a dividir por 8 píxeles
[Música]
un detalle muy importante de hecho se ve
mucho mejor es lo siguiente recuerda que
cuando tú incrementa es el par en que
pones un border estás aumentando el
tamaño total del diámetro que yo tenga
en este caso no vamos a tener mucho
problema porque el with está en
porcentaje eso quiere decir que este
porcentaje hay que sumarle el borde y
exhumar ly padding que estamos
incrementando entonces mucho cuidado con
eso para no tener problemas con el
tamaño y la dimensión cuando quieres
trabajar con medidas exactas lo que
generalmente usamos es la palabra boxing
ok box hay zinc en este caso para
limitar a las medidas exactas si quieres
medir un objeto en 200 píxeles 300
píxeles y no sobrepasar esa medida yo te
recomiendo usar esta opción box 6 zinc
waterboxx ok punto y coma presiona
controles ya a simple vista se puede ver
que no tengo ningún inconveniente salvo
aquello que la medida se ha ido
totalmente acomodando a la medida que ya
tengo por obligatorio que sería el wish
de 30.5 por ciento para
uno de estos objetos que miran si yo voy
desplazando toma precisamente esa
dimensión sin ningún problema
ok y esto es totalmente muy útil en este
caso yo estoy diciendo que mis elementos
tipo flotante se acomoden al lado
izquierdo ok también puedo cambiarlo si
acá dejo de hacerlo y cambiarlo por
wright control ese entonces todos mis
elementos se posicionan al lado derecho
[Música]
muy bien este tema aún es muy extenso
vamos a pulirlo con el siguiente tema
pero por el momento espero que esta
parte haya quedado claro el movimiento
de las cajas flotantes hacen que de esta
manera pueda acomodar mis objetos de una
manera más ordenada
y bien eso ha sido todo por hoy nos
vemos en el siguiente episodio con más
dentro de tu curso de css
Browse More Related Video
5.0 / 5 (0 votes)