Display y Visibility

Controlan la visualización de los elementos. Habitualmente se utilizan junto con JavaScript para crear efectos dinámicos como mostrar y ocultar determinados textos o imágenes cuando el usuario pincha sobre ellos. La diferencia entre ambas propriedades es que, mientras display oculta por completo un elemento haciendo que los demás elementos ocupen su lugar, la propriedad visibility hace que los otros elementos que componen la página respeten la posición de éste y reserven su espacio.

Las propriedades de display son:

• block muestra un elemento como si fuera un elemento de bloque, independientemente de tipo de elemento que se trate (se emplea para los enlaces que forman el menú de navegación)
• inline mustra un elemento como si fuera un elemento de bloque, independientemente del tipo de elemeto que se trate (inline se puede utilizar en las listas [ul, li] para mostrarlas horizontalmente)
• none oculta un elemento y hace que desaparezca de la página

Las propriedades de visibility son:

• normal que es el valor por defecto
• hidden convierte una caja en invisible para que no muestre su contenido, el resto de elementos de la página se muestran como si la caja fuera visible
• collapse sólo se puede utilizar con las filas, grupos de filas, columnas y grupos de columnas de una tabla. Su efecto es similar a la propriedad display, ocultando completamente la fila o columna, y se puede mostrar otros contendios en ese lugar. Si se utiliza collapse sobre cualquier otro tipo de elemento su efecto es idéntico al valor hidden.

Relación entre display, float y position

Cuando estas propriedades se establecen para la misma caja su interpretación es la siguiente:

• si display vale none, se ignoran las propriedades float y posición y la caja no se muestra en la página
• si position vale absolute o fixed, la caja se posiciona de forma absoluta, se considera que float vale none y la propriedad display vale block. La posición de la caja se determina mediante el valor de las propriedades tip, right, bottom y left
• en cualquier otro caso, so float tiene un vlaor distino de none, la caja se posiciona de forma flotante y la propriedad display vale block tanto para los elementos en linea como par alos elementos de bloque

Siguiente

Anterior