CSS layout techniques

Técnicas de diseño de layout CSS:

CSS Box-Model

• Content (contenido): Se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
• Padding (relleno): Espacio libre opcional existente entre el contenido y el borde.
• Border (borde): Línea que encierra el contenido y el padding.
• Margin (margen): Separación opcional existente entre la caja y el resto de las cajas adyacentes.

https://bootcamp.laboratoria.la/es/topics/css/css/boxmodel-and-display

Codepen: Interactive Box-model demo https://codepen.io/mediaUX/pen/mybvvrN

Posicionamiento

Ubicar elementos:

• Static positioning - In this elements are positioned static by default i.e it is always positioned according to the normal flow of the page.

• Relative positioning - In this the element is positioned relative to its normal position.

• Absolute positioning - In this the element is positioned relative to the nearest positioned element.If an absolute positioned element has no nearest positioned element, it uses the document body, and moves along with page scrolling.

• Fixed positioning - In this the element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

• Sticky positioning - In this the element is positioned based on the user's scroll position.A sticky element toggles between relative and fixed, depending on the scroll position.It behaves like relative positioning and when the given offset position is met, it becomes fixed as in the case of fixed positioning.

CSS Grid

guide: CSS Grid Layout Guide

CSS Flexbox

Flexbox = Flexible Box Layout module

Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ SheatSheet: https://css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png