Tabla de contenido

Conceptos que forman parte del diseño en CSS

Flujo normal del documento: Display block, inline e inline-block

Display : Define el tipo de visualización de un elemento.

Antes de entender el funcionamiento de la propiedad display y su elemento inline-block:

display:  inline-block;

Se debe conocer y entender la diferencia entre los elementos block e inline:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6ad107bd-bf44-429e-8f2d-569485e8b073/reducidaDiferencia.jpg

Como se observo en la clase existe relación entre:

display: block; 
display: grid;
display: flex;
/* Practicamente grid y flex, tienen la propiedad block de manera implicita
es decir, si utilizamos la propiedad display: block-grid en vez de display: grid
esto no afectaria el codigo */
display: inline;
display: inline-grid;
display: inline-flex;
/* En este caso si se debe escribir obligatoriamente la propiedad inline
ya que si no se la agrega se comportaria como un block-grid o block-flex */

https://codepen.io/kevinjlope/details/PobgNrb

https://codepen.io/kevinjlope/pen/rNWbLeP

Tomando como ejemplo a display : inline-grid se debe considerar que en este caso, grid es el comportamiento interno del contenedor, mientras que inline es el comportamiento externo del contenedor ante todo el HTML. Lo mismo pasa con inline-flex y también con grid y flex (que en realidad son block-grid y block-flex).

Slides

view?utm_content=DAEQhmEDz9Q&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton

Contextos de formato: Formato de Contexto de Bloque (BFC)

BFC: Block Formatting Context. Es un mini layout dentro de otro layout. O sea es el layout interno de un elemento, que se comporta de manera independiente a como se comporta a su layout contenedor. Un BFC puede utilizar position: absolute o fixed. En el caso de display: inline-block, table-cell o table-caption.

https://codepen.io/kevinjlope/pen/abBxpaO

Como se observa la clase caja-flotante, de la ilustración embebida de codepen, tiene la propiedad float, que lo convierte en una caja flotante, que se puede posicionar mas a la izquierda o a la derecha, de su posición inicial. Se puede posicionar a la izquierda o a la derecha por los valores que puede recibir righ o left. En caso que no se le haya agregado esta propiedad, las cajas se posicionaran una de bajo de otra, ya que son etiquetas div, y por defecto estas vienen con la propiedad display: block, como se observa en la siguiente imagen.