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
Más ejemplosEjemploUna 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:
Inténtalo tú mismo » EjemploUna demostración de cómo utilizar el valor de la propiedad heredada:
Inténtalo tú mismo » EjemploEstablezca la dirección de algunos elementos flexibles dentro de un elemento en orden inverso:
div { Inténtalo tú mismo » páginas relacionadasTutorial de CSS: visualización y visibilidad de CSS Referencia HTML DOM: propiedad de visualización |