CSS Layout Tricks and Techniques Quiz

CSS Layout Tricks and Techniques for Sizing and Positioning

Sizing-related techniques:

• Define how elements should be sized and how they should grow/shrink with viewport changes
• HTML documents may not use all available space without scrolling
• Use "height: 100%" for html and body tags to take up full viewport height
• CSS3 introduces vh and vw units for sizing relative to viewport

Sizing with constraints:

• Fill in missing values through constraint-based sizing algorithm
• Set margin values explicitly for width/height to auto-size absolute positioned elements
• Works for display: block, but only for width

Positioning techniques:

• Place elements in correct relative positions across all screen sizes
• Use relative and absolute positioning to position elements relative to a parent
• Negative margins can be used for overflow or centering in old versions of IE

Combining flex and non-flex items:

• Use flexbox and flex-grow properties to create bottom/top-aligned boxes
• Place main content in flex-grow: 1 and footer/header in flex-grow: 0

Height transfer:

• HTML documents contain root elements that are display: block by default
• If blocks do not have specified height, they will use height of content rather than viewport
• Use height: 100% for html and body tags to transfer viewport height to subsequent markup

Overall:

• CSS offers powerful tools for sizing and positioning elements
• These techniques allow for greater control over layout and design on web pages