13 Boxes Flashcards
Each html element sort of acts like there is a box around it (even inline elements)
t or f
true
CSS rules must be surruonded by “
t or f
F
They can also be ‘
Control the height and width of a box
height: 300px;
width: 300px;
Between px, em, and %, which are best to control the size of a webpage for various sizes?
em and %
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
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)
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;}
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;}
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
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
Set border as solid
border-style: solid;
Set the border as a double line (both lines together make the border-width)
border-style: double;
Set the border as dotted or dashed
p. two {border-style: dotted;}
p. three {border-style: dashed;}
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;}
Hide the border
border-style: hidden;
border-style: none;
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
or
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.
