Quiz #3

• CSS box model
  • Calculating sizes of content, padding, border, and margin edges
  • One-, two-, and four-argument versions of properties like padding.
  • Collapsing margins.
• CSS positioning
  • relative, absolute, fixed positioning
  • left, right floating
  • clearing floats
• CSS layouts
  • layout types: fixed-width, liquid, elastic, elastic-liquid
  • describe how to two a two-column layout by floating columns
• Images
  • src, alt, height, width
  • Image types: GIF, PNG, JPEG. When and why.

Example Question

Here's the box-model question from last year's quiz:

Consider this XHTML and CSS:

<p id="motto">Never let them see you sweat.</p>

p#motto {
  margin: 10px;
  border-width: 1px 2px;
  padding: 3px 4px 5px 6px;
  width: 20px;
  background-color: #FF00AA;
  color: rgb(10, 128, 255);   /* sets the text color */
}

• What is the total width of the paragraph element in the browser? (Show your work for partial credit.)
• In the diagram below, label the border area, the content area, the margin area, and the padding area.
• In the diagram below, indicate the length of each of the thirteen dotted lines (none drawn to scale).