In the video, the following topics related to the display property in HTML and CSS are covered:
Default Display of HTML Tags: It's explained that each HTML tag has a default display value. For instance, header tags (h1, h2, h3, etc.) have a display block value, while link tags (a) and span tags are of inline type. It also mentions the inline-block value for elements like buttons, images, and form inputs.
Incorrect Uses of Display: It demonstrates how errors are often made when changing the display of elements, such as converting block elements into inline-block to avoid space between them. Then, it highlights that this isn't a suitable solution and suggests using other properties, such as vertical-align, to solve alignment issues.
The Case of display: none: It explains how to hide elements using display: none and how this affects the representation on the page. It shows that when display: none is applied, the element disappears and doesn't occupy space on the page. It also mentions the visibility property as an alternative that keeps the space occupied by the hidden element.
Automatic Display Change: It shows how certain properties, such as float or flex, can modify the display of elements without the need to manually change it. For example, applying display: flex to a container makes the inner elements become flex elements, allowing for a more flexible and automatic layout.
Example Using display: flex with Media Queries: It demonstrates how display: flex can be used along with media queries to create responsive layouts. An example is shown where elements are rearranged and change direction based on the width of the browser window.
The video provides practical examples and detailed explanations of these concepts. You can complement this information with additional examples and practices if you want to delve deeper into using the display property in HTML and CSS.
**ESPAÑOL
En el video se tratan los siguientes temas relacionados con la propiedad display en HTML y CSS:
El Display por Defecto de las Etiquetas HTML: Se explica que cada etiqueta HTML tiene un valor de display por defecto. Por ejemplo, las etiquetas de encabezado (h1, h2, h3, etc.) tienen un valor de display block, mientras que las etiquetas de enlace (a) y span son de tipo inline. También se menciona el valor inline-block para elementos como botones, imágenes y entradas de formulario.
Usos Incorrectos de Display: Se muestra cómo a menudo se cometen errores al cambiar el display de elementos, como convertir elementos block en inline-block para evitar el espacio entre ellos. Luego, se destaca que esta no es una solución adecuada y se sugiere usar otras propiedades, como vertical-align, para resolver problemas de alineación.
El Caso de display: none: Se explica cómo ocultar elementos utilizando display: none y cómo esto afecta a la representación en la página. Se muestra que cuando se aplica display: none, el elemento desaparece y no ocupa espacio en la página. También se menciona la propiedad visibility como una alternativa que mantiene el espacio ocupado por el elemento oculto.
Cambio Automático del Display: Se muestra cómo ciertas propiedades, como float o flex, pueden modificar el display de elementos sin necesidad de cambiarlo manualmente. Por ejemplo, al aplicar display: flex a un contenedor, los elementos internos se convierten en elementos flex, lo que permite un diseño más flexible y automático.
Ejemplo de Uso de display: flex con Media Queries: Se demuestra cómo se puede utilizar display: flex junto con media queries para crear diseños responsivos. Se muestra un ejemplo donde los elementos se reorganizan y cambian de dirección en función del ancho de la ventana del navegador.
El video proporciona ejemplos prácticos y explicaciones detalladas de estos conceptos. Puedes complementar esta información con ejemplos y prácticas adicionales si deseas profundizar en el uso de la propiedad display en HTML y CSS.