CSS Layout Notes

From the following resources:

inline-block

  • elements are affected by the vertical-align property, which you probably want set to top.

position

  • 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.

max-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.

width

  • 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

  • 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.
    • A common display value is none. Some specialized elements such as script use this as their default. It is commonly used with JavaScript to hide and show elements without really deleting and recreating them.

meta viewport

  • Using the meta viewport value width=device-width instructs the page to match the screen’s width in device independent pixels.

Responsive design

  • 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

Float

  • 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.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s