13 Boxes

Question 1

Each html element sort of acts like there is a box around it (even inline elements)
t or f

Answer 1

true

Question 2

CSS rules must be surruonded by “

t or f

Answer 2

F

They can also be ‘

Question 3

Control the height and width of a box

Answer 3

height: 300px;
width: 300px;

Question 4

Between px, em, and %, which are best to control the size of a webpage for various sizes?

Answer 4

em and %

Question 5

What happens with a p inside a div:
div.box {
height: 300px;
width: 300px;
}
p {
height: 75%;
width: 75%;
;}

Answer 5

it’s height and width is set to 75% of the containing element
225px wh

Question 6

What happens with the div box
div.box {
height: 50%;
width: 50%;
}

Answer 6

it’s height and width is set to 50% of the containing element (the browser window in this case)

Question 7

set a max and min width/height

Answer 7

td.description {
min-width: 450px;
max-width: 650px;
text-align: left;
padding: 5px;
margin: 0px;}

p {
min-height: 10px;
max-height: 30px;}

Question 8

Define what happens when the box shrinks smaller than the text (made it disappear, make it scroll)

Answer 8

p. one {
overflow: hidden;}

p. two {
overflow: scroll;}

Question 9

What’s the difference between padding, margin and border

Answer 9

Border is the thickness of the box
Margin is the space outside the box border (in between boxes)
Padding is the space between the box border and content

Question 10

Set the border width generally

and

on specific sides (2 ways)

Answer 10

p.one {
border-width: 2px;}
p.two {
border-width: thick;}

border-top-width
border-right-width
border-bottom-width
border-left-width
OR
p.three {
border-width: 1px 4px 12px 4px;}
top, right,
bottom, left

Question 11

Set border as solid

Answer 11

border-style: solid;

Question 12

Set the border as a double line (both lines together make the border-width)

Answer 12

border-style: double;

Question 13

Set the border as dotted or dashed

Answer 13

p. two {border-style: dotted;}

p. three {border-style: dashed;}

Question 14

Set border:

• as if sticking out from the page
• as if carved into page
• as in embedded into the page
• as if embossed

Answer 14

p. six {border-style: ridge;}
p. five {border-style: groove;}

p. seven {border-style: inset;}
p. eight {border-style: outset;}

Question 15

Hide the border

Answer 15

border-style: hidden;

border-style: none;

Question 16

Set border color generally and

on specific sides (2 ways)

Answer 16

p.one {
border-color: #0088dd;}

border-top-color
border-right-color
border-bottom-color
border-left-color
OR
p.two {
border-color: #bbbbaa #111111 #ee3e80 #0088dd;}

Question 17

Use shorthand to control border thickness, style, and color

Answer 17

border: 3px dotted #0088dd;

Question 18

Control padding generally
AND
each individual side (2 ways)

Answer 18

padding: 10px

padding-top
padding-right
padding-bottom
padding-left
OR
padding: 10px 5px 3px 1px

Question 19

Control margin generally
AND
each individual side (2 ways)

Answer 19

margin: 20px;

margin-top
margin-right
margin-bottom
margin-left
OR
margin: 1px 2px 3px 4px;

Question 20

If width/height is used to define a box, how are they affected by margin, border and padding?

Answer 20

Margin, Border, and Padding are added to the width/height

Question 21

Center a box

Answer 21

margin: 10px auto 10px auto

or

margin: auto;

Question 22

Turn an inline element into a block element

turn a block element into an inline element

Make a block element flow like an inline element but retain other block features

Hide an element from page (and eliminate space)

Answer 22

display: block;
display: inline;
display: inline-block;
display: none;

Question 23

Hide an element from page but keep the space

make an element visible

Answer 23

visibility: hidden;
visibility: visible;

Question 24

Make an image be the border
(2 ways)
(5 rules, short form does 3)

Answer 24

This property requires three
pieces of information:
border-image-source: url(“location”) (it doesn’t need the quotation marks)
Can also be linear-gradient or repeating-linear-gradient

border-image-slice: 1to4 numeric values separated by space
border-image-slice: 11 11 11 11 (or just 11 for all)
it’s 11 pixels from the top of the image, 11 from right etc.
Units can be:
no units- is pixels. Can’t do px.
%- percent of the image to place in each slot
fill- after numbers to include the

border-image-repeat: stretch
/* Keyword value */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
/* vertical | horizontal */
border-image-repeat: round stretch;
/* Global values */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: revert;
border-image-repeat: unset;

border-image-width: 1to4 numeric values separated by space
Can expand

border-image-outset: 1to4 numeric values separated by space

OR
all in one
border-image: url(“images/dots.gif”)
11 11 11 11 stretch;}

Question 25

Create box drop shadow

Answer 25

box-shadow: -5px -5px 2px #777777;

horizontAl offset
Negative values position the
shadow to the left of the box.
verticAl offset
Negative values position the
shadow to the top of the box.
Blur DistAnce
If omitted, the shadow is a solid
line like a border.
sPreAD of shADoW
If used, a positive value will
cause the shadow to expand in
all directions, and a negative
value will make it contract

Question 26

Create an internal drop shadow

Answer 26

box-shadow: inset 0 0 10px #777777;}

Question 27

Round box corners generally

Round box corners by corner (2 ways)

Answer 27

border-radius: 10px;

border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
OR
border-radius: 5px, 10px, 5px, 10px;

Question 28

Create unevenly rounded corners. ie more rounded on the top side than the left side of the round
Generally (1 way)
and
Each corner at a time

Answer 28

There is also a shorthand for
targetting all four corners at
once; first you specify the four
horizontal values, then the four
vertical values, as shown in the
second shape on the left.

border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em
or
border-radius: 10px / 50px;

border-top-left-radius: 80px 50px

Question 29

margins are additive between boxes
20 + 40 = 60
t or f

Answer 29

false

Question 30

How to make it so the height is the height of the padding, margin border and element and the width is the width of the padding, margin border and element (rather than the height and width being just the size of the element)

(Alternative box model)

Answer 30

box-sizing: border-box

Question 31

What’s the difference between inline and block elements with respect to:

• new lines
• width and height properties
• how much space they take up on the line
• what margin border and padding do

Answer 31

block, breaks on new line. Inline doesn’t

Block respects width and
height. Inline doesn’t

Block elements stretch the whole line by default.
inline elements are the width of the content.

Blockmargin border and padding will push other elements. Inline will apply but only in the line (x) direction.
If the inline element has as a visible border, it will extend into the line above and below but not push the elements.

Question 32

The way the inside of boxes are formatted and the way outer boxes are formatted is the same
t or f

Answer 32

t
there is a distinction between inner and outer display types
But the inside of a box is normal flow by default and can be any of the flow types. (flex etc)

Question 33

What does the width and height control

Answer 33

the size of the content (on the inside of the padding)

Unless if you set box-sizing: border-box where height and width will include the padding as well.

Question 34

A hybrid mode between inline and block that makes it push elements up and down as well as left and right. (good for links)
Also these elements can be beside one another

Answer 34

display: inline-block

Question 35

What happens if you set margin, border or padding with:
1 number
2 numbers
3 numbers
4 numbers

Answer 35

1 all sides
2 topbottom leftright
3 top leftright bottom
4 top left bottom right

Question 36

Center an element using the box model

Answer 36

margin: 0 auto

Question 37

What do negative margins do?

Answer 37

makes elements go into one another (and their margins)

Question 38

Big difference that comes with inline block

Answer 38

Inline block elements can be beside one another but otherwise have border, margin and padding and push other elements out of the way.