Latest web development tutorials

CSS Display (pantalla) y visibilidad (visibilidad)

Cómo mostrar una propiedad de elemento se fija para ser visualizado, atributo de visibilidad especifica que un elemento debe ser visible u oculto.

Recuadro 1

Recuadro 2
Recuadro 3

elementos ocultos - display: none o la visibilidad: ocultos

Ocultar un elemento por el atributo de presentación establecido en "Ninguno", o la propiedad de visibilidad a "oculto". Tenga en cuenta, sin embargo, estos dos métodos producen resultados diferentes.

visibilidad: oculto para ocultar un elemento, sino elemento oculto sigue siendo la misma que antes de la ocupación y no oculta el espacio. Es decir, aunque el elemento está oculto, pero todavía afectan al diseño.

Ejemplos

h1.hidden {visibility:hidden;}

Trate »

display: none para ocultar un elemento, y los elementos ocultos no ocupa ningún espacio. En otras palabras, este elemento no sólo se oculta, y el espacio ocupado por el elemento original, desaparecerá del diseño de página.

Ejemplos

h1.hidden {display:none;}

Trate »


CSS Display - bloque y elementos en línea

Bloquear elemento es un elemento, ocupando todo el ancho de un salto de línea antes y después de ella.

Ejemplos de elementos de bloque:

  • <H1>
  • <P>
  • <Div>

Los elementos en línea sólo necesitan el ancho necesario, no va a forzar saltos de línea.

Ejemplos de elementos en línea:

  • <Span>
  • <a>

Cómo cambiar un elemento de visualización

Puede cambiar los elementos de bloque y elementos en línea, y viceversa, puede hacer que la página se ve es una combinación de una manera particular, y aún así seguir los estándares web.

El ejemplo siguiente muestra los elementos de lista como elementos en línea:

Ejemplos

li {display:inline;}

Trate »

Los siguientes elementos palmo ejemplo como elementos de bloque:

Ejemplos

span {display:block;}

Trate »

Nota: Cambiar el tipo de elementos de la pantalla para ver cómo se muestra el elemento, es qué tipo de elementos.Por ejemplo: Un elemento en línea ajustada para la visualización: bloque no se le permite tener sus propios elementos de bloque anidados internos.


Ejemplos

más ejemplos

Cómo mostrar elemento en línea.

Este ejemplo muestra cómo mostrar en línea de un elemento.

Cómo mostrar un elemento de bloque.

Este ejemplo muestra cómo mostrar un elemento de bloque elemento.

Cómo utilizar el colapso propiedad de una mesa.

Este ejemplo muestra cómo utilizar la tabla de propiedades de colapso.