IES: CSS-deck 18

Question 1

Default browser behaviors- CSS box model:

Answer 1

• browsers apply own default values to CSS box model according to their “user agent style sheet”
• Browser applies specified padding/borders/etc outside specified element size (i.e. element becomes larger than specified)

Question 2

outline:

Answer 2

• Property that can be applied to the user interface
• accepts same values specified to border
• Ex. outline: 2px solid RoyalBlue; (draws a solid two-pixel royal blue outline around an element)
• Unlike border, outline is not part of element dimensions (element total width/height- unaffected by outline)
• outline on a different z-axis level (may overlap other content)

Question 3

“border-box”:

Answer 3

• box-sizing value
• means element edge is the same as any border edge

Question 4

outline-offset:

Answer 4

• Property that can be applied to the user interface
• specifies space between outline and the element edge (or border edge)
• Specify a distance value to this property
• Ex. outline-offset: 5px;

Question 5

resize:

Answer 5

• property that can be applied to the user interface
• allows the user to resize an element horizontally, vertically, or both
• This is typically performed by dragging the bottom-right corner of the element figure
• Should always be accompanied by the overflow style rule (handles content overflow if user reduces the element dimensions enough)

Question 6

“both”:

Answer 6

• a resize value/keyword
• Allows user to resize element horizontally and vertically

Question 7

“horizontal”:

Answer 7

• a resize value/keyword
• when specified, user is restricted to resizing only the width

Question 8

“vertical”:

Answer 8

• a resize value/keyword
• when specified, user is restricted to resizing only the height

Question 9

column-count:

Answer 9

• requires an integer value be specified
• determines the column number- text divisions desired
• Typically creates a gap between columns: 1em wide by default

Question 10

column-gap:

Answer 10

• CSS property-goes in tandem with column-count
• chooses inter-column gap (“gutter”) size by specifying a distance
• Ex. column-gap: 50px;

Question 11

column-rule:

Answer 11

• With a wider “gutter”, then adds a vertical ruled line
• Accepts same values as border: width, style, color values
• column-rule is shorthand for column-rule-width, column-rule-style, column-rule-color
• specifying style is required; all other initial values will assume default value
• Ex. column-rule: 5px dotted RoyalBlue (adds vertical 5px-wide dotted RoyalBlue line(s) between the columns- line number based on column number)

Question 12

column-span:

Answer 12

• use where you prefer elements to span across columns (Ex. headings)
• specify columns to span as integer value or “all”

Question 13

column-width:

Answer 13

• specifies a width size to the column(s)
• Browser treats this as a minimum width suggestion
• If two columns at specified width will not fit, will revert to a single-column

Question 14

columns:

Answer 14

• shorthand: specifies column-width & column-count values
• Using columns and column-rule shorthand, can specify large numbers of columns concisely

Question 15

“flex”:

Answer 15

• display value
• defines element as a “flex container”
• creates flexible layout- responds to various browser screen sizes
• elements within the flex container will appear on a single row by default (can be specified otherwise)
• All modern browsers support “flexbox”/display: flex;/”flex container” since:
  1. Chrome 29.0
  2. Edge 11.0
  3. Firefox 22.0.
  4. Safari 10
  5. Opera 48

Question 16

flex-wrap:

Answer 16

• Specifies the treatment of elements within a Flex Container
• flex-wrap values:
  1. “wrap” specifies if the length of the row of elements within a flex container the width of the browser, it will wrap onto the next row
  2. “wrap-reverse” specifies that the order of items in a row within a flex container will be reversed
  3. “nowrap” (default) specifies a flex item set too wide for its flex container will overflow it

Question 17

wrap:

Answer 17

• TextBox control property
• Specifies text displayed in a multi-line TextBox control will automatically wrap when the text reaches the end of the control

Question 18

justify-content:

Answer 18

• specifies how the items within a flex container align along their lines
• justify-content values:
  1. “flex-start”(default) items aligned at container beginning
  2. “flex-end” items aligned at container end
  3. “center” aligns items around center of line(container?)
  4. “space-between” items will have space between them
  5. “space-around” items given space between & half space before & after
  6. “space-evenly” items given equal space around each item
• (can be used for alignment in grids: same as the flexbox)

Question 19

align-items:

Answer 19

• specifies how flex items align vertically within their lines
• align-items values:
  1. “center” items aligned at container center
  2. “flex-start” items aligned at container beginning
  3. “flex-end” items aligned a container end
• (can be used for alignment in grids: same as the flexbox)

Question 20

align-content:

Answer 20

• specifies how the lines align within the flex container
• align-content values:
  1. “center” lines packed toward flex container center
  2. “flex-start” lines packed toward flex container start
  3. “flex-end” lines packed toward flex container end
• (can be used for alignment in grids: same as the flexbox)