Box Model Flashcards
What is the fundamental concept of CSS layout?
Everything displayed by CSS is a box.
What are the main factors that affect a box’s behavior?
display value, set dimensions, and content.
What are the two types of sizing in CSS?
Extrinsic sizing (specified size) and intrinsic sizing (browser’s default behavior).
How does intrinsic sizing work?
The browser makes decisions based on content size, using properties like min-width to ensure the box is at least as wide as the content’s minimum width.
What happens when content is too large for its container?
Overflow occurs.
How can you manage overflow in CSS?
Using the overflow property to control how content behaves when it exceeds its container.
What are the four areas of the CSS box model?
Content box, padding box, border box, and margin box.
What is the role of the content box?
It is where the content lives and can influence the parent’s size.
What is the padding box?
The area surrounding the content, created by the padding property, and inside the box’s background.
What defines the border box?
The space around the padding box, defined by the border value.
What is the margin box?
The space around the entire box, set by the margin property.
Which properties do not affect a box’s size?
outline and box-shadow.
What is the purpose of a user agent stylesheet?
It defines default styles for elements if no custom CSS is applied.
How do inline elements behave in the box model?
They respect block margins, but other elements do not respect their margins, and they only grow as large as their content.
How do block elements behave in the box model?
They fill the available inline space by default.
What does the box-sizing property do?
It determines how the box calculates its size.
How does content-box sizing work?
Width and height apply only to the content box, while padding and border increase the total size.
How does border-box sizing work?
The specified width includes the content, padding, and border, pushing the padding and border inside.
