NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Propiedad CSS : display

23 de Diciembre del 2015 por Josep Antoni Bover437 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 : 23/12/2015
Ejemplo modificado por última vez : 21/01/2014

Enlaces relacionados