[2022] Propiedad de visualización CSS {DHtrust.org}

Ejemplo

Uso de algunos valores de visualización diferentes:

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

Inténtalo tú mismo »

Más ejemplos de «Pruébelo usted mismo» a continuación.

Definición y uso

los display propiedad especifica el comportamiento de visualización (el tipo de cuadro de representación) de un elemento.

En HTML, el valor de propiedad de visualización predeterminado se toma de las especificaciones HTML o de la hoja de estilo predeterminada del navegador / usuario. El valor predeterminado en XML es en línea, incluidos los elementos SVG.

Valor por defecto:	?
Heredado:	no
Animable:	no. Leer acerca de animable
Versión:	CSS1
Sintaxis de JavaScript:	objeto.style.display = «none» Pruébelo

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Propiedad
monitor	4.0	8.0	3,0	3.1	7.0

Nota: Los valores «flex» e «inline-flex» requieren el prefijo -webkit- para funcionar en Safari.

Nota: «display: contents» no funciona en Edge anterior a la versión 79.

Sintaxis CSS

Valores de propiedad

Valor

Descripción

Juegalo

en línea

Muestra un elemento como un elemento en línea (como ). Las propiedades de altura y ancho no tendrán ningún efecto.

Juegalo «

cuadra

Muestra un elemento como un elemento de bloque (como

). Comienza en una nueva línea y ocupa todo el ancho.

Juegalo «

contenido

Hace que el contenedor desaparezca, haciendo que los elementos secundarios del elemento pasen al siguiente nivel en el DOM.

Juegalo «

flexionar

Muestra un elemento como un contenedor flexible a nivel de bloque

Juegalo «

red

Muestra un elemento como un contenedor de cuadrícula a nivel de bloque.

Juegalo «

bloque en línea

Muestra un elemento como un contenedor de bloques de nivel en línea. El elemento en sí está formateado como un elemento en línea, pero puede aplicar valores de alto y ancho

Juegalo «

flexión en línea

Muestra un elemento como un contenedor flexible de nivel en línea

Juegalo «

cuadrícula en línea

Muestra un elemento como un contenedor de cuadrícula de nivel en línea

Juegalo «

tabla en línea

El elemento se muestra como una tabla de nivel en línea.

Juegalo «

elemento de lista

Deje que el elemento se comporte como un elemento

Juegalo «

entrar corriendo

Muestra un elemento como bloque o en línea, según el contexto

Juegalo «

mesa

Deje que el elemento se comporte como un elemento


Juegalo «
pie de tabla	Deje que el elemento se comporte como un elemento
Juegalo «
grupo-columna-tabla	Deje que el elemento se comporte como un elemento
Juegalo «
grupo-encabezado-tabla	Deje que el elemento se comporte como un elemento
Juegalo «
table-footer-group	Deje que el elemento se comporte como un elemento
Juegalo «
grupo-fila-tabla	Deje que el elemento se comporte como un elemento
Juegalo «
celda de tabla	Deje que el elemento se comporte como un elemento		Juegalo «
columna-tabla	Deje que el elemento se comporte como un elemento
Juegalo «
fila de la tabla	Deje que el elemento se comporte como un elemento
Juegalo «
ninguno	El elemento se elimina por completo	Juegalo «
inicial	Establece esta propiedad en su valor predeterminado. Leer acerca de inicial	Juegalo «
heredar	Hereda esta propiedad de su elemento padre. Leer acerca de heredar

Más ejemplos

Ejemplo

Una demostración de cómo utilizar el valor de la propiedad del contenido. En el siguiente ejemplo, el contenedor .a desaparecerá, y los elementos secundarios (.b) secundarios del elemento pasarán al siguiente nivel en el DOM:

.a {
pantalla: contenido;
borde: 2px rojo sólido;
color de fondo: #ccc;
relleno: 10px;
ancho: 200px;
}

.B {
borde: 2px azul sólido;
color de fondo: azul claro;
relleno: 10px;
}

Inténtalo tú mismo »