Diseño de disposición - atributo display

display La propiedad display es una de las propiedades CSS más importantes para controlar el diseño.

Propiedad display

display La propiedad especifica si/ cómo se debe mostrar el elemento.

Cada elemento HTML tiene un valor predeterminado de display, que depende de su tipo de elemento. La mayoría de los elementos tienen como valor predeterminado de display: block o inline.

Haga clic para mostrar el panel

Este panel contiene un elemento <div>, que por defecto está oculto. (display: none)

Es estilizado por CSS y lo mostramos con JavaScript (cambiar a display: block)

Elemento de bloque (block element)

Los elementos de bloque siempre comienzan en una nueva línea y ocupan todo el ancho disponible (extendiéndose lo más posible a la izquierda y a la derecha).

Este elemento <div> es un elemento de bloque.

Algunos ejemplos de elementos de bloque:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Elemento en línea (inline element)

Los elementos en línea no comienzan en una nueva línea y solo ocupan el ancho necesario.

Este es el párrafoElemento <span> en línea.

Algunos ejemplos de elementos en línea:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; se utiliza generalmente junto con JavaScript para ocultar y mostrar elementos sin tener que eliminar y volver a crearlos. Si desea saber cómo lograr este objetivo, consulte el último ejemplo en esta página.

por defecto,<script> El elemento utiliza display: none;.

Sobrescribir el valor predeterminado de Display

Como se mencionó anteriormente, cada elemento tiene un valor de display predeterminado. Sin embargo, puede sobrescribirlo.

Cambiar un elemento en línea a un elemento de bloque y viceversa, es muy útil para que la página se muestre de una manera específica mientras se siguen los estándares web.

Un ejemplo común es generar elementos en línea para implementar menús horizontales. <li> elemento:

实例

li {
  display: inline;
}

Prueba personal

Nota:Configurar la propiedad display solo cambiarála forma en que se muestra el elementosin cambiar el tipo de elemento. Por lo tanto, con display: block; Los elementos en línea no permiten que se incluyan otros elementos de bloque dentro de ellos.

El siguiente ejemplo muestra cómo cambiar el elemento <span> a un elemento de bloque:

实例

span {
  display: block;
}

Prueba personal

El siguiente ejemplo muestra cómo cambiar el elemento <a> a un elemento de bloque:

实例

a {
  display: block;
}

Prueba personal

¿Qué diferencia hay entre ocultar un elemento - display: none o visibility: hidden?

display: none

visibility: hidden

Reset

mediante la configuración de display el atributo se establece none se puede ocultar el elemento. El elemento será ocultado y la página se mostrará como si el elemento no estuviera allí:

实例

h1.hidden {
  display: none;
}

Prueba personal

visibility: hidden; también se puede ocultar el elemento.

pero, el elemento seguirá ocupando el mismo espacio que antes. El elemento será ocultado, pero aún así afectará el diseño:

实例

h1.hidden {
  visibility: hidden;
}

Prueba personal

Más ejemplos

Diferencias entre display: none; y visibility: hidden;
Este ejemplo muestra la diferencia entre display: none; VS visibility: hidden;
Uso combinado de CSS y JavaScript para mostrar contenido
Este ejemplo muestra cómo usar CSS y JavaScript para mostrar elementos al hacer clic.

Atributos Display/Visibility CSS

Atributo Descripción
display Especificar cómo se debe mostrar el elemento.
visibility Especificar si el elemento debe ser visible.