Descripción
La propiedad display en CSS determina cómo se presenta un elemento en la página. Controla el tipo de caja de renderizado que se usa para un elemento y, por lo tanto, cómo se diseñará y se dispondrá con respecto a otros elementos.
Sintaxis
display : [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
Valores
La propiedad display puede adoptar una variedad de valores para determinar el comportamiento de visualización de un elemento. Estos valores incluyen:
display-internal
El valor ‘display-internal’ se utiliza en el lenguaje de estilos en cascada, más conocido como CSS, para definir las propiedades internas de los elementos que conforman una tabla. Estas propiedades pueden referirse a diversos elementos, tales como una fila, un grupo de filas, una celda, y otros. La utilización de este valor es esencial para controlar la forma en que se presentan y organizan los datos dentro de una tabla.
table-row-group: Este valor específico se usa para mostrar un conjunto o grupo de filas en una tabla. Esta capacidad puede resultar extremadamente útil para organizar los datos en secciones o categorías específicas, facilitando la comprensión y el análisis de la información presentada.table-header-group: Este valor se utiliza para agrupar las celdas que conforman el encabezado en una tabla. Es una excelente manera de mantener organizadas las celdas de encabezado, lo que mejora significativamente la legibilidad y la estética de la tabla.table-footer-group: Se utiliza para agrupar las celdas que conforman el pie de una tabla. Esta característica puede ser útil para proporcionar un resumen o conclusiones basadas en los datos presentados en la tabla.table-row: Se utiliza para definir una fila en una tabla. Este es un elemento esencial de cualquier tabla, ya que permite la presentación de datos en un formato lineal y fácil de leer.table-cell: Se utiliza para definir una celda en una tabla. Cada celda puede contener un fragmento individual de datos, y la agrupación de estas celdas forma las filas y columnas de la tabla.table-column-group: Este valor se utiliza para agrupar varias columnas en una tabla. Esta es una característica útil para la organización de datos, especialmente en tablas más grandes y complejas.table-column: Se utiliza para definir una columna en una tabla. Las columnas son un aspecto fundamental de las tablas, ya que proporcionan la estructura necesaria para la presentación vertical de los datos.table-caption: Se utiliza para proporcionar un título o descripción de la tabla. Este es un elemento importante para proporcionar contexto y ayudar a los lectores a entender el propósito y contenido de la tabla.ruby-base: Se utiliza para controlar la presentación de los caracteres base en el texto rubí.ruby-text: Se utiliza para controlar la presentación del texto rubí, que es una forma de anotación utilizada en algunos idiomas, como el japonés.ruby-base-container: Se utiliza para agrupar los caracteres base en el texto rubí.ruby-text-container: Se utiliza para agrupar las anotaciones o el texto rubí.
display-outside
El valor “display-outside” determina la forma en que un elemento se visualiza en el diseño de una página web. Específicamente, este valor controla si un elemento se muestra como un elemento de bloque o en línea.
block: Este valor significa que el elemento se mostrará como un bloque, ocupando todo el ancho disponible de su contenedor padre y formando un bloque de contenido por sí mismo.inline: Este valor hace que el elemento se muestre en línea con el contenido circundante, ocupando solo el ancho necesario para su contenido.run-in: Este valor es menos común y crea un elemento que se comporta como un elemento de bloque o en línea dependiendo del contexto.
display-box
Esto se refiere al modelo de caja CSS, un concepto crucial en el diseño web que incluye varios elementos como el margen, el borde y el relleno. Este modelo es fundamental para controlar el diseño y la apariencia de los elementos en una página web.
contents: Esta propiedad se utiliza para reemplazar un elemento dado con sus contenidos secundarios. Tiene diversas aplicaciones en la manipulación de la estructura visual de la página.none: Esta propiedad, por otro lado, hace que el elemento y sus contenidos no se muestren en absoluto, es decir, el elemento no produce ningún marcado de caja.
display-inside
Este valor es un componente clave que controla y determina cómo se organiza y estructura el diseño dentro de un elemento específico. Dependiendo del valor que se le asigne, puede cambiar drásticamente el diseño del contenido dentro del elemento. Los valores comunes para display-inside pueden ser flex o grid, que son especialmente útiles para la creación de diseños flexibles o de cuadrícula.
flow: Este valor permite que el contenido fluya de una manera predeterminada.flow-root: Este valor crea un nuevo contexto de formato de bloque.table: Este valor hace que el elemento se comporte como una tabla HTML.flex: Este valor transforma el elemento en un contenedor flexible, permitiendo la distribución dinámica del espacio y el alineamiento de sus hijos.grid: Este valor convierte el elemento en un contenedor de cuadrícula, lo que permite un diseño más estructurado y alineado.ruby: Este valor hace que el elemento se comporte como un componente de texto ruby, usado en tipografías de Asia oriental.subgrid: Este valor es útil cuando los elementos hijos de una cuadrícula también necesitan ser diseñados como una cuadrícula.
display-listitem
Este valor es utilizado para designar que el elemento se comportará como un elemento de una lista. Conlleva la inclusión de un marcador y las propiedades de estilo de lista correspondientes.
list-item: Este valor permite que el elemento se comporte como un elemento de lista estándar.list-item block: Este valor hace que el elemento se comporte como un elemento de lista, pero con un formato de bloque.list-item inline: Este valor permite que el elemento se comporte como un elemento de lista, pero con un formato en línea.list-item flow: Este valor se utiliza para elementos de lista que deben fluir dentro del contenedor.list-item flow-root: Este valor se utiliza para elementos de lista que deben fluir dentro del contenedor pero también deben tener su propio contexto de formato de bloque.list-item block flow: Este valor combina las propiedades de bloque y flujo, haciendo que el elemento se comporte como un elemento de lista con un formato de bloque y flujo.list-item block flow-root: Este valor combina las propiedades de bloque, flujo y raíz de flujo, haciendo que el elemento se comporte como un elemento de lista con un formato de bloque y flujo y su propio contexto de formato de bloque.flow list-item block: Este valor permite que el elemento se comporte como un elemento de lista con un formato de bloque, pero debe fluir dentro del contenedor.
display-legacy
La propiedad ‘display-legacy’ se refiere a una serie de valores de visualización que pertenecen a versiones antiguas y no estándar. Estos valores, aunque no sean estándar, pueden tener usos específicos en ciertos contextos. Entre ellos se encuentran ‘inline-block’, ‘inline-table’, ‘inline-flex’ e ‘inline-grid’.
inline-block: Este valor permite que el elemento se disponga en línea con otros elementos, pero conserva las características de un bloque. Es decir, puede tener un ancho y un alto definidos.inline-table: Este valor convierte un elemento en una tabla, pero permite que se disponga en línea con otros elementos.inline-flex: Este valor convierte un elemento en un contenedor flexible, permitiendo así el uso de la disposición flexible. Aún así, el contenedor se comportará como un elemento en línea.inline-grid: Este valor convierte un elemento en un contenedor de cuadrícula, pero, como los valores anteriores, permite que se disponga en línea con otros elementos.
Ejemplo
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.columna {
width: 30%;
background-color: #a5d8ff;
padding: 20px;
}
