CSS Positioning Types

Positioning

• Relative positioning moves an element from its original position using offsets (top, right, bottom, left)
• Absolute positioning removes an element from the normal document flow and positions it relative to the nearest positioned ancestor or the initial containing block
• Fixed positioning positions an element relative to the viewport or browser window, remaining fixed even when the page is scrolled
• Sticky positioning is a combination of relative and fixed positioning, switching between the two at a specified offset position

Flexbox

• A powerful layout module in CSS for designing and distributing space among items in a container
• Key properties:
  • Display
  • Flex-direction
  • Flex-wrap
  • Justify-content
  • Align-items
  • Align-content
• Main axis uses justify-content, while the cross axis uses align-items

Pseudo-classes and Pseudo-elements

• Pseudo-classes select elements in a specific state (e.g., first child element or hovering over a link), added to a selector with a colon (:) and a keyword
• Pseudo-elements select a specific part of an element (e.g., first letter or first line of a paragraph), added to a selector with double colons (::) and a keyword

Inheritance, Cascade, and Specificity

• CSS Inheritance: styles can be inherited from ancestor elements by descendant elements
• CSS Cascade: style rules are applied based on source order, with later declarations overriding earlier ones
• CSS Specificity: a concept that overrides source order, with certain selectors having more weight than others
• Selector weights:
  1. ID selectors
  2. Class selectors
  3. Type selectors
  4. Universal selectors
• Specificity calculations are based on a three-category count of ID, class, and type selectors

CSS Box Model

• A set of rules defining how boxes are sized and spaced
• Five properties make up the box model:
  1. Width
  2. Height
  3. Padding
  4. Margin
  5. Border
• Content Box: contains the content added using HTML tags
• Padding Box: surrounds the content and adds space inside the element
• Border Box: surrounds the padding area
• Margin Box: surrounds the entire element

Box Model Properties

• Width and height: set the width and height of the content box
• Padding: defines the space inside an element and around the content box
• Margin: defines the space around the element
• Border: defines a border style between the padding and margin boxes

CSS Layout

• Techniques used to change the positions of elements on a webpage
• Methods used to change the layout:
  • CSS flexbox
  • Floats
  • Position property

Float Property

• Allows an element to be moved to the left or right side of its container
• Two main float properties:
  1. float: specifies whether an element should float to the left, right, or not at all
  2. clear: specifies whether an element can be positioned next to or below floated elements
• Float possible values: left, right, none
• Clear possible values: none, left, right, both