Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

The CSS box model is responsible for calculating:

• How much space a block-level element takes up.
• Whether or not borders and/or margins overlap, or collapse.
• A box’s dimensions

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

The box model has the following rules:

• The dimensions of a block element are calculated by width, height, padding, borders, and margins.
• If no height is specified, a block element will be as high as the content it contains, plus padding (unless there are floats, for which see below).
• If no width is specified, a non-floated block element will expand to fit the width of its parent minus padding.
• The height of an element is calculated by the content’s height.
• The width of an element is calculated by the content’s width.
• By default, paddings and borders are not part of the width and height of an element.