The Box Model, Block and Inline, Flexbox

Question 1

What is the difference between padding, margin, and border?

Answer 1

Padding: the space between the content and the borde

Margin: the space between a box and others that sit next to it

Border: the space between the margin and the padding.

Question 2

True or False: If two boxes are next to each other and they both have the margins that are 60px, they stack.

Answer 2

False! They do not stack, instead the margins just combine which in this case will result in 60px between the two boxes. Margin’s collapse!

Question 3

What is the difference between Block and Inline elements? What are some examples of those elements?

Answer 3

Block elements display as a block and stack on top of each other and start on a new line on a page. Example: <h1> <p> <div>

Inline elements do not display as a block or start on a new line. Instead, they take space inside of a block element. <em> <a> <span></span></a></em>

Question 4

What are the two empty HTML elements that do not have any particular meaning to them and are generic boxes that can contain anything? One is a block element and one is an inline element.

Answer 4

<div> and <span>, block and inline in that order.
</span></div>

Question 5

What is Normal Flow?

Answer 5

How elements on a web page lay out by default without CSS to change the way they behave.

Question 6

(Flexbox) What is Flexbox and what is it used for?

Answer 6

Flexbox is a tool used to format and layout a web page into rows or columns using flex containers and flex items. These items will flex, grow shrink, based on rules you can define.

Question 7

(Flexbox) What is a flex container and a flex item? What is their relationship?

Answer 7

A flex container is a box that holds flex items (that are also boxes cuz HTML). Flex items can also be flex containers that can hold flex items!

Question 8

(Flexbox) What is the flex declaration and what are the three properties it is a shorthand for?

Answer 8

The flex declaration is a short hand for 3 properties you can set on a flex item: flex-grow, flex-shrink, flex-basis. The flex declaration determines how a flex item flexes or stretches inside a flex container. It usually only contains one value as a shorthand and the declaration is placed into the styling of the container or an individual item.

Question 9

(Flexbox) What does flex-grow do?

Answer 9

The first part of the flex shorthand that determines how flex items grow in a flex container.

Question 10

(Flexbox) What does flex-shrink do?

Answer 10

The second part of the flex shorthand that determines how flex items shrink in a flex container.

Question 11

(Flexbox) What does flex-basis do?

Answer 11

The third part of the flex shorthand that determines the initial size of a flex item. Any sort of growing or shrinking will start from that baseline size.

Question 12

(Flexbox) What are the two axes of a flex container?

Answer 12

The main axis (aka the primary axis) that follows the flex direction: row (left to right) or column (top to bottom).

The cross axis is perpendicular to the main axis where the children will be stretched out to fill the entire container along this axis. Opposite directions of the main axis.

Question 13

(Flexbox) What does justify-content property do?

Answer 13

Aligns flex items based on the main axis.

Question 14

(Flexbox) What does align-items property do?

Answer 14

Align flex items based on the cross axis.

Question 15

(Flexbox) What does the gap property do?

Answer 15

Adds a specified space between flex items. Similar to margin!