Css Box Model

Front 1

For display purposes, every element in a document is considered to be a rectangular box which has a content area surrounded by _______, a ______ and _______.

Back 1

padding, border, margins

Front 2

The heading, paragraph, list, and table tags are all considered to be _____ _____ elements.

Back 2

block level

Front 3

The hyperlink, , span, and image tags are all considered to be ______ tags.

Back 3

inline

Front 4

______ boxes are wrapped as needed, moving down to a new line when the available width is exceeded.

Back 4

Inline

Front 5

_____ _____ boxes act as a containing block for any elements within them.

Back 5

Block level

Front 6

If two boxes are placed within another block level box, they are placed one below the other. How are they spaced apart in relation to the margin and border?

a) The distance between the two borders will be the size of whichever margin is the largest.

b) The margins combine to create a height that is the size of both added together.

c) The margins default to zero so that the borders of both are touching.

Back 6

a) The distance between their two borders will be the size of whichever margin is the largest.

Front 7

Margin and padding have a shorthand property (shown here) for easier coding. What sizes are these four margins?

margin: 50px 20px 30px 40px;

Back 7

50 pixels on the top
20 pixels on the right,
30 pixels on the bottom
40 pixels on the left

Hint 7

It is kind of like reading a clock.

Front 8

If the margin and shorthand property is used with only two values, which values do they specify?

Back 8

The first sets values for the top and bottom, and the second sets the values for the sides.

Front 9

If the margin and shorthand property is used with only three values, which values do they specify?

Back 9

The first sets values for the top, the second sets values for the sides, and the third sets values for the bottom.

Front 10

True or False. Netscape Navigator always scrolls the background, and ignores the background-attachment property.

Back 10

True

Front 11

The background-attachment property accepts two values. These control weather or not the background image scrolls. What are the two values?

Back 11

scroll and fixed

Front 12

The background-repeat property controls whether the background image is tiled to fill the background of the element. If the value is repeat, then the image is tiled. If it is repeat-x, then it is tiled only ____________.

Back 12

horizontally

Front 13

The background-repeat property controls whether the background image is tiled to fill the background of the element. If the value is repeat, then the image is tiled. If the value is repeat-y, then it is tiled only __________.

Back 13

vertically

Front 14

The background-repeat property controls whether the background image is tiled to fill the background of the element. If the value is __-______, then it is not repeated at all.

Back 14

no-repeat

Front 15

Netscape Navigator ignores the background-________ property, which sets the offset that the initial background image has from the edge of the padding area of the element.

Back 15

position

Front 16

Internet Explorer 5 and 5.5 for Windows misinterprets the box model by putting the border and padding inside the specified width instead of adding them on. If the code without the hack looks like this:

div {
border:20px solid;
padding:30px;
width:300px;
}

What hack would correct this bug?

Back 16

width:400px;
voice-family: "\"}\"";
voice-family:inherit;

Hint 16

It uses the voice-family property to fix it, and the hack would be added between the padding and the width properties.

Front 17

What hack is used to allow browsers that support CSS2 selectors, but have the same parsing bug as the IE 5 & 5.5 box model bug, to work properly? Assume that this is the code being used:

div.content {
border:20px solid;
padding:30px;
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}

Back 17

html>body .content {
width:300px;
}