¿Cuál es la diferencia entre un cuadro, un cuadro flexible y una tabla en HTML / CSS?

Las diferencias entre una caja, una caja flexible y una tabla son las siguientes:

Caja: puede tener cualquier forma o tamaño, puede ser dinámico / fijo ancho / alto.

Uso: Todos los usos.

Flex-Box: el tamaño es dinámico, en relación con el ancho de la pantalla o el contenedor, y está diseñado para responder.

Uso: El límite es la compatibilidad del navegador, también conocido como sky.

Tabla: el diseño se define mediante filas y columnas que proporcionan coherencia. Generalmente de tamaño fijo, pero puede ser dinámico hasta cierto punto.

Uso: La mejor opción para la presentación de datos incluso sobre tablas div, aunque las tablas div pueden ajustarse con mayor precisión de manera receptiva, no realmente recomendadas para las mejores prácticas fuera de eso, ya que se ofrecen otras opciones anteriores. Los Flexbox toman menos marcas para lograr cualquier diseño de página o aplicación previsto con capacidad de respuesta adicional.

Contexto: configuración predeterminada de CSS del navegador

Caja

Bloquear o en línea dependiendo del elemento HTML.

es bloque, está en línea.

es bloque, está en línea.

Un elemento de bloque ocupa todo el ancho de la ventana gráfica.

Un elemento en línea se ajusta a palabras y oraciones y solo ocupa el ancho de su propio contenido.

Flexbox

Esta es una caja imaginaria que es un elemento de bloque .

Su hijo o hijos se convierten automáticamente en elementos de caja flexible que actúan como elementos de bloque en línea .

Un elemento de bloque en línea es como un elemento de bloque (que podría definirse con ancho y alto) pero también es como un elemento en línea (que podría sentarse uno al lado del otro como palabras en una oración). El bloqueo en línea no ocupa todo el ancho de la ventana gráfica, solo hasta su propio contenido.

Tabla

Este es un elemento de bloque por sí solo.

Sus descendientes son filas, columnas y celdas que tienen propiedades de visualización específicas de las tablas. Es por eso que no puede usar

fuera de

.

Las diferencias

La caja los gobierna a todos. Clasifica cada elemento HTML en dos segmentos: bloque o en línea .

Flexbox y table son iguales porque ambos son elementos de bloque . Son iguales porque sus comportamientos se pueden configurar en CSS.

Son diferentes porque flexbox no puede existir sin especificarlo en CSS, mientras que la tabla puede existir incluso solo en HTML (con la configuración predeterminada de CSS del navegador).

La caja flexible es para un diseño web receptivo porque permite un mejor cambio de tamaño