The box model Flashcards
What is the key thing to always remember when writing CSS (concerning box model) ?
Everything displayed by CSS is a box. Whether that’s a box that uses border-radius to look like a circle, or even just some text: the key thing to remember is that it’s all boxes.
What is extrinsic sizing ?
Extrinsic sizing is the explicit control of the size of a box using properties like width, border, etc. and assign them fixed or relative values (but not relatives to the content of that box).
With extrinsic sizing the box try to resize its content, so that the content fits into it. It does not always work, an overflow can therefore happen.
What is intrinsic sizing ?
Intrinsic sizing is when the size of the box is defined/influenced by its content. The box is more flexible and fit around its content.
The box resize itself depending of its content, rather than trying to resize its content.
what does the below line instruct when applied to a box ?
width: min-content
The min-content keyword tells the box to only be as wide as the intrinsic minimum width of its content.
It is intrinsic sizing.
What is an overflow ?
An overflow happen when a content of a box is bigger than the extrinsic size of this box. Overflow can be controlled with the css property: ‘overflow’
From inside to outside, what are the distinct area of a box ?
The content box
The padding box
The border box
The margin box.
How to add a scrollbar to a box
overflow: scroll
or
overflow: auto
Describe what is the content-box area ?
It is the area that the content lives in. this content can control the size of its parent, so is usually the most variably sized area.
Describe what is the padding-box area ?
The padding box surrounds the content box and is the space created by the padding property.
The background of the box will be visible in the space that it creates. If our box has overflow rules set, such as overflow: auto or overflow: scroll, the scrollbars will occupy this space too.
Describe what is the border-box area ?
The border box surrounds the padding box and its space is occupied by the border value. The border box is the bounds of your box and the border edge is the limit of what you can visually see. The border property is used to visually frame an element.
Describe what is the margin-box area ?
The final area, the margin box, is the space around your box, defined by the margin rule on your box. Properties such as outline and box-shadow occupy this space too because they are painted on top, so they don’t affect the size of our box. You could have an outline-width of 200px on our box and everything inside and including the border box would be exactly the same size.
What is the difference between inline and inline-block ?
An inline element has block margin, but other elements won’t respect it. Use inline-block, and those elements will respect the block margin, while the element maintains most of the same behaviors it had as an inline element.
What is the difference between inline and block ?
A block item will, by default, fill the available inline space, whereas a inline and inline-block elements will only be as large as their content.
What does the property content-box do ?
content-box tells our box how to calculate its box size. By default, all elements have the following user agent style:
box-sizing: content-box;
Having “content-box” as the value of box-sizing means that when you set dimensions, such as a width and height, they will be applied to the content box. If you then set padding and border, these values will be added to the content box’s size.
Having “border-box” as the value of box-sizing tells CSS to apply the width to the border box instead of the content box. This means that our border and padding get pushed in.
