CSS3 - Box Model
About this set
Created by:
klp1958 Teacher on June 10, 2012
Subjects:
Description:
The box model of CSS controls the spacing between elements and helps display borders and backgrounds
Log in to favorite or report as inappropriate.
Order by
31 terms
Terms | Definitions |
|---|---|
 Height of a box: | top margin + top border + top padding + height + bottom padding + bottom border + bottom margin |
| Width of a box: | left margin + left border + left padding + width + right padding + right border + right margin |
| The default width of an element | As wide as the block that contains it |
| padding | The 'internal' space between content area & border |
| margin | The 'external' space or 'force field' between an element & it's containing element |
| Box Model Memory Aid | TRBL ('trouble' = top, right, bottom, left) |
| Six properties for setting heights & widths | width, height, min-width, max-width, min-height, max-height |
| What does this do? margin: 20px; | All four sides, external margin of 20 pixels |
| What does this do? margin: 10px 20px; | Top & bottom margins: 10px; right & left: 20px |
| What does this do? margin: 5px 15px 25px; | top = 5px, right & left = 15px, bottom = 25px |
| What does this do? margin: 5px 10px 15px 20px; | TRBL = 5, 10, 15, 20 respectively |
| What does this do? padding: 2px, 4px, 6px, 8px; | Nothing! the values are not comma separated (delimited) |
| If a bottom margin encounters an adjacent top margin, they are _____ and the _____ is applied | collapsed... larger margin (note: if this behavior is undesirable, set margins to zero & use padding instead) |
| The ______ keyword is typically used for centering an element in it's containing (parent) block, but to do that, you must also specify the _____ of the element | auto ... width |
| Because different _____ have different default margins for block elements, you often need to ____ ___ those values using the ______ selector and set the margins _________ | browsers...zero out....* (wildcard) .... explicitly |
| Zeroing out the default browser styles using the wildcard selector (*) is often call using the _____ selector | reset |
| Shorthand border syntax: | border: [width] [style] [color]; |
| What does it do? border-style: solid none; | Border with color of the text of the element: top & bottom = solid; no border left & right |
| Two new box model properties in CSS3 | border-radius and box-shadow |
| box-shadow syntax: | box-shadow: horzOffset vertOffset blurRadius spread color; (not comma separated) |
| Backwards compatibility for Firefox & rounded corners & shadows | -moz-border-radius & -moz-box-shadow |
| Backwards compatibility for Chrome & Safari & shadows | -webkit-box-shadow |
| Keyword with 'background' that specifies whether an image scrolls with the document or remains in a fixed position | attachment (with values of 'scroll' or 'fixed') |
| Keyword with 'background' that specifies the initial horizontal and vertical positions of an image | position (with values: left, center, right, top, center, bottom) |
| Shorthand for background property: | background: [color] [image] [repeat] [attachment] [position]; |
| Keyword with 'background' that specifies if and how an image repeats | repeat (values: repeat, repeat-x, repeat-y, no-repeat) |
| Linear gradient syntax: | background-image: linear-gradient(direction, color %, color %, ...); |
| Prefix for linear gradient commands in Opera | -o- |
| Prefix for linear gradient commands in Firefox | -moz- |
| Prefix for linear gradient commands in Safari & Chrome | -webkit- |
| border shorthand syntax | border: [width] [style] [color]; |
First Time Here?
Welcome to Quizlet, a fun, free place to study. Try these flashcards, find others to study, or make your own.