CSS3 Flashcards
Box Model order
Content, Padding, Border, Margin
Content
text inside of an HTML element
Padding
space within an element’s border (or inside of margin if there is no border)
Border
forms a line around the element (and padding)
Margin
space outside of the element’s border, or outside the padding if there is no border
Trick to centering content
width: 650px;
margin: 0 auto
- set fixed width; sets left/right margin to auto centers content horizontally
- set these attributes to a div with ID “wrapper”
- wrap div around site’s content, centers even when window resizes.
elements that are usually inline
<i></i>
<span></span>
<b></b>
box-sizing inline elements
- can’t have margin/padding on their top/bottom
- can be next to other elements
box-sizing block elements
- can have margin/padding on their top/bottom
- cannot be next to other elements
elements that are usually block
<p></p>
<div></div>
attribute to change an element’s default behavior
display
display: inline
element is displayed inside the current block on the same line as other elements it is near
display: block
element tolerates no elements next to it unless a float is used
display: inline-block
allows a block element to be next to another block element, but still have vertical padding/margins
float: left/right
move an element all the way to the left/right side of its container and have all other elements flow around it
clear: both
remove the effects of a floated container. applied to an element after a floated container to remove the effects of using float
to create a page with two columns
float the first AND second container left. elements will stack on top of one another.
If I decrease the width of the page, the second element will float beneath the first automatically.
using float to create an image gallery
☞ You could use float: left; to create a dynamic image gallery
☞ float each image left and give it a margin-right and margin-bottom to enforce space
☞ As you resize the page, the images will stack nicely
to float text around an image
☞ To add an image to the page with text flowing around it, float it left
☞ Try adding some margin-rightand margin-bottom to the image
clearing floats
☞The clear property will move the element down past
surrounding floated elements
☞ clear has 4 possible values: both, left, right and none (default)
☞ if there is no content to clear after a floated element, use the <br></br> element
CSS positioning does what now?
Using the CSS position attribute, you can use X and Y values to move elements around the screen based on different frames of reference
(it is a last resort)
CSS positioning
left, right, top, and bottom are used to specify an offset, the reference point of which is determined by the type of positioning specified (fixed, absolute,
relative, etc.)
position left
For left, offset values that are positive will move your element to the right while negative values will move it to the left.
position right
offset values that are positive will move your element to the left while negative values will move it to the right.
