Layout

Question 1

What are the three properties to determine a layout?

Answer 1

Float, display, position

Question 2

What type of elements (2) are ALL HTML elements?

Answer 2

They are either block or inline block elements

Block:

1) 100% width of container
2) Elements are stacked

Inline:

1) Same width as its content
2) Elements are side by side instead of stacked

Question 3

What is the power of the display property?

Answer 3

Use the value of inline or block in display to change the default display behavior of an element

Question 4

What does float do?

Answer 4

It aligns the element to iit’s container by left or right. This will change the natural pageflow and stacking layout

Question 5

What is position used for?

Answer 5

Can be used to position elements on the page

Three values: Relative, Absolute, Fixed

Note: MUST be used with one offset property: top, right, bottom, or left

Question 6

Give an example of using relative position

Answer 6

It is used to position the element from it’s current position.

.box{

position: relatve;
left: 20px;
top: 10px;

}

Question 7

Give an example of using absolute position

Answer 7

The parent element must first be set to position relative. The element will be taken out of the natural page flow. So if you had three stacked boxes and made box two absolute, box three would take it’s original place under box 1.

.parent {

position: relative;

}

.box2{

position: absolute;
right: 20px;
bottom: 20px;

}

Question 8

Give an example of fixed position

Answer 8

Element doesn’t adhere to it’s parent and instead stays fixed to the viewport even when you scroll the page.

.parent {

position: relative;

}

.box2 {

position: fixed;
right: 20px;
bottom: 20px;

}

Question 9

Give an example of sticky

Answer 9

It’s remain in position until a certain condition is adhered, then it’ll act as fixed

.sticky {

position: sticky;

top 10px; /* element becomes fixed once its position from the top is 10px or more */