GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Propiedades de visualización (layout)

La propiedad display es la propiedad CSS más importante para el control de la disposición.

La propiedad de presentación
La propiedad display especifica si se muestra o no un elemento y cómo se muestra. Cada elemento
HTML tiene un valor de visualización por defecto dependiendo de qué tipo de elemento es. Los
valores de visualización por defecto para la mayoría de los elementos son block o inline.

Elementos en bloque
Un elemento en bloque siempre empieza en una nueva línea y ocupa todo el ancho disponible (se
extiende hacia la izquierda y la derecha tanto como sea posible).

El elemento <div> es un elemento en bloque.

Ejemplos de elementos a nivel de bloque:

 <div>
 <h1> - <h6>
 <P>
 <form>
 <header>
 <footer>
 <section>

Elementos en línea
Un elemento en línea no se inicia en una nueva línea y sólo ocupa el mismo ancho que sea
necesario.
Este es un elemento en línea, un <span> dentro de un párrafo

Ejemplos de elementos en línea:

 <span>
 <a>
 <img>
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Sustituir el valor predeterminado, valor de presentación

Como se ha mencionado, cada elemento tiene un valor de visualización por defecto. Sin embargo,
este se puede anular, cambiar de 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 todavía siguen los
estándares web.

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

li {
display: inline;
}

Ver: Código 111.html

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

span {
display: block;
}

Ver: Código 112.html

El ejemplo siguiente muestra los elementos <a> como elementos de bloque:

a {
display: block;
}

Ver: Código 113.html

Ocultar un elemento - display: none o visibility: hidden?

Para ocultar un elemento se puede hacer mediante el establecimiento de la propiedad
display:none. El elemento se oculta y la página se mostrará como si el elemento no está allí:

h1.hidden {
display: none;
}

Ver: Código 114.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Con la propiedad visibility:hidden; el elemento también se esconde, pero sin embargo, el

elemento aún tomará el mismo espacio que antes. El elemento se oculta, pero aún afecta a la
disposición:

h1.hidden {
visibility: hidden;
}

Ver: Código 115.html