Diseño CSS - La propiedad de visualización
La displaypropiedad es la propiedad CSS más importante para controlar el diseño.
La propiedad de visualización
La displaypropiedad especifica si/cómo se muestra un elemento.
Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de elemento que sea. El valor de visualización predeterminado para la mayoría de los elementos es blocko
inline.
Haga clic para mostrar el panel
This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).
Elementos a nivel de bloque
Un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como sea posible).
Ejemplos de elementos a nivel de bloque:
- <div>
- <h1> - <h6>
- <p>
- <formulario>
- <encabezado>
- <pie de página>
- <sección>
Elementos en línea
Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario.
Este es un elemento <span> en línea dentro de un párrafo.
Ejemplos de elementos en línea:
- <lapso>
- <a>
- <img>
Pantalla: ninguna;
display: none;se usa comúnmente con JavaScript para ocultar y mostrar elementos sin eliminarlos ni volver a crearlos. Eche un vistazo a nuestro último ejemplo en esta página si quiere saber cómo se puede lograr esto.
El <script>elemento utiliza display: none;
por defecto.
Anular el valor de visualización predeterminado
Como se mencionó, cada elemento tiene un valor de visualización predeterminado. Sin embargo, puede anular esto.
Cambiar un elemento en línea a un elemento de bloque, o viceversa, puede ser útil para hacer que la página se vea de una manera específica y seguir los estándares web.
Un ejemplo común es crear <li>elementos en línea para menús horizontales:
Ejemplo
li {
display: inline;
}
Nota: Establecer la propiedad de visualización de un elemento solo cambia la forma en que se muestra el elemento , NO el tipo de elemento que es. Por lo tanto, un elemento en línea con display: block;no puede tener otros elementos de bloque dentro.
El siguiente ejemplo muestra elementos <span> como elementos de bloque:
Ejemplo
span {
display: block;
}
El siguiente ejemplo muestra elementos <a> como elementos de bloque:
Ejemplo
a {
display: block;
}
Ocultar un elemento: ¿pantalla: ninguna o visibilidad: oculta?
display:none
visibility:hidden
Reiniciar
Se puede ocultar un elemento estableciendo la displaypropiedad en
none. El elemento se ocultará y la página se mostrará como si el elemento no estuviera allí:
Ejemplo
h1.hidden {
display: none;
}
visibility:hidden;también oculta un elemento.
Sin embargo, el elemento seguirá ocupando el mismo espacio que antes. El elemento estará oculto, pero aún afectará el diseño:
Ejemplo
h1.hidden {
visibility: hidden;
}
Más ejemplos
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |