Saltar navegación

Display e Visibility

Antes de comezar...

As propiedades display y visibility controlan a visualización dos elementos. As dúas propiedades permiten ocultar calquera elemento da páxina. Habitualmente utilízanse xunto con JavaScript para crear efectos dinámicos como mostrar e ocultar determinados textos ou imaxes cando o usuario pica sobre eles.

A propiedade display permite ocultar completamente un elemento facendo que desapareza da páxina. Como o elemento oculto non se mostra, o resto de elementos da páxina móvense para ocupar o seu lugar.

Por outra parte, a propiedade visibility permite facer invisible un elemento, o que significa que o navegador crea a caixa do elemento pero non a mostra. Neste caso, o resto de elementos da páxina non modifican a súa posición, xa que aínda que a caixa non se ve, segue ocupando sitio.

A seguinte imaxe mostra a diferenza entre ocultar a caixa número 5 mediante a propiedade displayou facela invisible mediante a propiedade visibility:

Diferenzas visuais entre as propiedades display e visibility

Diferenzas visuais entre as propiedades display e visibility.

Display

A continuación móstrase a definición completa da propiedade display:

Propiedade Valores que acepta Descrición
display

Aínda que admite moitos máis valores, os máis utilizados son inline, block y none.

  • O valor block mostra un elemento coma se fose un elemento de bloque, independentemente do tipo de elemento que se trate.
  • O valor inlinevisualiza un elemento en forma de elemento en liña, independentemente do tipo de elemento que se trate.
  • O valor none oculta un elemento e fai que desapareza da páxina. O resto de elementos da páxina visualízanse coma se non existise o elemento oculto, é dicir, poden ocupar o espazo no que se debería visualizar o elemento

 Permite controlar a forma de visualizar un elemento e mesmo ocultalo

O seguinte exemplo mostra o uso da propiedade display para mostrar un elemento de bloque coma se fose un elemento en liña e para mostrar un elemento en liña coma se fose un elemento de bloque:

Exemplo de propiedade display

Exemplo de propiedade display.

As regras CSS do exemplo anterior son as seguintes:

<div>div normal</div>
<div style="display: inline;">div con display:inline</div>
<a href="#">Ligazón normal</a>
<a href="#" style="display: block;">div con display:block</a>

A propiedade display: inline pódese utilizar nas listas (<ul>, <ol>) que se queren mostrar horizontalmente e a propiedade display: block emprégase frecuentemente para os enlaces que forman o menú de navegación.

Visibilidade

Pola súa banda, a definición completa da propiedade visibility é moito máis sinxela:

Propiedade Valores que acepta Descrición
visibility

  • visible: Inicialmente todas as caixas que compoñen a páxina son visibles.
  • hidden Converte unha caixa en invisible para que non mostre os seus contidos.
  • collapse : Só se pode utilizar nas filas, grupos de filas, columnas e grupos de columnas dunha táboa. Oculta completamente a fila e/ou columna e se poden mostrar outros contidos nese lugar. Se se utiliza o valor collapse sobre calquera outro tipo de elemento, o seu efecto é idéntico ao valorhidden.

 Permite facer visibles ou invisibles aos elementos da páxina.

Relación entre display, float e position

Cando se establecen as propiedades display, float y position sobre unha mesma caixa, a súa interpretación é a seguinte:

  1. Se display vale none, ignóranse as propiedades float y position e a caixa non se mostra na páxina.
  2. Se position vale absolute o fixed, a caixa posiciónase de forma absoluta, considérase quefloat vale none e a propiedade display vale block tanto para os elementos en liña coma para os elementos de bloque. A posición da caixa determínase mediante o valor das propiedadestop, right, bottom y left.
  3. En calquera outro caso, se float ten un valor distinto de none, a caixa posiciónase de forma flotante e a propiedade display vale block tanto para os elementos en liña coma para os elementos de bloque.