Web Applications Tutorial 3

  1. To display an element as a block-level use:




    C. display: block;
  2. What are three types of layouts?




    C. fixed fluid, elastic
  3. Provide a style rule to set the maximum width of an element to 960 pixels.




    B. max-width: 960px;
  4. Provide a style rule to horizontally center a block element within its container with a top/bottom margin of 20 pixels.




    C. margin: 20px auto;
  5. Provide a style rule to place an object on the right margin of its container.




    B. float: right;
  6. Provide a style rule to display an object only when all floating elements have cleared.




    B. clear: both;
  7. Your layout has four floated elements in a row but unfortunately the last element has wrapped to a new line. What is the source of the layout mistake?




    C. The widths of the floated elements exceed the available width of their container.
  8. Provide a style rule to change the width property for the header element so that it measures the total width of the header content, padding, and border spaces.




    B. box-sizing: border-box;
  9. What causes container collapse?




    A. All child elements are floating so that they are free of the container, leaving the container with no content.
  10. To change an element into a grid container, apply the style:




    C. display: grid;
  11. A fractional unit (fr) is:




    A. used to create elements that expand or contract to fill available space
  12. To explicitly define the columns within a grid, use the CSS property:




    A. grid-template-columns
  13. To implicitly define the height of grid rows, use:




    C. grid-auto-rows
  14. To position a grid item in the second row and cover the second and third column, apply the style(s);

    A. grid-row: 2;
        
        grid-column: 2/3;
    B. grid-row: 2;

        grid-column: 2/4;
    C. row: 2;

        column: 2/3;
    D. grid-row: 2;

        column-span: 2/2;
    B. grid-row: 2;

        grid-column: 2/4;
  15. To define a grid layout with areas; use the property:




    C. grid-template-areas
  16. To place an element in the grid area named "intro", apply the style:




    A. grid-area: intro;
  17. To set the space between grid columns to 15 pixels and the space between grid rows to 10 pixels, apply the style:




    C. grid-gap: 10px 15px;
  18. To horizontally center the content of a grid cell; apply the style:




    C. justify-self: center;
  19. To shift an object from its default placement in the document flow but keep it within the document flow, use:




    A. relative positioning
  20. Provide a style to shift rule to shift an article element 15 pixels to the left of its default position in the document flow.

    A. article {
        
        position: absolute;

        left: 15px;

        }

    B. article {

        position: relative;

        left: 15px;

        }

    C. article {
     
        position: absolute;

        left: -15px;

        }

    D. article {

        position: relative;

        left: -15px;

        }
    D. article {

        position: relative;

        left: -15px;

        }
  21. Provide a style to place an article element 13 pixels up from the top edge of its container element.

    A. article {
       
        position: absolute;

        top: 15 px;

        }

    B. article {

        position: relative;

        top: 15px;

        }

    C. article {

        position: absolute;

        top: -15px;

        }

    D. article {

        position: relative;

        top: -15px;

        }
    C. article {

        position: absolute;

        top: -15px;

        }
  22. To place an object using absolute positioning within its container, the container:




    A. must have absolute or relative positioning
  23. Provide a style property to display scrollbars when the element content exceeds the element's boundaries.




    B. overflow: auto;
  24. An inline image is 400 pixels wide by 300 pixels high. Provide a style rule to clip this image by 10 pixels on each edge.




    D. clip: rect(10, 390, 290, 10);
  25. If two elements overlap, the one displayed on top will:




    A. have the higher z-index value
Author
jdavis123
ID
359515
Card Set
Web Applications Tutorial 3
Description
Updated