in

Diseño CSS: la propiedad de visualización

img 5terre

los display property es la propiedad CSS más importante para controlar el diseño.


La propiedad de visualización

los display propiedad 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 block o
inline.

Haga clic para mostrar el panel

Este panel contiene un elemento

, que está oculto por defecto (display: none).

Está diseñado con CSS y usamos JavaScript para mostrarlo (cámbielo a (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 puede).

El elemento

es un elemento a nivel de bloque.

Ejemplos de elementos a nivel de bloque:


  • 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 en línea dentro un párrafo.

    Ejemplos de elementos en línea:


    Pantalla: ninguna;

    display: none; se usa comúnmente con JavaScript para ocultar y mostrar elementos sin eliminarlos y volver a crearlos. Eche un vistazo a nuestro último ejemplo en esta página si desea saber cómo se puede lograr.

    los <script> usos del elemento 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 aún así siga los estándares web.

    Un ejemplo común es hacer en línea <li> elementos para menús horizontales:

    Nota: Establecer la propiedad de visualización de un elemento solo cambia cómo se muestra el elemento, NO qué tipo de elemento es. Entonces, un elemento en línea con display: block; no se permite tener otros elementos de bloque en su interior.

    El siguiente ejemplo muestra elementos como elementos de bloque:

    El siguiente ejemplo muestra elementos como elementos de bloque:


    Ocultar un elemento: visualización: ninguno o visibilidad: ¿oculto?

    display:none

    Italia

    visibility:hidden

    bosque

    Reiniciar

    Luces

    Se puede ocultar un elemento configurando el display propiedad a
    none. El elemento se ocultará y la página se mostrará como si el elemento no estuviera allí:

    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:


    Más ejemplos

    Diferencias entre pantalla: ninguna; y visibilidad: oculta;
    Este ejemplo demuestra display: none; versus visibilidad: oculta;

    Usar CSS junto con JavaScript para mostrar contenido
    Este ejemplo demuestra cómo usar CSS y JavaScript para mostrar un elemento al hacer clic.


    ¡Ponte a prueba con ejercicios!


    Propiedades de visualización / visibilidad de CSS

    Propiedad Descripción
    monitor Especifica cómo se debe mostrar un elemento.
    visibilidad Especifica si un elemento debe ser visible o no.