Display Time ⌚

En la lección 22 vimos como se comportan los principales valores que tiene display, que son:

• block
• inline
• inline-block
• none

Los cuales podemos probar en el siguiente playground de W3schools

Display es la propiedad más importante para controlar estructuras.

¿Por qué?, bueno cada elemento tiene un valor por defecto, la mayoría de veces es block ó in-line, sin embargo estos valores se pueden sobreescribir ya que sus posibilidades son más avanzadas, esto lo vuelve quizás una de las más complejas en CSS.

¿Que quiere decir esto?

Pues vamos primero a detalle sobre el significado de cada valor.

¿Qué significan los elementos en bloque o elementos en línea?

• Elementos Block ó En bloque crean verticalmente distintos bloques de contenido (en el contexto visual) — generalmente usando saltos de línea antes y después del contenido. Sólo este valor permite generar elementos posicionados. Estos comportamientos son ilustrados por los elementos HTML BLOCKQUOTE, DIV, HEAD. Los valores de la propiedad display que crean un tipo de bloque de elemento son: block, list-item, table.
• Elementos Inline ó En línea no crean distintos bloques de contenido; se muestra el contenido a partir de una caja de línea (el contenido es distribuido línea por línea dentro de un contenedor físico o virtual). Los elementos en línea son ilustrados por los elementos HTML tal como el formateado físico y virtual de los carácteres, imágenes no flotantes o contenido no marcado. Los valores de display que crean tipos de elementos en línea son: inline, inline-table.

Ahora una vez que entendimos los valores principales dedisplay, estos pueden variar y tener el valor de cualquiera de los siguientes:

Inherit ó Heredado: Especifica el valor de este elemento igual que el de su elemento padre.

Creo que esta definición es la clásica “de tal palo, tal astilla”

Padre e Hija, el mismo baile, herencia.

None ó Nada: Este valor desactiva la presentación del elemento (no tiene efecto en el formato); todos los elementos hijo son escondidos de forma incondicional. El documento es representado como si el elemento y sus hijos fueran inexistentes en el árbol del documento. Para hacer que un elemento forme parte de un documento, mientras que su contenido es invisible, vea la propiedad visibility.

Inline ó En Línea: Hace que el elemento se muestre en línea sin afectar el flujo de la misma.

Block ó Bloque : Hace que el elemento genere una caja de bloque.

Inline-block ó Bloque en línea: Valor introducido a partir de CSS 2.1. Hace que un elemento se represente como una caja seguida de forma fluida, por un contenido, como si formase parte de la misma caja.

Inline-table : Este valor no tiene una correspondencia directa en HTML.

List-item ó listas de elementos: Hace que un elemento genere una caja para el contenido del elemento y una caja separada en la misma línea para los elementos de la lista, el comportamiento es como una lista normal.

Estos valores simularan propiedades las podemos usar con elementos para simular el comportamiento de TABLAS:

Table-header-group & Table-footer-group : Este valor hace que el elemento se comporte de forma similar a las correspondientes instrucciones de tabla.

En HTML:

Table-header-group: THEAD

Tabler-footer-group: TFOOT

THEAD

TFOOT

Table ó Tabla : Este valor hace que el elemento se comporte como un elemento HTML <table>.

Table-row|table-row-group : Este valor hace que el elemento se comporte como un elemento HTML <tr>.

Table-cell : Este valor hace que el elemento se comporte como un elemento HTML <td>

Table-column|Table-column-group : Estos valores hacen que el elemento se comporte como elementos HTML <col> y <colgroup> respectivamente.

No te preocupes con el tiempo vamos a ir comprendiendo más para que sirve o en que casos podemos ir utilizandolos.

Todo es cuestion de práctica, todo va estar bien ;).