Propiedad de pantalla CSS | Explicado
Propiedad de visualización
Como su nombre indica, la propiedad de visualización de CSS define cómo se muestran los elementos HTML en una página web. Esta propiedad puede ser de gran utilidad cuando desea cambiar el comportamiento habitual de un elemento HTML. Supongamos que, por alguna razón, desea intercambiar el estado de un elemento en línea al de un elemento de nivel de bloque, entonces puede usar esta propiedad para representar este cambio.
Sintaxis
Pantalla: valor;Aquí hemos demostrado algunos valores de propiedad de visualización para su mejor comprensión.
Elementos en línea
Los elementos que consumen solo la cantidad requerida de espacio se denominan elementos en línea. También se pueden referir como elementos que se muestran en una línea.Estos elementos no comienzan desde una nueva línea, además, puede colocar múltiples elementos en línea en la misma línea. Algunos ejemplos son, etc.
Cómo convertir elementos de nivel de bloque a elementos en línea utilizando la propiedad de visualización
En este ejemplo, estamos creando tres elementos y estableciendo el valor de la propiedad de visualización como "en línea", por lo tanto, todos los elementos se mostrarán en una sola línea y consumirán solo la cantidad de espacio requerido.
Producción
Aunque el elemento por defecto es un elemento a nivel de bloque, pero cuando establece el valor de la propiedad de visualización en "en línea" se comportará como un elemento en línea.
Elementos de nivel de bloque
Los elementos que consumen todo el espacio disponible (de izquierda a derecha), y comienzan desde una nueva línea se consideran elementos de nivel de bloque. Los elementos de nivel de bloque son capaces de mantener elementos en línea junto con otros elementos de nivel de bloque. La mayoría de los elementos en HTML son elementos de nivel de bloque. Algunos ejemplos son ,
- ,
- elemento.
, etc.
Cómo convertir elementos en línea en elementos de nivel de bloque utilizando la propiedad de visualización
En aras de este ejemplo, consideraremos dos elementos y estableceremos el valor de la propiedad de visualización en "bloquear". Como resultado, ambos elementos consumirán todo el espacio horizontal, actuando como elementos de nivel de bloque. Aunque el elemento por defecto es un elemento en línea.
Producción
Visualización flexible
Este valor ajusta eficientemente los elementos dentro de un contenedor. Igualmente distribuye el espacio entre elementos presentes en un contenedor.
¿Cómo funciona el valor flexible de la propiedad de pantalla?
En este ejemplo, hemos ilustrado el valor flexible de la propiedad de visualización. Hemos creado cinco
elementos dentro de un elemento que tiene una clase flexible y hemos asignado el valor "flex" a la propiedad de visualización de la
elementos.
Producción
Visualización
El valor de la cuadrícula de la propiedad de visualización es útil al establecer elementos en forma de cuadrícula, además, cuando se usa la red no es necesario utilizar flotadores y posicionamiento.
¿Cómo funciona el valor de la cuadrícula de la propiedad de visualización?
En este ejemplo, hemos creado seis elementos dentro de un elemento más grande que tiene un contenido de cuadrícula de clase y hemos asignado el valor de "cuadrícula" a la propiedad de visualización de la
elementos
Producción
Hay muchos otros valores que se pueden asignar a la propiedad de visualización que son los siguientes.
| Valor | Descripción | |||||||||||||||||||||||
| en línea | Este valor muestra elementos como elementos en línea. | |||||||||||||||||||||||
| bloquear | Este valor muestra elementos como elementos de nivel de bloque. | |||||||||||||||||||||||
| contenido | Este valor hace que un contenedor desaparezca. | |||||||||||||||||||||||
| doblar | Este valor muestra elementos como contenedores flexibles a nivel de bloque. | |||||||||||||||||||||||
| red | Este valor muestra elementos como contenedores de cuadrícula a nivel de bloque. | |||||||||||||||||||||||
| bloqueo en línea | Este valor muestra elementos como contenedores de bloques de nivel en línea. | |||||||||||||||||||||||
| en línea | Este valor muestra elementos como contenedores flexibles en línea. | |||||||||||||||||||||||
| en línea | Este valor muestra elementos como contenedores de cuadrícula a nivel en línea. | |||||||||||||||||||||||
| mesa en línea | Este valor muestra tablas de nivel en línea. | |||||||||||||||||||||||
| ítem de lista | Este valor muestra todos los elementos en un | |||||||||||||||||||||||
| entrar corriendo | Este valor sobre la base del contexto muestra elementos como elementos en línea o de nivel de bloque. | |||||||||||||||||||||||
| mesa | Este valor hace que los elementos se comporten como
Para una mejor comprensión, puede probar otros valores de propiedad de visualización para ver cómo funcionan. Conclusión La propiedad de pantalla CSS define cómo se muestran los elementos HTML en una página web, además, utilizando esta propiedad puede alterar el comportamiento predeterminado de un elemento HTML, por ejemplo, puede hacer que un elemento en línea se comporte como elemento de nivel de bloque y viceversa. Hay una amplia gama de valores que puede aplicar a la propiedad de visualización, cada uno con un propósito diferente. En este artículo, la propiedad de la pantalla se discute en profundidad junto con ejemplos adecuados. |