From the following resources:
- elements are affected by the vertical-align property, which you probably want set to top.
- A static element is said to be not positioned and an element with its position set to anything else is said to be positioned.
- relative behaves the same as static unless you add some extra properties.
- Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
- Creates a coordinate system for child elements
- When you use the offset property to shift a relatively positioned element, it doesn’t affect the element(s) that follow. Other content will not be adjusted to fit into any gap left by the element.
- A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
- An element with position: fixed shares all the rules of an absolutely positioned element, except that the viewport (browser/device window) positions the fixed element, as opposed to any parent element. Additionally, a fixed element does not scroll with the document
- As with relative, the top, right, bottom, and left properties are used.
- A fixed element does not leave a gap in the page where it would normally have been located.
- absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport.
- Think of it as an element with a giant strip of velcro on its back
- Unlike the static and relative values, an absolutely positioned element is removed from the normal flow
- absolute elements create a new coordinate system for child elements
- If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling
box-sizing : border-box
- When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width.
- Using max-width instead of width in this situation will improve the browser’s handling of small windows. This is important when making a site usable on mobile.
- Setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right.
margin : auto
- you can set the left and right margins to auto to horizontally center that element within its container.
- display is CSS’s most important property for controlling layout.
- inline vs. block
- The a element is the most common inline element, since you use them for links.
- inline vs. block
- Using the meta viewport value width=device-width instructs the page to match the screen’s width in device independent pixels.
- Create breakpoints based on content, never on specific devices, products or brands.
- Design for the smallest mobile device first, then progressively enhance the experience as more screen real estate becomes available
- For example, if you assign float: left to an element, it will move to the left-most boundary of its parent element.
- The value none is the default value and tells an element not to float at all.
- The inherit value tells an element to inherit the float value of its parent element.