Modelo de caja
Para entender algo basico de como se componen los elementos en CSS. El modelo de caja son 4 componentes que tiene cada objeto, y son:
Css display
Este elemento es basico para Frontend, ya que es la ubicacion y tamaños de los elementos, estos se pueden cambiar agusto, para obtener nuestra pagina ideal. Los tipos de Display son:
Block: El elemento ocupa todo el espacio disponible horizontalmente.
Inline: El elemento ocupa solo el espacio necesario horizontalmente.
Inline-block: El elemento ocupa el espacio necesario horizontalmente y verticalmente casi todo el disponible.
Flex o flexbox: Divide el espacio equitativamente en los elementos.
Grid: Crea una "cuadricula" que divide el espacio, pero todo es manual, igualmente la asignacion de la ubicacion de los elementos.
Ahora un ejemplo visual para afianzar los tipos de display.
Recuerda que cada display tiene parametros que podemos editar a gusto, haciendo muy flexible el proceso y lograr nuestra pagina perfecta.
Medidas para dispositivos media query
Estas son las medidas para usar en los media query:
360px para móviles
768px para tabletas
1280px para ordenadores
Estas medidas son relativas pero ayudan a la guía.