What is It?: The CSS box model, as a whole, focuses on block boxes and diferentiates the different parts of a box, such as margin, border, padding, and content. It also distinguishes how these components work together to create a box that can be displayed and visualized on a page. The CSS box model is the foundation for laying out a website.
Content Box: The area where your content is featured. Properties consist of 'inline-size', 'block-size', 'width', and 'height'.
Padding Box: The padding exists around the content as space. Properties consist of 'padding', etc.
Border Box: The border wraps the content and padding. Properties consist of 'border', etc.
Margin Box: The margin is the outermost layer and wraps the content, padding, and border as space between itself and other elements. Properties consist of 'margin', etc.
When to Use: Float is used for laying out items on the left or right side of the container and allowing text and inline elements to wrap around it. A Float element can be used with Flexbox, Grid, or both.
How to Use: When using Float, a floating element modifies the compound 'display' by using the computed value of 'float'.
Values of Float: 'left', 'right', 'none', 'inline-start', and 'inline-end'.
When to Use: Flexbox is used for laying out items in a single dimension, such as either rows or columns. Flexbox can work with Grid on a single page.
How to Use: When using Flexbox, a parent element (also known as a container) should be defined, as this is where the Flexbox items will be nested in. A Grid element can be nested in a Flexbox conatiner, and vice versa.
Properties of Flexbox: 'display', 'flex-direction', 'flex-wrap', 'flex-grow', 'flex-shrink', 'flex-basis', 'flex' (shorthand for flex-grow, flex-shrink, and flex-basis), 'justify-content', and 'align-items'.
When to Use: Grid is used for laying out items in two dimensions, such as both rows and columns. Grid can work with Flexbox on a single page.
How to Use: When using Grid, a parent element (also known as a container) should be defined, as this is where the Grid items will be nested in. A Flexbox element can be nested in a Grid conatainer, and vice versa.
Properties of Grid for Parent (Container) Element: 'display', 'grid-template-columns', 'grid-template-rows', 'grid-template-area', 'grid-template' (shorthand for rows, columns, and areas), 'column-gap', 'row-gap', 'grid-column-gap', and 'grid-row-gap'.
Properties of Grid for Children (Grid Items): 'grid-column-start', 'grid-column-end', 'grid-row-start', 'grid-row-end', 'grid-column' (shorthand for start and end), 'grid-row' (shorthand for start and end), 'grid-area', and 'align-self'.