CSS Flashcards
what is a wrapper?
The wrapper keeps a layout from looking too wide or too narrow depending on the device or viewport width.
how do you add a wrapper?
use the existing tag or use an <div> right inside the tag. The <div> method can be a little more flexible, as you can do stuff outside of the <div> tag if you want (like have a different color on the left and right of the <div> main content.
Then indicate in the CSS the wrapper constraints</div></div></div></div>
box-sizing: border-box;
forces any padding and borders into the width and height of an element instead of expanding it.
what is a sticky footer?
forcing the footer to “stick” to the bottom of the page, so that if there is less than a page of content, it will keep the footer at the bottom of the screen (viewport)
how do you do a sticky footer?
wrap the entire body in a div that excludes footer. Then set that div’s min-height to:
.wrap {
min-height: calc(100vh - (height of footer in pixels));
}
note: the “vh” here is viewport height and 100vh equals the 100% viewport height
viewport height
100vh equals the 100% viewport height
Inline elements
- like images, links and span tags, do not create line breaks in a layout; they appear on the same line as the content and elements beside them.
- The browser does not apply width and height properties, or top and bottom margin settings to inline elements.
- An inline element will only accept left/right margin value and any padding values (although top/bottom values don’t expand the height visually, only clickable areas).
Block-level elements
like divs, paragraphs and headings, stack on top of each other and expand to fill their parent. have a break before and after the element
values of a float property
left, right, and none
about floats
Elements in the normal document flow are either block or inline; they appear stacked on top of each other or on the same line as the content and elements beside them.
When you apply a float to an element, the element gets taken out of the normal document flow and shifted to the left or right side of its container.
A floated element is technically a block-level element (it accepts any width, height, padding or margins values), but it behaves like an inline element because it doesn’t exist on a line of its own, and surrounding content flows around it.
why can a background (parent container) disappear when the content inside is a float? And how can you fix it?
A parent container with floated elements may not always collapse to no height at all; if the container includes a padding or height value, it’ll have some visible height.
There are a two common ways to force a collapsed element to expand to the full height of its floated child elements:
- Setting the parent element’s overflow value to hidden or auto
- Clearing the floats with a CSS pseudo-element
A clearfix fixes the collapsing issue by forcing a container to expand and contain the floated elements.
how do elements behave that have the following attribute:
positioning: absolute;
Elements with absolute positioning are neither affected by or do not affect other elements in the normal flow of the page.
They are like layers in Photoshop or Illustrator; you’re free to place them anywhere you wish on the page.
how to put an element with positioning: absolute somewhere on the page
Positioned elements rely on you telling the browser where to place the them, using values called positioning offsets, for the element’s top, right, bottom or left position.
When you use absolute positioning, you place the absolutely positioned elements in relation to a parent container; the parent container is the positioning context.
You can change the positioning context to other containing elements; this lets us position elements precisely where we want them.
