CSS Fundamentals:
1. Box Model:
- Every HTML element is rendered as a rectangular box comprising four layers: Content -> Padding -> Border -> Margin.
- box-sizing: content-box (default): Width and height apply only to content; padding and border add extra width to the element.
- box-sizing: border-box: Width and height include content, padding, and border, making responsive sizing intuitive.
2. Specificity Hierarchy (Weighting tuple: [inline, IDs, classes/attributes/pseudo-classes, elements]):
- Inline styles (style='...'): 1,0,0,0
- ID selectors (#header): 0,1,0,0
- Class selectors, attributes, pseudo-classes (.btn, [type='text'], :hover): 0,0,1,0
- Type selectors and pseudo-elements (div, p, ::before): 0,0,0,1
- !important overrides standard specificity rules.
3. Block Formatting Context (BFC):
- An isolated rendering region where block boxes are laid out independently.
- Clears internal floats, prevents margin collapsing between parent and child, and avoids overlapping adjacent floated elements.
- Created by: display: flex/grid/flow-root, overflow: hidden/auto, or position: absolute/fixed.