These are just some notes that I quickly drotted down while going through the CSS for JS course

Built-in Declarations and Inheritance

• Browsers provide default styling to HTML elements. These styles are part of the user-agent stylesheet
  • Chrome's built in styling can be found in their source code
• Some properties are inherented by all of the children of an element (e.g. color) whereas other properties are not (e.g. border). See this list of inheritable properties

The Box Model

The box model refers to the layout and spacing algorithm used by browsers to determine how HTML elements are laid out in a page.

Box Sizing

• In the box model there are four main attributes that determine the size/amount of space that an HTML element takes up:

  • Margin
  • Border
  • Padding
  • Content

• By default (in Chrome, other browsers might behave differently) the size of a box is calculated using a content-box system.

  • Using the box-sizing property allows us to change the calculation algorithm used:
    • content-box (default value used by Chrome)
    • border-box

content-box

The content-box algorithm determines the size of a box by setting the content of the box to the dimension irrespective of any border or padding applied

Example

<style>
section {
    width: 500px;
}
.box {
    width: 100%;
    padding: 20px;
    border: 4px solid;
}
</style>

<section>
    <div class="box"></div>
</section>

With the content-box calculation, the div element in the html will have a width of 548px and height of 48px as the width of the content in box is set to 100%

border-box

The border-box algorithm determines the size of the box by account for both the padding and border applied to an element, not just the content. With the example provided in context-box section, if a box-sizing: border-box was used, then the entire div would intuitively only have a width of 500px and height of 48px

Flow Layout

There are different layout algorithms ("layout modes") supported by browsers to determine how the layout of an HTML element is calculated.

Commonly used modes are:

• Flow Layout
• Positioned Layout
• Flexible Bos Layout (Flexbox)
• Grid Layout (CSS Grid)

The flow layout is the default layout mode that is typically used by browsers.

• HTML elements will have a display value of inline | block | inline-block. Different HTML elements have different default display values (i.e. by default, <div/> used block and <span/> uses inline )
• "replaced" elements have their own quirky behaviour
  • Replaced elements are elements that embed a "foreign" object like <img/>, <video/>, <canvas/>, <iframe/> (??)
    • These elements are treated as inline still (for some reason) so it makes sense to change them to block when styling
• Depending on the value of display, the HTML elements follow different sets of rules:
  • inline elements typically ignore any rules that affect anything to do with vertical spacing (as inline elements want to be in-line)
  • block elements try to expand and fill as much horizontal space as possible
  • inline elements can line-wrap
  • inline-block treats the element as an inline element with all of the CSS rules available to a block element with the exception that the element can no longer line-wrap.

Width and Height Algorithms

• Default behaviour for width is to take up as much space as possible (auto)
• The default height behaviour for block elements is to take up the least amount of space possible
• The value of the width and height can take two types
  • Measurements (numerical values like 100%, 100px, 1rem)
  • Keywords (like auto, fit-content, min-content, max-content)
    • min-content: Sets the width to the smallest possible value that contains all of the elements
    • max-content: Sets the width to the smallest possible value that contains all of the elements without breaking it up
    • fit-content Sets the width to the size of child elements while also ensuring that it fits within the parent container

• Margin collapse is when multiple elements' margin's collapse together to form a single "margin space" (rather than keeping their own distinct margins)