CSS Layout

When you use class selector

What should present infront of classname

• #

• &

• @

• .

Which model includes margin, border, padding, and content?

• CSS Box model

• CSS3 Flexbox Box model

• CSS3 Grid Layout model

• CSS Grid Template Layout Module

Which model defines structures similar to tables using 2 dimensions?

• CSS Box model

• CSS3 Flexbox Box model

• CSS3 Grid Layout model

• CSS float

You are creating a grid layout. What does 1fr mean in the following code?

grid-template-columns: 150px 150px 1fr 1fr;

• The first two columns will be two fraction units of the stated width.

• The third and fourth columns is 1 fraction unit of the remaining space in the grid.

• The second column will be double the stated width.

• The second column will be half of the remaining space in the grid.

How many columns and rows are defined in the following code?

section {

display: grid;

grid-template-columns: 100px 1fr 1fr 250px;

grid-rows: 50px 1fr 1fr ;

}

section header {

grid-column: 1 / 4;

grid-row: 1;

}

section nav {

grid-column: 1;

grid-row: 2 / 3;

}

section article {

grid-column: 2;

grid-row: 2;

}

section aside {

grid-column: 3;

grid-row: 2;

}

section footer {

grid-column: 1 / 4;

grid-row: 3;

}

• 1 rows and 2 columns

• 2 rows and 3 columns

• 3 rows and 2 columns

• 3 rows and 4 columns

How to define the properties for the wrapper element to position the box like in the picture?

• padding-left: value; padding-top: value;

• padding-right: value; padding-top: value;

• margin-left: value; margin-top: value;

• margin-right: value; padding-top: value;

How to define the property for the box element with shorthand?

• margin: 0 value value 0;

• margin: value value 0 0;

• margin: 0 value 0 value;

• margin: value 0 0 value;

How to position the box element correctly? Condition: .wrapper { position: relative }

• position: absolute; left: value; top: value;

• position: inherit; left: value; top: value;

• left: value; top: value;

• position: static; left: value; top: value;

How to float the boxes like in the picture?

• .box1 { float: right } .box2 { float: left }

• .box1, .box2 { float: right }

• .box1 { float: right } .box2 { float: inherit }

• .box1 { float: none } .box2 { float: right }

How many columns does an area with ‘grid-column: 1 / span 4’ ?

• 1

• 2

• 3

• 4