CSS3

Question 1

Box Model order

Answer 1

Content, Padding, Border, Margin

Question 2

Content

Answer 2

text inside of an HTML element

Question 3

Padding

Answer 3

space within an element’s border (or inside of margin if there is no border)

Question 4

Border

Answer 4

forms a line around the element (and padding)

Question 5

Margin

Answer 5

space outside of the element’s border, or outside the padding if there is no border

Question 6

Trick to centering content

Answer 6

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.

Question 7

elements that are usually inline

Answer 7

<i></i>
<span></span>
<b></b>

Question 8

box-sizing inline elements

Answer 8

• can’t have margin/padding on their top/bottom

- can be next to other elements

Question 9

box-sizing block elements

Answer 9

• can have margin/padding on their top/bottom

- cannot be next to other elements

Question 10

elements that are usually block

Answer 10

<p></p>

<div></div>

Question 11

attribute to change an element’s default behavior

Answer 11

display

Question 12

display: inline

Answer 12

element is displayed inside the current block on the same line as other elements it is near

Question 13

display: block

Answer 13

element tolerates no elements next to it unless a float is used

Question 14

display: inline-block

Answer 14

allows a block element to be next to another block element, but still have vertical padding/margins

Question 15

float: left/right

Answer 15

move an element all the way to the left/right side of its container and have all other elements flow around it

Question 16

clear: both

Answer 16

remove the effects of a floated container. applied to an element after a floated container to remove the effects of using float

Question 17

to create a page with two columns

Answer 17

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.

Question 18

using float to create an image gallery

Answer 18

☞ 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

Question 19

to float text around an image

Answer 19

☞ 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

Question 20

clearing floats

Answer 20

☞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

Question 21

CSS positioning does what now?

Answer 21

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)

Question 22

CSS positioning

Answer 22

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

Question 23

position left

Answer 23

For left, offset values that are positive will move your element to the right while negative values will move it to the left.

Question 24

position right

Answer 24

offset values that are positive will move your element to the left while negative values will move it to the right.

Question 25

position top

Answer 25

offset values that are positive will move your element down while negative values will move it up

Question 26

position bottom

Answer 26

offset values that are positive will move your element up while negative values will move it down

Question 27

position: relative

Answer 27

☞ Relative to the container that it’s in
☞ Using position: relative; you can position your element
relative to where it would normally be on screen
☞The element is still in the normal “flow” of the page, it still takes up space
☞ Works well to make small changes in position unachievable through margin or padding

Question 28

position: absolute

Answer 28

☞ Using position: absolute; you can position your element relative to the entire page
☞The element will not be in the normal “flow” of the page, it will not take up space
☞This is how “modal” elements are created

Question 29

attribute used to define layer in relation to other elements on the page

Answer 29

z-index: