2. CSS Layout
make it so this box remains as 100 x 100 by using the correct property and value. What is the dimension of the new content box? .box { height: 100px; width: 100px; border: 10px solid black; padding: 20px; background: gold; }
.box { height: 100px; width: 100px; border: 10px solid black; padding: 20px; background: gold; box-sizing: border-box; } 40x40 since padding and border took it away from it to make up for the lost space
What are the two kinds of measurement units?
1) absolute, like pixels, where the size is always no matter the device being used to look at the content 2) relative like vh/vw, %, em, rem, that adjusts its size according to the device being used to look at the conten
which property and which value can we use to avoid padding and border increasing our overall dimension? Why does this work?
1) box-sizing: border-box; the property, box-sizing, by default has the value content-box, which is why padding and border automatically increase the dimensions. 2) the extra space needed by the border and padding is taken out of the content box.
Describe to which thing the 3 following categories of relative measurement units are dependent on for size 1) % 2) vh/vw 3) em/rem
1) size of the container 2) size of the height or width of the viewport 3) size of the font
Explain the following overflow: hidden; overflow: scroll; overflow: auto;
1) the overflowing content is hidden, i.e. anything outside of the box's border is tucked in. 2) a scroll bar is given so that the user can read or see what ever has been tucked away 3) this provide the user with the scroll bar PROVIDED THAT there is content overflowing from its box. Option #3 is the best because having a scroll bar by default (#2) is ugly. Only have a scroll bar if it is needed
explain the font size of each child given that .parent {font-size: 15px;} .child {font-size: 2em;} <div class="parent"> Hi I am 15px <div class="child"> Hi I am 2em <div class="child"> HI I am 2 em </div> </div> </div>
15px -> (15x2) = 30px -> (30x2) = 60px the last nested div will have a font size of 60px because its parent element has 30px
make a media query that changes the background color to light green if the viewport has a width equal to or higher than 480px
@media screen and (min-width: 480px) { body {background-color: lightgreen;} }
What is overflow?
When the content out grows the content box. Example: you have a 100 x 100 box and you try to fit a paragraph of text in there. By default, the text will go outside of the box.
What is the box model?
Whenever the browser renders an element, it places it inside an invisible box
how do you give a single element multiple classes?
add the classes within its opening tag and separate them with a space <div class="box box-one"></div> the above div belongs to two classes: box and box-one
the universal selector shouldn't be used often but when it comes to...
box-sizing: border-box, it is very common * { box-sizing: border-box } now all elements have this property EXCEPT pseudo elements (::before, ::after). if you DO want to make it apply to them use *, ::before, ::after { box-sizing: border-box; }
which value for property allows an element to be affected by the other positioning properties: top, bottom, left, right? a) sticky b) static c) relative d) fixed
c) position: relative; Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
what is the most common usage for the grid layout?
creating a photo gallery
how do you place items within a column using flex?
display: flex; flex-direction: column;
how would arrange nav items to the top right corner of a container instead of its default top left?
display: flex; flex-direction: row-reverse;
what are the three things you need to make a grid layout?
display: grid; grid-template-rows: x; grid-template-columns: y; use these in the parent container
which value does the property "display" have for div and span by default?
div { display: block; } span { display: inline; }
what is the default value of flex-direction?
flex-direction: row; this is why when you type display: flex; the items are placed in a row
which layout is better, flexbox or float?
flexbox
what kind of layout would you use to design nav bars?
flexbox in the main container of the nav items, type display: flex; this will automatically place them in a row
what is the difference between flexbox and grid?
flexbox arranges elements in either a row or column grid does both
what does the CSS property "clear:" do?
if there is an element with the float property enabled it ignores it and appears below .img { float: left; } .text { clear: left } normally, .text would appear to the right of .img but since .text has the clear property set to the value left, it appears below it
describe an element with position: fixed;
is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
how do padding and border affect the size of a visible box?
it increases its visible size
what does this do display: inline-block;
it makes a hybrid. like block elements, you can give it a width and height like inline elements, you can place them horizontally instead of vertically, i.e. not on top but on the side of each other
what does justify-content do?
it moves items in a container in a specific way
What is the difference between the margin and padding property?
margin is the space an element has OUTSIDE its box, i.e. the space between the boxes of other elements padding is the space an element has INSIDE its box, i.e. the space between the content and its border. mnemonic tech: m comes before p therefore m is outside the box and p is inside the box.
which property collapses into itself? margin or padding?
margin. if two elements have a property of 20px for margin, they will only be separated by 20 pixels since the margins collapse padding, on the other hand, does not. therefore, if two elements have 20px as their padding, they will be separated by 40 pixels.
what is the correct way to use margin and padding?
margin: to separate elements padding: to add space between the border and the content stick to these functions, if not you will write bad code
do parent containers "see" floated elements?
no, if something is floated, the parent container does not consider it as a child. therefore, the border of the parent will not arrange itself to fit a floated element to solve this issue, look up .clearfix
by default, do inline elements respect the height and width properties?
no, only block elements respect them by default
which property is used in CSS to control overflow? what is its default value?
overflow: visible; this means that if there is text that goes outside of the box, it will show the text going outside of the box.
if you dont want a little space in between span elements with the display: inline-block declaration, you need to
place the span elements in the HTML doc right next to each other instead of on top of each other <span class="box">Yo</span><span class="box>Ho</span> My codepen has this stuff, https://codepen.io/Loopside45/pen/abwMxqr
what is the default value of the property "position: x;"
position: static; this means that the element is unaffected by the properties "left, right, top, bottom" which would move them. the element is never moved from the natural flow of elements
describe an element with position: absolute;
the element is taken out of the normal flow of elements. other elements act like it isn't there anymore.
What is the flexbox layout?
the method to layout elements in one direction (either by the x or y axis)
describe a child element within a parent element that .parent { position: relative} .child { position: absolute; }
the parent no longer considers the child to be inside of it. whatever other elements that are within the parent take the place of the child since it is no longer part of the normal flow of elements this is the best way to control where a child is placed within its parent container.
what is the difference between em and rem?
the size of em depends on the size of its parent element, e.g. if the parent font-size is 16px and the child has 2em, the child will have 32px font size the size of rem depends on the size of the root element (which is 16px by default). e.g. if an element has 2rem for font size, it will always have 32px font size in the end, rem is better given that it is more predictable
with which HTML element is grid comparable to concerning laying out the elements of a web page?
the table element, with which people would originally structure their web pages layout
what are media queries used for?
to set how a web page should look like according to: width and height of the viewport width and height of the device orientation (is the tablet/phone in landscape or portrait mode?) resolution
what is the 2nd most common usage for the grid layout?
to structure the overall placement of elements within a webpage
explain the dimensions of this div .box { height: 100px; width: 100px; border: 10px solid black; padding: 20px; background: gold; }
w/o border and padding, 100 x 100 w/ 160 x 160 why? padding, add 20 px to each side; border, add 10 to each side; combine the new sides 100 + 2(20+10) = 160px multiply by two b/c top + bottom & left + right