css

Every element is a rectangular box with four layers: content (the actual text/image), padding (space between content and border), border (the visible edge), and margin (space outside the border). By default, width/height set only the content size; use box-sizing: border-box to include padding and border.

Flexbox is a one-dimensional layout system for arranging items in a row or column. Set display: flex on a container, then control direction with flex-direction, alignment with justify-content (main axis) and align-items (cross axis), and item sizing with flex-grow, flex-shrink, and flex-basis.

CSS selectors target HTML elements for styling. Specificity determines which rules win when multiple selectors match the same element. The hierarchy is: inline styles (1000) > ID selectors (100) > class/attribute/pseudo-class (10) > element/pseudo-element (1). !important overrides all specificity.

CSS has five position values: static (default, normal flow), relative (offset from normal position), absolute (positioned relative to nearest positioned ancestor), fixed (positioned relative to viewport), and sticky (toggles between relative and fixed based on scroll position).

Use media queries to apply different styles at different screen sizes, flexible units (%, rem, vw/vh) instead of fixed pixels, Flexbox/Grid for fluid layouts, and the viewport meta tag. Mobile-first design starts with small screens and adds complexity for larger ones.