Seminario CSS - Ejemplo de aplicación la propiedad display

La propiedad display define si un elemento debe visualizarse y cómo lo hace.

Visibilidad de elementos

Ejemplo de ocultación con display:none

El valor none oculta un elemento, la página se muestra como si no estuviera, pero no se destruye en el DOM.
visibility:hidden: también oculta un elemento, pero este sigue ocupando el mismo espacio en la página.

Estilos

.desaparece {
    background-color: lightcoral;
    padding: 10px;

}
.oculto {
    background-color: darkgray;
    padding: 10px;

}
.borde {
    padding: 5px;
    border: solid 2px black;
}
            
@media screen and (max-width: 64px) {
    .desaparece {
        display: none;
    }
    .oculto {
        visibility: hidden;
    }
}

display:none

Si estrecha la ventana del navegador se cumplirá la condición de @media y este div desaparecerá.

visibility:hidden

Si estrecha la ventana del navegador se cumplirá la condición de @media y este div no se verá pero seguirá ocupando su lugar.

Ejemplo de cambio de block a inline

La mayoría de los elementos están entre dos posibilidades por defecto: en línea (inline) y o de bloque (block).
Elementos de bloque (display: block): siempre comienzan en una nueva línea e intentan ocupar todo la anchura disponible.
Elementos en línea (display: inline): no comienzan en una línea nueva e intentan ocupar solamente el espacio necesario para su representación.

Estilos

li.menu{
    margin: 0;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 1px;
    padding-top: 1px;
    list-style: none;
    display: inline;
    font-weight: bold;
    color: white;
    background-color: black;
}
li.menu:hover{
    color: black;
    background-color: white;
}

Inicio
Edición
Herramientas
Ayuda

Ejemplo de inline-block

Estilos

a.normal{
    width: 400px;
    height: 50px;
    background-color: lightcyan;
}

a.inlineblock{
    display: inline-block;
    width: 400px;
    height: 50px;
    background-color: lightcoral;
}

Como se puede observar, a pesar de haber puesto una anchura y altura en el elemento normal esta no es tomada en consideración al ser un elemento inline, pero en el enlace con clase ilineblock sí

Enlace clase normal (inline) Enlace clase inlineblock (inline-block) Enlace clase normal (inline)

Ejemplo de display=table

Estilos

div.table{
    display: table;
    background-color: lightgreen;     
}
div.cell{       
    background-color: lightcoral;
    margin: 5px;  
    width: 10vw;
    height: 5vh;
}

El div con clase table ya no se extiende a ocupar toda la anchura.

Ejemplo de display=flex

Estilos

div.flex{    
    display: flex;
    background-color: lightskyblue;
}
div.noflex{
    background-color: lightgray;
}

El div con clase flex distribuye sus elementos internos de manera proporcional al ancho disponible, incluso aumentando la altura de un elemento inline. Sin embargo, el otro div va pasando a una nueva línea los elementos que no caben. Reduzca el ancho de la página para ver los efectos.

Enlace normal Enlace normal Enlace normal Enlace normal Enlace normal

Enlace flex Enlace flex Enlace flex Enlace flex Enlace flex

Inicio