rfabes21

Display property in CSS is the property that determines how the element will flow with the rest of the elements on the page. Since all elements are essentially various sized rectangles, the display property allows us to indicate how we want each rectangle to meld with other rectangles.

For instance, the default property for display is ‘inline’. For instance, if you took text in a

and wrapped a portion of it in a , that span would default to inline, and it would not break the flow of the text. You could color the background of the span if you wanted, and also set specific margin and padding, however inline elements do no accept input for width and height.

‘Inline-block’ is similar, in that it will not interrupt the flow, but you may add inputs for width and height, to further separate and draw attention to the element.

‘Block’ is a property that is set by default on a number of elements in the browser UA stylesheet. A block element will break past any other items that are inline with it. An ele

rfabes21

Floats

Page layouts in webdesign, when they are intended to be fluid, flexible pages, need a way to do that. In page layout programs, boxes that hold images or sidebars can be told to honor the text wrap of other elements, thus creating a fluid web page. In web design, using CSS and the float property, we can tell contaners or images to position in a way that retains that fluidity of the rest of the page. In contrast to this, absolute positioning would disallow that fluidity for that particular element. For instance, an absolutely positioned element would stick on the page where you tell it, and other elements would literally ignore their existance and show on top of, or behind it.

Inputs

The float property can be given either a left or right attribute, which will position it respectively within its parent element. It can also be set to none (default), or Inhereit, which will tell the element to behave with the same float input as its parent.

rfabes21

Position

The position property in CSS is used to manipulate and maneuever elements to easily place them in your desired visual place. There are 5 inputs that the position property will allow: static (default), relative, absolute, fixed, inherit. Really, there are only 3 inputs that matter since static is not used unless you are changing the position back to default from another setting. Also, since the position propterty doesn't cascade, one may use the inherit input to tell it to take the property from it's parent, but this is rarely used.

Relative

A relatively positioned element's original position remains in the flow of the document, but now the element will accept other inputs of left/right/top/bottom/z-index that work to nudge the element into you desired place on the page.

rfabes21

Clearfix

Sometimes, you will encounter situations where you will have a parent container that contains all floated elements in it, which will make the height of it collapse to literally nothing. This can create problems with older browsers or some cross browser issues can occur as well. Collapsing almost always needs to be dealt with by clearing the float after the floated elements but before the close of the container.

Ways to deal

There are a few ways to go about doing this. The first is adding an empty after the floated elements that is not styled at all, but just used as an invisible markup clear for the floats. The problem with this, is for purists it represents semantically styling the page. While they are right in the strictest sense and is more or less frowned upon, it still gets the job done and will not hurt anything. Another way is to set the Overflow property of the parent div to :hidden, which will expand the parent div past the floats and effectively clear them. H

rfabes21

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#