30-Propriedad de visualizacion en css

La propriedad Display en css es una propriedad muy importante para controlar el diseno

Esta propriedad display especifica si/cómo se muestra un elemento.

Cada elemento HTML tiene una visualizacion predeterminada segun el tipo de elemento que es

Para la grand mayoria de los elementos el valor de visualizacion (display) es block o inline

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 estira hacia la izquierda y hacia la derecha tanto como puede).

El elemento <div> es un elemento a nivel de bloque.

...

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>

display: none

display:none se usa comúnmente con JavaScript para ocultar y mostrar elementos sin eliminarlos y volver a crearlos

Echa un vistazo a nuestro último ejemplo en esta página si desea saber cómo se puede lograr esto.

Los <script> los elementos display: none; por defecto.

Anular el valor de visualización predeterminado

Como se mencionó, cada elemento tiene un valor de visualización predeterminado.

Pero se puede anular esta previsualizacion

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 hacer en línea <li>elementos para menús horizontales:

Ejemplo del codigo

            li {
                  display: inline;
                }
        

Nota: Establecer la propiedad de visualización de un elemento solo cambia la forma en que 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 dentro de él.

El siguiente ejemplo muestra elementos <span> como elementos de bloque:

            span {
                display: block;
              }
        

Ocultar elementos

display:none

visibility:hidden

Reiniciar

---

Ir al indice