Box Model Flashcards
Box model components
- Content
- Padding
- Border
- Margin
Basic Margin collapsing rules
- Two positive margins will combine to become one margin. Its size will be equal to the largest individual margin. (
max(a, b)) - Two negative margins will collapse and the smallest (furthest from zero) value will be used. ((
a - b) - If one margin is negative, its value will be subtracted from the total. (
min(a, b))
Describe outer display types
Outer display types — they affect how the box is laid out in relation to other boxes around it.
display: block:
- The box will break onto a new line.
- The width and height properties are respected.
- Padding, margin and border will cause other elements to be pushed away from the box.
display: inline:
- The box will not break onto a new line.
- The width and height properties will not apply.
- Paddings and margin can overlap other content.
display: inline-block:
- Use it if you do not want an item to break onto a new line, but do want it to respect width and height and avoid the overlapping.
How to change inner display type.
You can change the inner display type by setting an inner display value, for example display: flex;
Box sizing models
Standard (box-sizing: content-box): when you set dimensions such as width and height, those dimensions apply to the content box. If you then set padding and border, these values are added to the content box’s size.
alternative (box-sizing: border-box) box model, any width is the width of the visible box on the page. The content area width is that width minus the width for the padding and border.
How to set margin / padding, all properties you remember.
In general, margin / padding properties can be applied to each side:
- top
- right
- bottom
- left
Shortcut have three forms:
- prop: all-sides;
- prop: top+bottom left+right;
- prop: top right bottom left; clock-wise.
Example:
- margin: 2px 1em 0 auto;
- padding: 5% auto;
- padding-bottom: 10px
Set border (shortcut)
Shortcut: width - style - color:border: 1px solid black;
Set border for top of the box only (shortcut)
` border-top: 5px dotted green;`
What are border styles (most important ones)
dotteddashedsoliddouble-
groove(rowkowaty)
How to set rounded corners:
- All corners the same
- All corners different
All:border-radius: 5%;
top-left | top-right | bottom-right | bottom-left:border-radius: 1px 0 3px 4px;
How to set box shadow, what are the arguments
Arguments:
- Horizontal offset: positive values move the shadow right, and negative values left.
- Vertical offset: positive - up, negative - down.
- The blur radius (optional): a higher value means the shadow is dispersed more widely.
- Spread radius (optional): a larger number increases the size of the shadow and a smaller number decreases it, making it the same size as the blur radius if it’s set to 0.
- Color (optional)
box-shadow: 5px 5px 20px 5px #000;
Set background of div to red
background-color: red
Set some image as div background
background-image: url(balloons.jpg);
Types of gradient functions
-
linear-gradient()function generates an image of two or more colors, progressively. -
radial-gradient()creates a gradient that radiates in a circular fashion instead of specifying an angle. -
conic-gradient()has a center point in your box and starts from the top (by default), and goes around in a 360 degree circle.
What will happen if content is larger than set width or height
content overwrites content outside of element (overflows)
Common overflow settins
overflow: hidden; overflow: scroll; /* add scrollbars */ overflow: auto; /* only add scroll when more content than possible */
Break words with - when necessary
hyphens: manual
