English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La propiedad display CSS especifica el tipo de cuadro generado por el elemento.
La tabla a continuación proporciona instrucciones de uso y registro histórico de versiones de esta propiedad, así como la sintaxis de uso en scripts de JavaScript.
| Valor predeterminado: | inline |
|---|---|
| Aplicable a: | Todos los elementos |
| Herencia: | No |
| Animable: | No.Ver Atributos de animación. |
| Versión: | CSS 1,2,3 |
| JavaScript Sintaxis: | objeto.style.display="bloque" |
El valor calculado de la propiedad display puede ser diferente del elemento raíz yflotaciónoElementos de posicionamiento absolutodiferentes.
Si el valor de la propiedad display se establece en none, el elemento no genera ningún cuadro y no tiene ningún impacto en el diseño; el elemento y su contenido se eliminan completamente de la estructura de formato y se presenta el documento, como si el elemento no existiera en el árbol del documento.
La sintaxis de esta propiedad es la siguiente:
display: inline | bloque | contenido | flex | flujo | flujo-raíz | grilla | inline-bloque | inline-flex | inline-grilla | inline-tabla | lista-elemento | ejecutar-en | tabla | tabla-título | tabla-columna-grupo | tabla-cabecera-grupo | tabla-pie de página-grupo | tabla-fila-grupo | tabla-celda | tabla-columna | tabla-fila | none | initial | inherit
El siguiente ejemplo muestra cómo utilizar la propiedad display.
div {
display: inline;
}
span {
display: bloque;
}Prueba a ver‹/›La tabla a continuación describe el valor de esta propiedad.
| valor | descripción |
|---|---|
| inline | El elemento genera unnivel de inlinecuadro. |
| block | El elemento genera unnivel de bloquecuadro. |
| contents | El elemento en sí no genera ningún cuadro, pero suselementoypseudo-elementocontenedor de cuadro, y el texto se ejecuta normalmente. |
| flex | El elemento genera uncontenedor flexible box. |
| flow | El elemento utiliza el diseño de flujo (diseño de bloque e en línea) para el diseño de su contenido. |
| flow-root | El elemento genera un contenedor de cuadro de nivel de bloque y utiliza el diseño de flujo para el diseño del contenido. |
| grid | Este elemento genera un contenedor de cuadro de nivel de bloque de grilla. |
| inline-block | El elemento genera un cuadro de bloque, y el diseño de su disposición es como si fuera un cuadro嵌入式. |
| inline-flex | El elemento genera un contenedor de cuadro de nivel en línea de contenedor flexible. |
| inline-grid | El elemento genera un contenedor de cuadro de nivel en línea de grilla. |
| inline-tabla | Este elemento actúa como una tabla, al igual que un cuadro en línea. |
| lista-elemento | El elemento genera un cuadro de bloque para el contenido y un cuadro en línea separado para los marcadores de lista. |
| run-in | Este elemento genera un bloque o un cuadro en línea según el contexto. |
| tabla | El comportamiento de este elemento es similar a<table>Elemento HTML. |
| tabla-caption | El comportamiento de este elemento es similar a<caption>Elemento HTML. |
| tabla-columna-grupo | El comportamiento de este elemento es similar a<colgroup>Elemento HTML. |
| tabla-cabecera-grupo | El comportamiento de este elemento es similar a<thead>Elemento HTML. |
| tabla-pie de página-grupo | El comportamiento de este elemento es similar a<tfoot>Elemento HTML. |
| tabla-fila-grupo | El comportamiento de este elemento es similar a<tbody>Elemento HTML. |
| tabla-celda | El comportamiento de este elemento es similar a<td>Elemento HTML. |
| tabla-columna | El comportamiento de este elemento es similar a<col>Elemento HTML. |
| tabla-fila | El comportamiento de este elemento es similar a<tr>Elemento HTML. |
| none | Cerrar la visualización del elemento. Incluso si todos los atributos de visualización de los elementos hijos se establecen en none, también cerrará su visualización. |
| initial | Establezca este atributo en su valor predeterminado. |
| inherit | Si se especifica, el elemento asociado utiliza el valor del atributo display del elemento padre. |
Compatibilidad del navegador del atributo display, los números en la tabla a continuación representan la versión mínima del navegador que admite el atributo; todos los navegadores principales admiten este atributo.
|
Advertencia:Valores, por ejemplo, contents, flow-root, run-in y otros no son compatibles bien en la mayoría de los navegadores. Es mejor evitar su uso temporalmente.
Consulte los siguientes tutoriales:Display de CSS.
Atributos relacionados:Visibilidad,Float,Position.