H153 - Practice Quiz Week 6

  1. How are width and height interpreted in CSS-compliant browsers? Briefly describe how these two properties relate to other element box properties in the layout of a block-level element.

    Width and height of the content area. Padding, borders and margins are added to this area.

  2. What do the "offset properties" define in the context of absolute (and fixed) positioning?

    How far the element is offset from the analgous side of the containing block.

  3. Consider the following:

    div#contain {position: relative; width: 300px; height: 300px;}
    div#contain img {position: absolute; height: 50px; width: 80px;}

    Assume that there is only one image in the "container" div. Without changing the provided styles, center the image within its containing block using only offset properties. Then create a different answer where all of the offset properties are set to 0, but the image is still centered within its containing block. (Semi-hint: text-align is a part of neither answer.)

    div#contain img {position: absolute; height: 50px; width: 80px; top: 125; bottom: 125; right: 110; left: 110;}

    div#contain img {position: absolute; height: 50px; width: 80px; top: 0; bottom: 0; right: 0; left: 0; margin-top: 125px; margin-left: 110px;}

  4. Consider the following:

    div#contain {position: relative; width: 300px; height: 300px;}
    div#contain p {position: absolute; width: 10em; height: auto;}

    Assume that there is only one p element in the "container" div. Without changing the provided styles, place the p element so that it is horizontally centered within the containing block. Then create a different answer where the p element is just outside the containing block on the right side, where the right edge of the containing block just touches the left edge of the positioned paragraph.

    div#contain p {position: absolute; width: 10em; height: auto; left: 145;}

    div#contain p {position: absolute; width: 10em; height: auto; margin: 0 auto;}

    div#contain p {position: absolute; width: 10em; height: auto; left: 300;}

    div#contain p {position: absolute; width; 10em; height: auto; left: 100%;}

  5. Consider the previous question. Is it possible to vertically center the p element inside its containing block without changing any of the given declarations?

    No, because we don't know how tall the p element is.

Jennifer Griner