Week 4 Part 2

Question 1

Default behaviour is not to overlap

Answer 1

Block element

Question 2

Will not overlap within the block they are contained in

Answer 2

Default is that inline elements will not overlap within the block they are contained in

Question 3

T/F - Block and inline elements usually have their own height, independent of their content

Answer 3

False.

By default block and inline elements have the height of their content.

Question 4

T/F - Inline elements have the width of their content

Answer 4

True

Question 5

T/F - Block elements have a width that spans the width of their parent

Answer 5

True

Question 6

This property was created to allow authors to specify how elements should behave in layouts

Answer 6

The display property

Question 7

Default Layour

Answer 7

Display:Inline

Question 8

display: block;

Answer 8

Displays element as block element (like <p>)

Question 9

display: none;

Answer 9

Element will not be displayed (no effect on layout)

Question 10

This makes elements appear in a chosen area in a sea of text

Answer 10

float. float left = element on left , text on right

Question 11

After float is used, this is used to prevent subsequent elements from floating on the left / right

Answer 11

clear: left / right/ both / none

Question 12

What does clear:none do?

Answer 12

Lets elements float on either side

Question 13

Position properties: default, appear in document, linear flow

Answer 13

position: static

Question 14

Position properties: positioned relative to its normal position

Answer 14

position: relative

Question 15

Position properties: relative to a browser window

Answer 15

position: fixed

Question 16

The CSS Flexbox is a simpler layout system, is the CSS Flexbox Layout typically used for the whole page?

Answer 16

No, it’s typically used for parts of a web page

Question 17

Defines an element as a flexbox container

Answer 17

display:flex

Question 18

This property defines the direction of the main axis of a flexbox

Answer 18

flex-direction - row, row-reverse, column, column-reverse

Question 19

This property determines whether and how flex items wrap when the main axis is full

Answer 19

flex-wrap - nowrap (forces single line, may cause overflow),
wrap, wrap-reverse

Question 20

Property defines how the browser distributes space between/around content items along the main axis of a flex container

Answer 20

justify-content - right, center, left

Question 21

What do these do?
flex-basis: 200px/auto
flex-grow: 2
flex-shrink:

Answer 21

flex-basis: determines initial size of the flex item (any unit). “auto” means that the size is determined by the height and weight

flex-grow: Defines the growth factor of an element relative to the other items
flex-shrink: defines how much an item will shrink when not enough space in the container

Question 22

Flexbox vs grid: What’s the main difference?

Answer 22

Flex is one dimensional, grid is two dimensional

Question 23

The grid layout has 2 elements, what are they?

Answer 23

The grid container and grid items

Question 24

This is a block-level element that acts as a parent to the elements inside of it. You can configure a set # of rows/columns

Answer 24

Grid container

Question 25

Elements that reside within the grid container. Either the programmer or the browser will assign these to specific parts of the grid

Answer 25

Grid items

Question 26

T/F - Height and width of grid columns and rows will in general be the same

Answer 26

False. Height and width of grid columns and rows will in general vary

Question 27

• Free front end framework for faster and easier web development.
• Includes HTML, CSS design templates for typography, forms, buttons, tables, etc.
• Gives the ability to create responsive designs

Answer 27

Bootstrap

Question 28

This term refers to websites that are designed to gracefully adapt to screen size.

Answer 28

Responsive Web Design

Question 29

Fluid grid with the layout defined proportionally rather than with fixed dimensions
Flexible images and video that scale to fit within the grid
What am I describing?

Answer 29

Responsive Web Design

Question 30

Comments, consistent naming conventions, meaningful class/ID, consistent formatting, group like style, split up files

What does this describe?

Answer 30

Great ways to organize CSS

Question 31

By default, do block and inline elements have the width of their content?

Answer 31

Only inline elements, block elements have the width of the page