Entonces, una de las cosas que puede haber notado mientras ha estado pasando por otro código es que a veces cuando se mete con la altura y el ancho de un elemento. Te das cuenta de que ya no es lo suficientemente grande como para contener todo el texto que querías mostrar. Entonces, ¿qué puedes hacer cuando el contenido ya no encaja dentro de la caja que has hecho con tu altura y anchura? Bueno, puedes usar un desbordamiento de propiedades para determinar cómo las personas podrán acceder a ese contenido, o si incluso van a poder acceder a él. Los cuatro valores para desbordamiento, incluyen visible, lo que básicamente significa si ha dibujado un cuadro. Y hay un montón de texto dentro, el texto va a salir de la caja. Así que no importa qué, el contenido es visible incluso si va fuera de las líneas. Escondido hace más o menos lo contrario. Dice, [SONIDO] si tienes algo dentro de esta caja y es demasiado grande, se ha ido. No puedes verlo. Ahora bien, esta no es una gran idea, porque va a causar problemas si el usuario aumenta el tamaño de fuente en su navegador. Así que si has hecho una especie de caja de 600 por 800 píxeles, y piensas, oh esto va a ser genial, no hay problema. Cualquiera será capaz de leer esto. ¿ Qué va a pasar si alguien entra y aumenta el tamaño de la fuente? El cuadro no es más grande, pero el texto sí, por lo que es posible que no puedan ver el contenido. Entonces, una tercera opción es dar desplazamiento de desbordamiento. Y lo que esto hará es que en realidad dará una barra de desplazamiento horizontal y vertical al elemento. Incluso si es solo un párrafo, de repente tu párrafo tiene una barra de desplazamiento para que la gente pueda ver todo lo que contiene. El valor final es automático, y lo que hace es que dice, oh, solo voy a agregar barras de desplazamiento según sea necesario. Dependiendo de cómo la persona está viendo el sitio en este momento. Voy a seguir adelante y enumerar algunos recursos para mostrarles algunos ejemplos de cómo se ve el desbordamiento. Pero por ahora, vamos a seguir adelante y seguir adelante. Porque lo que quería compartir contigo es esta idea de otros valores de visualización. Una vez más, los navegadores siempre están cambiando. HTML5 y las versiones futuras siempre están cambiando y están tratando de agregar nuevo soporte. El problema es que cuando ves estas nuevas herramientas geniales no siempre funcionan en todos los navegadores. Entonces, bloque en línea, bloque en línea, bloque y ninguno funcionará en todas partes. Pero aquí hay algunos más que poco a poco están empezando a ganar aceptación. Y esos son mesa, cuadrícula y flexbox. Para Grid y Flexbox, voy a dejarte que juegues con él. Pero quería mostrarles un ejemplo de dónde muchos de mis estudiantes encuentran realmente útil la pantalla de la mesa. Cómo funciona una visualización de tabla es que no crea una tabla real con su código HTML, ni tiene la tabla de etiquetas. Pero le estás diciendo a tu navegador que quieres estructurarlo como si fuera una tabla. Por lo tanto, haría que cualquier tipo de elemento contenedor visualizar:tabla. Y luego cualquier cosa que desee alinear en buenas columnas, usaría display:table-cell. Así que esto suena muy confuso, así que quería asegurarme de que te di un ejemplo para seguir conmigo. Así que tengo aquí un código que básicamente es solo un div, un par de divs con algunos párrafos en él. Y lo que quería hacer era asegurarme de que no tuvieran exactamente el mismo contenido. Como puede ver, cada uno de los divs está ahora uno al lado del otro porque le hemos dicho que no queremos que estén uno debajo del otro. Pero esto no es lo que esperabas que pareciera. Así que vamos a seguir adelante y tratar de agregar ese flotador a la izquierda. Ahorra, voy a ir por aquí y refrescarme. Y puedes ver, se ve un poco mejor. Por lo tanto, esto es genial porque queríamos que todo estuviera al lado del otro. Pero lo que voy a hacer ahora es mostrarte algo que no funciona muy bien. Y esa es la idea de cuando lo redimensiono. Ahora puede ver esta idea de que el desbordamiento podría ser realmente importante porque ahora las cosas están saliendo de los divs mismos. Además, realmente no tengo ningún tipo de margen entre ellos. Así que vamos a seguir adelante y añadir desbordamiento, Oculto, o desplazamiento, sólo para mostrarte de lo que estaba hablando allí por un segundo. Voy a seguir adelante y refrescarla. Y ahora puedes ver que todo está contenido dentro del cuadro de contenido, y en realidad puedo entrar aquí y puedo desplazarme cada uno de ellos. En realidad no soy un gran fan de esto, porque no me gusta que la gente necesite saber que pueden desplazarse. Así que vamos a probar algo nuevo aquí, en su lugar lo que voy a hacer es establecer el ancho en 30%, y voy a seguir adelante y usar el bloque en línea. Y echemos un vistazo a cómo se ve esto ahora. Necesito recordar, estoy usando una nueva hoja de estilo, así que necesito entrar y cambiar mi HTML para que esté usando esa hoja de estilo. El número de veces cuando estaba presentando estos ejemplos para ti donde olvidé cambiar la hoja de estilo, o lo olvidé y lo nombré mal fue realmente embarazoso. Así que espero que evites los mismos problemas que tuve. Por aquí voy a refrescarla. Usted puede ver que esta no es la mirada que estamos esperando. Cambia el tamaño, pero simplemente no está haciendo lo que queremos porque cada uno tiene su propia altura particular porque realmente queremos que se ajuste a eso. Aquí es donde entra la celda de la tabla. Voy a cambiar mi pantalla de bloque en línea a celda de tabla. Y por una vez, cuando vaya a refrescar, voy a saber por qué esto no funciona. Pero quiero mostrarte, cuando presiono Refrescar se ve realmente bien aquí porque lo ha hecho para que todo funcione. Ahora, dependiendo del navegador en el que estés, esto puede no funcionar. Porque lo que realmente quieres decir es, si voy a seguir adelante y hacer esta celda de mesa usada, no te olvides de entrar en tu cuerpo y decir exhibición. Muy bien y voy a refrescar y va a quedar igual, sólo va a ser un mejor estilo de codificación. Ahora, voy a tratar de poner muchos ejemplos de codificación aquí, en este curso CSS, para que puedas jugar con él. Pero, no puedo enfatizar lo suficiente que, a veces no va a funcionar exactamente igual para usted, porque podría estar usando un navegador diferente. Es posible que estés usando el mismo navegador, pero con una versión diferente. Lo más importante es que entres ahí, y sigas probando estos nuevos valores, viendo lo que pasa y jugando con ellos. Cuando llegue el momento de su proyecto final, entonces es cuando debe ser muy específico para asegurarse de que todo se vea bien en todos los navegadores. Lo último que quiero mencionar muy rápidamente fue esta idea de visibilidad. Y especifica si un elemento va a ser visto o no por un usuario. Ahora hablamos de esto antes cuando hablé de mostrar ninguno, pero lo que pasa en la visibilidad es que en realidad se puede ver que se dejó espacio para ello. No hay nada ahí. Por lo tanto, cuando utiliza visibilidad, las opciones son visibles, ocultas o contrapuestas si está utilizando tablas. Si ves esto y te preguntas cuál es la diferencia entre visualización y visibilidad. Solo recuerde que al mostrar ninguno, el navegador actúa como si ni siquiera estuviera allí. No ves nada. Con la visibilidad oculta, el navegador va a dejar el espacio que ese elemento ocuparía, simplemente no lo muestra. Así que, finalmente, sigamos adelante y revisemos. La pantalla es sólo una herramienta de las muchas que vamos a utilizar para posicionar los elementos en su página. El diseño temprano, decidir cómo quieres que tenga el aspecto de tu página antes de empezar a codificar, va a facilitar las cosas. No codifiques pensando que quiero usar el diseño flotante derecho, y luego decidas oh, voy a tener que usar flotador aquí mismo. Utilice todas las diferentes herramientas que tenemos, como inspeccionar elemento, para ver sus diferentes opciones. Y va a hacer tu vida de codificación mucho más fácil. Queremos evitar guardar actualización, guardar actualización. En su lugar, use esas herramientas y verá que está tomando decisiones realmente buenas en su diseño y su código. Gracias.