in

Propiedad de visualización CSS

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 »

    Ejemplo

    Una demostración de cómo utilizar el valor de la propiedad heredada:

    cuerpo {
    pantalla: en línea;
    }

    pag {
    mostrar: heredar;
    }

    Inténtalo tú mismo »

    Ejemplo

    Establezca la dirección de algunos elementos flexibles dentro de un elemento

    en orden inverso:

    div {
    pantalla: flex;
    flex-direction: row-reverse;
    }

    Inténtalo tú mismo »


    páginas relacionadas

    Tutorial de CSS: visualización y visibilidad de CSS

    Referencia HTML DOM: propiedad de visualización


    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Preguntas frecuentes generales sobre la licencia de oracleJDK

    Python vs Anaconda – javatpoint