- The display property can be set to:
- block - takes up entire width of the html page and does NOT let any other elements sit next to it.
- inline-block - allows other elements to sit next to it self in the same line
- inline - allows elements to sit in the same line. Useful only for block elements like <p>, as otherwise the element loses its dimensions
- none - the element is not displayed.
- To place an element in the center of the page use "margin:auto" as the style.
- We can use negative margin/padding to move element off the page as well.
- When you float an element on the page, you're telling the webpage: "I'm about to tell you where to put this element, but you have to put it into the flow of other elements." This means that if you have several elements all floating, they all know the others are there and don't land on top of each other.
- If you tell an element to
clear: left, it will immediately move below any floating elements on the left side of the page; it can also clear elements on theright. If you tell it toclear: both, it will get out of the way of elements floating on the left and right! - If you don't specify an element's positioning type, it defaults to
static. This just means "where the element would normally go." If you don't tell an element how to position itself, it just plunks itself down in the document. - The first type of positioning is absolute positioning. When an element is set to
position: absolute, it's then positioned in relation to the first parent element it has that doesn't haveposition:static. If there's no such element, the element withposition: absolutegets positioned relative to<html>. - Relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default
staticpositioning. - Finally, fixed positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.
Sunday, 29 September 2013
CSS Positioning
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment