Hola, hoy vamos a hablar de Display y Visibilidad en Tu Página Web. Ahora, cuando llegue el momento de hacer su página, una y otra vez voy a decirle que diseñar dónde desea que estén las cosas es clave para una página realmente efectiva. Y una de las cosas que debes recordar es que cada elemento que miramos es básicamente una caja. Y el modelo de caja es algo que vamos a cubrir en una futura conferencia. Pero antes de llegar a los detalles, sólo quiero hablar de algunos detalles. Porque el funcionamiento de la visualización en el elemento de visualización afecta a todos los elementos vecinos de la página. Así que antes de empezar, sólo quiero recordarte que cada elemento de tu página es una caja. Sólo piénsalo de esa manera. Y mostrar es cómo se puede decidir si las cajas deben estar una al lado de la otra, debajo de la otra, y cosas diferentes como esas. Así que cuando hablamos de visualización, hay algunos valores comunes que casi todo el mundo usa o son solo un valor predeterminado, por lo que lo has estado usando sin siquiera saberlo. Los elementos que están en línea se sentarán al lado de otros elementos, ocupan lo suficiente ancho y alto y no más, cuando los coloques en la página. Así que pienso en estos como mis buenos hijos en los elementos de la camioneta. Está bien si quiero poner a tres niños en el asiento trasero. No se van a codar el uno al otro, están bien. Se van a llevar bien. El otro tipo de pantalla es bloque. Y lo que hace el bloque es que fuerza un salto de línea entre tus elementos. Así que, de nuevo, con mi ejemplo, tengo un niño que realmente no puede sentarse al lado de nadie más. Tengo que ponerlos en su propia fila. A pesar de que es muy pequeña y no ocupa tanto espacio, tiene toda una fila para sí misma cuando estamos conduciendo en el coche. Lo bueno de los elementos de bloque es que, mientras ocupan todo el ancho horizontal y la altura suficiente, puede entrar y puede establecer una altura y un ancho en esos elementos. Entonces, aunque sea bloque, y hayas reservado todo el ancho de la página, puedes decirlo, pero realmente solo quiero que sea 40 píxeles, o la mitad de la página, o algo así. Entonces, con inline, ocupa suficiente espacio, y no eres capaz de cambiar eso. No puedes decir que quiero que sea más grande o más pequeño. Si está en línea, es todo lo que obtienes. Con el bloque tienes un poco más de flexibilidad, pero tienes el problema de que estás reservando mucho espacio. Así que, por supuesto, lo que se nos ocurrió es esta idea de algo que toma lo mejor de ambos. Y esto es un bloque en línea. Los elementos que tienen un bloque en línea de visualización van a ser los mismos que en línea y que pueden estar uno al lado del otro, pero también aceptarán alto y ancho. Así que si tienes dos cosas que quieren estar al lado de la otra, pero quieres darles mucho espacio, y ahora están en línea. Bueno, adelante, cámbialo a bloque en línea, y luego puedes darle una altura y un ancho. Y si tienes algo que es un bloque y quieres dos de ellos al lado de cada uno, de nuevo, no hay problema. Cámbielos a bloque en línea y puede establecer el ancho y el alto. El cuarto que realmente no usamos tanto es la idea de mostrar ninguno. Y lo que sucede aquí es que si tiene un elemento en su página y le da ninguna visualización, es como si el navegador ignorara por completo que existe. Es como si lo levantara y lo sacara de la página. Así que estos cuatro, el en línea, el bloque, el bloque en línea y el ninguno son los que realmente vamos a empezar a jugar al principio. Entonces, lo que tengo aquí es solo un archivo simple que va a tener tres elementos de span, tres elementos div y tres elementos de párrafo. Si recuerdas, los elementos de span están en línea, por lo que solo ocuparán tanto espacio como necesiten. Pero los divs y los párrafos, esos son bloques, así que van a ocupar más espacio. En el lado de aquí, lo que he hecho es que he agregado un poco de estilo, que puede o no tener sentido cuando hablamos por primera vez, pero le di a cada uno de mis tramos una altura y un ancho. Básicamente, todos mis elementos, una altura y un ancho y un color de fondo diferente. Así que, si vamos a verlo ahora mismo. Verías que he hecho todos mis tramos verdes, todos mis divs azules, y todos mis párrafos una especie de color púrpura rosado. Y cada uno establece exactamente por defecto como iría. La razón por la que los divs son tan grandes como son y los párrafos son tan grandes como son, de nuevo lo ponemos en nuestra hoja de estilo. Puedes ver mi altura y mi anchura. Si no los incluyera de forma predeterminada, estos divs y párrafos ocuparían todo el ancho de la pantalla, y serían realmente pequeños porque solo necesitarían espacio suficiente para tener ese texto. Así que vamos a seguir adelante y jugar con esto. Normalmente, entraba en mi hoja de estilo y ponía cosas diferentes en, probaba diferentes pantallas y cosas diferentes como esas. Pero espero que sea un poco más claro para ti si, en cambio, hago esto al mismo tiempo. Así que puede seguir conmigo con lo que es inspeccionar el elemento, o puede seguir adelante y cambiar el código en su archivo, guardarlo, actualizarlo, guardarlo, actualizarlo. Así que tengo que inspeccionar el elemento aquí haciendo clic derecho, y lo que voy a hacer ahora es hacer clic derecho en uno de estos elementos de extensión. Inspecciona Element y lo aparece para mí. Cualquier elemento en tu página con el que puedas jugar, puedes jugar con solo ese elemento en particular que estás metiendo ahí o puedo decir que quiero jugar con todos los tramos. Así que vamos a mirar aquí abajo. En este momento, tengo una altura y un ancho para cada uno de mis elementos de luz. Pero en realidad no son muy grandes. Entonces, ¿cómo cambiamos eso? Si algo está en línea, pero quieres darle una altura y un ancho, bajamos a mostrar, y yo voy a ir aquí. Y voy a intentar bloquear en línea. Boom, enseguida mis tramos se han apoderado de esas propiedades. Así que antes, cuando estaban en línea, eran pequeños. Cuando están en línea, puedo darles forma muy bien. Y si los estoy cambiando a bloquear, puedes ver ahora que están uno encima del otro porque a los elementos de bloque no les gusta estar uno al lado del otro. La última propiedad que voy a mostrarte aquí es esta idea de ninguna. Cuando no tienes ninguno, es como si los tramos ni siquiera existieran. No guardaste espacio para ellos, no es como si supieras siquiera mirando la página que alguna vez estuvieron allí. Así que algo interesante que hacer y podrías usarlo más tarde si quieres que las cosas aparezcan algunas veces y no otras pero no quieres dejar un gran espacio en blanco. Así que, adelante y tómate un segundo y voy a hacer clic en algunas de las otras cosas. Así que, por ejemplo, mis divs, puedo ir y puedo decir, sabes qué, quiero hacer solo este div, quiero seguir adelante y hacerlo en línea, y veamos qué pasa. Bueno, lo extraño es que lo cambié y no pasó nada en realidad y me pregunto si sabes por qué. Cuando tengas un bloque en línea, estás diciendo que oh, adelante y ponme junto a otras personas si encajo. Pero si tus vecinos también están bloqueados, no va a funcionar. Así que ahora, en lugar de cambiar solo uno, voy a cambiar todos los divs. Y puedes ver eso, oh, porque son alrededor del 45%, dos de ellos encajan juntos, pero el último no. Así que realmente no hay una buena manera de sentirse cómodo con la pantalla hasta que tome este código y comience a cambiar las cosas. ¿ Qué pasa si está en línea? ¿ Qué pasa si es un bloque en línea? ¿ Qué pasa si es lapso? Y preste mucha atención al hecho de que no es suficiente saber cuál es la pantalla para el único elemento en el que está trabajando, también necesita conocer la pantalla para sus vecinos. Pero, vamos a hablar un poco más. Cuando estamos hablando de visualización, es bastante común hablar también de otras dos propiedades. Y estos se llaman flotante y claro. Y lo que hacen flotante y claro es que no necesariamente dicen dónde quieres que esté la página, el elemento de tu página sea específicamente, sino donde generalmente quieres ponerla. De forma predeterminada, cuando el navegador está poniendo cosas en la página, comienza en la esquina superior izquierda. Y empieza a ponerlos, así que mirando tu sitio, sería como lo primero, lo primero, lo siguiente es un bloque, así que mejor lo pongo debajo. Y sigue añadiendo cosas. Por lo tanto, si su navegador es realmente grande, puede encajar más elementos uno junto al otro, si es pequeño, puede caber menos. Bueno flotar te permite reposicionar las cosas, y dice hey Quiero que flotes esto en cualquier lugar, y si digo flotar bien, quiero que lo pongas lo más lejos posible a la derecha. Si digo flotar a la izquierda, quiero que lo pongas tan lejos como puedas. Los otros elementos son básicamente conscientes el uno del otro, y cuando usas flotador, no se superpondrán, pero las cosas van a parecer un poco locas. Y cuando vuelves a agregar flotador, estás afectando a tus vecinos porque tus vecinos necesitan saber a dónde vas. Por eso tenemos esta propiedad adicional llamada clara. Porque a veces, cuando estás codificando, quieres asegurarte de que las cosas no están flotando a tu izquierda o a tu derecha. Realmente quieres tener ese espacio todo para ti mismo, en cuyo caso puedes usar claro a la izquierda, claro a la derecha o borrar ambos. Despejen a la izquierda para asegurarse de que no hay nada flotando a la izquierda. Claro a la derecha significa que no hay nada flotando a la derecha. Y borra ambos, así como puedes adivinar, significa que nada debería estar flotando a tu lado en absoluto. Así que sigamos adelante y echemos otro vistazo a un ejemplo más donde voy a jugar con ese mismo código, pero voy a empezar a usar float y clear también. Así que vamos a ver el mismo archivo exacto que estábamos mirando cuando estaba jugando con el bloque de visualización, en línea, ninguno, etc. Pero ahora, vamos a lanzar flotante y claro en la mezcla también. Así que aquí está el código que estamos viendo, y aquí está el sitio web. Y lo primero que voy a hacer es jugar con los tramos de aquí y voy a intentar flotarlos. Así que recuerda, cuando flotas algo, básicamente estás diciendo que lo pongas tan lejos como puedas y los otros elementos casi van a actuar como si no estuvieran ahí, pero no van a superponerlo. Así que voy a bajar aquí, ir a mi carroza. Di flotar. Ahora, lo primero que voy a hacer es que voy a flotar hacia la izquierda, lo que significa que en realidad no se van a mover demasiado. Lo que quiero que busques es que ahora mismo, hay un poco de espacio entre cada uno de mis tramos. Cuando lo cambio a la izquierda, ese espacio desaparece y el div realmente va debajo también, porque los tramos están en la parte superior. Ahora cuando trato de cambiarlo y flotarlo bien. Cuando lo flote bien, quiero que te des cuenta de que no solo no tienen espacio entre ellos, que están una especie de justo al lado del otro otra vez. Pero si nos fijamos, el orden de la A, B y C son diferentes. Debido a que los primeros elementos que se coloca en la página son el tramo A y lo mueve lo más lejos posible a la derecha. Y luego, cuando está haciendo el tramo B, se está moviendo lo más lejos posible a la derecha, y también abarca C. Así que esto es algo interesante, y se puede ver que si estuvieran a la izquierda, los divs se solaparían con ellos. Muy bien, así que sigamos adelante y hagamos un poco más de estas cosas. Y voy a hacer un cambio todos mis divs, para que también lo sean. Vamos aquí, flote a la izquierda. Así que por ahora la página se ve un poco loca porque las cosas van por todas partes y tú realmente, probablemente no quieras que se vea así. Particularmente si queríamos que todos nuestros párrafos estuvieran realmente en la parte inferior de la página. Así que voy a ir aquí a mis párrafos. Y voy a seguir adelante y voy a decir, que no voy a flotar estos. En cambio, voy a decir que he terminado con flotar, por favor deja de flotar cosas a mi alrededor. Y voy a despejar ambos lados. Así que los párrafos dicen ahora, aléjame de toda esta locura flotante. Sólo quiero estar aquí abajo. Flotando, despejando, cosas diferentes como esta. Cuando hacemos este tipo de ejemplos de código realmente simples en la conferencia, no siempre van a tener tanto sentido como cuando los estás poniendo como parte de algo más grande. Pero el problema es que no puedo mostrarles ejemplos de algo más grande porque todos se quedarían dormidos unos tres o cuatro minutos en el código. Así que adelante, haz lo que siempre hemos estado haciendo y juega con esto un poco hasta que tengas la idea de lo que hacen. A medida que pasa el tiempo, empezarás a averiguar cuándo quieres que realmente hagan este tipo de acciones.