13 Boxes Flashcards by Jesse Agar

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

true

How well did you know this?

Not at all

Perfectly

CSS rules must be surruonded by “

t or f

They can also be ‘

How well did you know this?

Not at all

Perfectly

Control the height and width of a box

height: 300px;
width: 300px;

How well did you know this?

Not at all

Perfectly

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

em and %

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

set a max and min width/height

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

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

How well did you know this?

Not at all

Perfectly

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

p. one {
overflow: hidden;}

p. two {
overflow: scroll;}

How well did you know this?

Not at all

Perfectly

What’s the difference between padding, margin and border

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

How well did you know this?

Not at all

Perfectly

Set the border width generally

and

on specific sides (2 ways)

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

How well did you know this?

Not at all

Perfectly

Set border as solid

border-style: solid;

How well did you know this?

Not at all

Perfectly

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

border-style: double;

How well did you know this?

Not at all

Perfectly

Set the border as dotted or dashed

p. two {border-style: dotted;}

p. three {border-style: dashed;}

How well did you know this?

Not at all

Perfectly

Set border:

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

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

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

How well did you know this?

Not at all

Perfectly

Hide the border

border-style: hidden;

border-style: none;

How well did you know this?

Not at all

Perfectly

Set border color generally and

on specific sides (2 ways)

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;}

Use shorthand to control border thickness, style, and color

border: 3px dotted #0088dd;

Control padding generally
AND
each individual side (2 ways)

padding: 10px

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

Control margin generally
AND
each individual side (2 ways)

margin: 20px;

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

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

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

Center a box

margin: 10px auto 10px auto

margin: auto;

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)

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

Hide an element from page but keep the space

make an element visible

visibility: hidden;
visibility: visible;

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

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;}

Create box drop shadow

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 ```

Create an internal drop shadow

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

Round box corners generally Round box corners by corner (2 ways)

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; ```

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

``` 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

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

false

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)

box-sizing: border-box

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

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.

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

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)

What does the width and height control

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.

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

display: inline-block

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

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

Center an element using the box model

margin: 0 auto

What do negative margins do?

makes elements go into one another (and their margins)

Big difference that comes with inline block

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