Philip: /* Otros artículos sobre CSS */

2025-01-22T18:48:19Z

Otros artículos sobre CSS

Página nueva

{{Programación
|nombre = Introducción al CSS
|imagen = Css.png
|tamaño de imagen = 300
|portal = [[Portal:CSS|Portal CSS]] • [[Portal:Desarrolladores Web|Portal Desarrolladores Web]]
}}
Comprender la propiedad CSS <code>display</code> puede ser complicado debido a la gran cantidad de valores posibles, cada uno de los cuales afecta al comportamiento y la visualización de un elemento. Esta propiedad determina cómo se comporta un elemento en el documento: si será un bloque, en línea, flexible, en cuadrícula o completamente invisible.

=== Lista de valores disponibles para la propiedad <code>display</code> ===
Aquí tienes una lista de los valores disponibles para la propiedad <code>display</code>:

* <code>[[CSS:display:-webkit-box|display: -webkit-box]]</code> — valor obsoleto para crear una disposición de bloque en los navegadores Webkit.
* <code>[[CSS:display:-webkit-inline-box|display: -webkit-inline-box]]</code> — valor similar a <code>-webkit-box</code>, pero para una disposición en línea en los navegadores Webkit.
* <code>[[CSS:display:block|display: block]]</code> — el elemento se convierte en un bloque, ocupando todo el ancho de su contenedor.
* <code>[[CSS:display:contents|display: contents]]</code> — el elemento desaparece, pero sus elementos hijos permanecen en el DOM.
* <code>[[CSS:display:flex|display: flex]]</code> — el elemento se convierte en un contenedor de disposición flexible (Flexbox).
* <code>[[CSS:display:flow|display: flow]]</code> — define el comportamiento de flujo predeterminado (valor principal para la mayoría de los elementos).
* <code>[[CSS:display:flow-root|display: flow-root]]</code> — crea un nuevo contexto de formato de bloque, como si el elemento fuera un contenedor de bloque.
* <code>[[CSS:display:grid|display: grid]]</code> — el elemento se convierte en un contenedor de disposición en cuadrícula (Grid).
* <code>[[CSS:display:inherit|display: inherit]]</code> — el elemento hereda el valor de la propiedad <code>display</code> de su contenedor.
* <code>[[CSS:display:initial|display: initial]]</code> — restablece la propiedad <code>display</code> a su valor inicial.
* <code>[[CSS:display:inline|display: inline]]</code> — el elemento se convierte en línea, ocupando solo el ancho necesario.
* <code>[[CSS:display:inline-block|display: inline-block]]</code> — el elemento combina el comportamiento de línea y de bloque (puede tener tamaño, pero sigue estando en la misma línea).
* <code>[[CSS:display:inline-flex|display: inline-flex]]</code> — el elemento se convierte en un contenedor Flexbox en línea.
* <code>[[CSS:display:inline-grid|display: inline-grid]]</code> — el elemento se convierte en un contenedor Grid en línea.
* <code>[[CSS:display:inline-masonry|display: inline-masonry]]</code> — valor experimental para un diseño en cuadrícula en línea con disposición dinámica.
* <code>[[CSS:display:inline-table|display: inline-table]]</code> — el elemento se comporta como una tabla en línea.
* <code>[[CSS:display:list-item|display: list-item]]</code> — el elemento se convierte en un elemento de lista con marcador (como en <code><li></code>).
* <code>[[CSS:display:masonry|display: masonry]]</code> — valor experimental para una cuadrícula con diseño dinámico.
* <code>[[CSS:display:math|display: math]]</code> — valor experimental para diseño matemático.
* <code>[[CSS:display:none|display: none]]</code> — el elemento se oculta y no ocupa espacio en el documento.
* <code>[[CSS:display:revert|display: revert]]</code> — restablece la propiedad <code>display</code> a los estilos predeterminados del navegador.
* <code>[[CSS:display:revert-layer|display: revert-layer]]</code> — valor experimental para restablecer los estilos en capas específicas.
* <code>[[CSS:display:ruby|display: ruby]]</code> — el elemento se comporta como un contenedor para anotaciones Ruby (usado en idiomas que requieren Furigana).
* <code>[[CSS:display:ruby-text|display: ruby-text]]</code> — el elemento se comporta como el texto Ruby (Furigana).
* <code>[[CSS:display:table|display: table]]</code> — el elemento se comporta como una tabla de bloque.
* <code>[[CSS:display:table-caption|display: table-caption]]</code> — el elemento se comporta como un pie de tabla.
* <code>[[CSS:display:table-cell|display: table-cell]]</code> — el elemento se comporta como una celda de tabla.
* <code>[[CSS:display:table-column|display: table-column]]</code> — el elemento se comporta como una columna de tabla.
* <code>[[CSS:display:table-column-group|display: table-column-group]]</code> — el elemento se comporta como un grupo de columnas de tabla.
* <code>[[CSS:display:table-footer-group|display: table-footer-group]]</code> — el elemento se comporta como un grupo de filas de pie de tabla.
* <code>[[CSS:display:table-header-group|display: table-header-group]]</code> — el elemento se comporta como un grupo de filas de encabezado de tabla.
* <code>[[CSS:display:table-row|display: table-row]]</code> — el elemento se comporta como una fila de tabla.
* <code>[[CSS:display:table-row-group|display: table-row-group]]</code> — el elemento se comporta como un grupo de filas de tabla.
* <code>[[CSS:display:unset|display: unset]]</code> — elimina el valor establecido y restablece la propiedad a su estado inicial o heredado.

Cada uno de estos valores tiene un propósito específico que permite controlar de manera flexible el diseño de una página web. Sin embargo, debido a la gran variedad de valores, puede ser difícil elegir el adecuado, y una elección incorrecta puede dar lugar a resultados inesperados.

En artículos separados, analizaremos en detalle cada valor de la propiedad <code>display</code>, aprenderemos cuándo y cómo utilizarlos y revisaremos su compatibilidad con los navegadores.

== Otros artículos sobre CSS ==
{{Enciclopedia CSS/Navegación|state=uncollapsed}}
{{Plantilla:Navegación/CSS}}
[[wj-en:Encyclopedia CSS: display]]
[[wj-de:Enzyklopädie CSS: display]]
[[wj-es:Enciclopedia CSS: display]]
[[wj-it:Enciclopedia CSS: display]]
[[wj-fr:Encyclopédie CSS: display]]

[[Categoría:CSS]]

Enciclopedia CSS: display - Historial de revisiones

Philip: /* Otros artículos sobre CSS */