0 FPS

Propiedad CSS : display

30 de Diciembre del 2020 por Josep Antoni Bover. 0 visitas, 0 comentarios, 0 votos
Categorías : CSS.

La web está en segundo plano, animación en pausa.

Cargando animación...

Esta propiedad nos permite especificar como debe ser mostrado el objeto.

Cada etiqueta tiene su valor por defecto, por ejemplo las etiquetas div por defecto vienen con display:block, las etiqquetas span vienen por defecto con display:inline, las etiquetas table con display:table, etc...

Sintaxis

display: Valor;

Valores básicos

none	El objeto no se mostrará. Todos los descendientes de este objeto no se mostraran. El navegador no reservará espacio para el objeto y mostrará la página como si este no existiera. Si quieres que el navegador reserve espacio para el objeto sin mostrarlo, echa un vistazo a la propiedad `visibility`.
block	El objeto se muestra como un bloque que ocupa todo el ancho disponible y se situa justo debajo del ultimo objeto.
inline	El objeto se muestra al lado del ultimo objeto. Si hay que hacer varias líneas, el objeto ocupara el resto de la línea actual, y lo que necesite de las siguientes.
inline-block	El objeto se muestra al lado del ultimo objeto. Si no hay suficiente ancho para todo el objeto se mostrará en una nueva línea, omitiendo el ancho que pueda quedar en la línea actual.
list-item	El objeto se muestra justo debajo del ultimo objeto como si fuera un `<li>`, por lo que puede mostrar el puntito dependiendo del `list-style`.
inherit	Se heredara el estilo de su objeto padre. Este valor no se soporta en IE7, y en IE8 requiere la declaración de un `!DOCTYPE`.

Valores para cajas flexibles

flex	El objeto se muestra como un elemeto de bloque con el interior flexible.
inline-flex	El objeto se muestra al lado del ultimo objeto y su tamaño se calcula midiendo su contenido. Además el interior del objeto es flexible.

Valores para tablas

inline-table	El objeto se muestra al lado del ultimo objeto y su tamaño se calcula dependiendo del `table-layout`.
table	El objeto se muestra justo debajo del ultimo objeto como si fuera un `<table>`. Su tamaño se obtiene midiendo el interior del objeto, dependiendo del `table-layout`.
table-caption	El objeto se muestra justo debajo del ultimo objeto como si fuera un `<caption>`. Su altura se obtiene midiendo el interior del objeto, su ancho es el ancho de la fila de la tabla.
table-cell	El objeto se muestra como si fuera un `<td>` de una tabla, si es el primero de la fila, se mostrará justo debajo de la ultima fila alineado a la izquierda. Si no es el primero de la fila, se mostrará justo al lado del ultimo elemento de esta fila.
table-column	El objeto se muestra como si fuera una celda de una tabla, si es el primero de la fila, se mostrará justo debajo de la ultima fila alineado a la izquierda. Si no es el primero de la fila, se mostrará justo al lado del ultimo elemento de esta fila.
table-column-group	El objeto se muestra como si fuera un `<colgroup>` de una tabla.
table-footer-group	El objeto se muestra como si fuera un `<tfoot>` de una tabla.
table-header-group	El objeto se muestra como si fuera un `<thead>` de una tabla.
table-row	El objeto se muestra como si fuera un `<tr>` de una tabla.
table-row-group	El objeto se muestra como si fuera un `<tbody>` de una tabla.

Código de ejemplo

Compatibilidad

Esta propiedad es soportada por todos los navegadores compatibles con CSS1.

	Soportado a partir de la versión 1
	Soportado a partir de la versión 1
	Soportado a partir de la versión 5
	Soportado a partir de la versión 1
	Soportado a partir de la versión 4

Documento modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020