¿Alguna vez te has preguntado qué es la visualización y visibilidad de CSS y cómo afecta la presentación de tu sitio web? En TIEngranaje te explicaremos todo lo que necesitas saber sobre estas propiedades de CSS y cómo utilizarlas correctamente para mejorar la visibilidad y accesibilidad de tu sitio web. Sigue leyendo para aprender más sobre este tema fundamental en el diseño y desarrollo de páginas web.
En CSS, el propiedad de visualización especifica cómo se muestra un elemento, mientras que el propiedad de visibilidad especifica si un elemento debe estar visible u oculto. La propiedad de visualización es muy útil en CSS. Sin embargo, también es uno de los menos conocidos, especialmente por aquellos que recién están aprendiendo CSS.
Propiedad de visibilidad
El propiedad de visibilidad se puede utilizar para mostrar u ocultar elementos. Debería nota que si establece la propiedad de visibilidad en invisible, el elemento todavía ocupa el espacio en la página. Si desea que un elemento sea invisible y no ocupe espacio en la página, usar la propiedad de visualización y establezca el valor en none.
A la propiedad de visibilidad se le pueden asignar los siguientes valores: visible (por defecto), hidden, collapse (solo para tablas), y inherit. algunos navegadores no apoye collapse o inherit. Debería uso único esta propiedad si está tratando de ocultar un elemento y aún permitir que ocupe el espacio en la página.
.div1 {
visibility:hidden;
}Mostrar propiedad
El propiedad de visualización es muy flexible y es una gran herramienta en la caja de herramientas de CSS. Hay muchos valores que se pueden asignar a esta propiedad. Sin embargo, los valores más comunes son inline y block. Esto se debe a que podemos usar estos dos valores para cambiar algunos de los elementos comportamiento de visualización predeterminado.
Por ejemplo, algunos elementos HTML son del tipo: block como encabezados, párrafos y divs. Otros elementos HTML como span y anchor son inline. Podemos fácilmente cambiar el comportamiento de un inline elemento que actúe como block elemento mediante el uso de esta propiedad.
Debería nota que cambiar el tipo de visualización de un elemento cambia sólo cómo el se muestra el elemento, no qué tipo de elemento es. por ejemplo, un inline conjunto de elementos para display:block no está permitido tener elementos de bloque anidados dentro de él.
span {
display:block;
}
li {
display:inline;
}Aquí hay una lista de los posibles valores que puede especificar para la propiedad de visualización. No todos los valores son compatibles con todos los navegadores.
| Valor | Descripción |
|---|---|
none |
El elemento no se mostrará. |
block |
El elemento se muestra como un elemento de bloque. |
inline |
El elemento se muestra como un elemento en línea. |
inline-block |
Se coloca como un elemento en línea con otros elementos adyacentes pero se comporta como un elemento de bloque. |
inline-table |
El elemento se muestra como una tabla en línea. |
inherit |
Hereda la propiedad de visualización del elemento principal. |
list-item |
Se muestra como un elemento de lista. |
run-in |
Se convierte en elemento en línea o en bloque dependiendo de los elementos secundarios. |
table |
El elemento se muestra como una tabla. |
table-caption |
El elemento se muestra como un título de tabla. |
table-cell |
El elemento se muestra como una celda de tabla. |
table-column |
El elemento se muestra como una columna de tabla. |
table-column-group |
El elemento se muestra como un grupo de columnas de tabla. |
table-footer-group |
El elemento se muestra como un grupo de pie de página de la tabla. |
table-header-group |
El elemento se muestra como una fila de encabezado de tabla. |
table-row |
El elemento se muestra como una fila de la tabla. |
table-row-group |
El elemento se muestra como un grupo de filas de tabla. |
Los valores inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row, table-row-groupy inherit son No soportado en Internet Explorer 7 y anteriores. Internet Explorer 8 requiere un !DOCTYPE especificado en el documento HTML. Internet Explorer 9 sí apoyo Los valores.
