Please enable JavaScript.

Coggle requires JavaScript to display documents.

CSS: Boxes - Coggle Diagram

- - - - linear-gradient
      - radial-gradient
      - Produces <gradient> types that are special <image> types
      - Can be mixed with other background images
  - - - cover
        
        Image may be clipped
      - contain
        
        Some space may be left
  - - - top, right etc.
    - - Distance from each of two sides
    - - background-position-x
      - background-position-y
    - - Takes a pair of values in the form x y
  - - - Values in the same position correspond to each other
      - Values cycle if number of values for a property is less than the number of backgrounds
  - - - :warning: IE9+
- - - - Per side or per side and component
        
        border-top etc.
        
        border-top-width etc.
      - Per component
        
        border-width
        
        border-style
        
        border-color
        
        Defaults to color
  - - - <length> or <percentage> typed
      - Horizontal radius and vertical radius or both
- - - - Directionality of content
        
        For creative purposes
        
        Due to content language
      - writing-mode property
        
        horizontal-tb
        
        Inline dimension is horizontal
        
        vertical-lr
        
        Inline dimension is vertical
        
        vertical-rl
        
        Inline dimension is vertical
        
        Direction in which elements are laid
      - Element directions are tied to the writing mode and not the physical screen
    - - Mapped properties that replace physical properties
      - inline-size and block-size
        
        Maps to width and height
      - block-start and block-end
        
        Maps to vertical properties
      - inline-start and inline-end
        
        Maps to horizontal properties
      - :warning: Limited browser support
    - - block-start for top etc.
      - :warning: Limited browser support
      - Can be used as values for properties such as float
  - - - visible
        
        Default
      - hidden
        
        Clips content
      - scroll
        
        Scrollbars would be always visible
      - Takes one or two values
        
        overflow-x
        
        overflow-y
      - auto
        
        Scrollbars would be visible if overflown
      - scroll and auto create a Block Formatting Context
        
        Layout inside of the box is self-contained
        
        No interaction between content inside and outside the box
  - - - Block elements
        
        Spans the width of the container
        
        Height is naturally defined by contents
      - Natural size of HTML element
    - - width and height
        
        Percentage values resolve against container values
      - margin and padding
        
        Percentage values resolve against inline size
    - - Useful for setting sizes to be at least or at most a certain value
    - - Viewport is the visible area of the page in the browser
      - vw and vh
        
        1% of viewport width or height
        
        Can be used to size both boxes and text
- - - - Intrinsic size is determined by the file
      - Would scale down or overflow extrinsically sized containers
      - object-fit
        
        Can be used to size element inside container
    - - Flex and grid
        
        Images will not stretch to fill the container but would be aligned to the start of the layout
  - - - fixed
        
        Size columns based on headings
        
        Targeting individual column headers
        
        th:nth-child(n)
        
        Percentage widths
    - - collapse
        
        Collapse adjoining borders
    - - Cells in thead are centre-aligned by default
      - Cells in tbody are left-aligned by default
    - - tr:nth-child() with parameters
        
        odd or 2n-1
        
        even or 2n
    - - Caption positioning
- - - - block
        
        Extends in the inline direction to fill available space
        
        Breaks onto new lines
        
        Box properties push other elements away
        
        width and height properties are respected
      - inline
        
        width and height properties do not apply
        
        Vertical box properties have no effect on other inline boxes
        
        Doesn't break onto new lines
        
        Horizontal box properties push other inline elements away
      - inline-block
        
        Can be explicitly sized
        
        width and height properties are respected
        
        Wraps to content if width and height are not set
        
        Box properties are applied and affect other boxes
        
        Doesn't break onto new lines
        
        Whitespace between inline-block elements in HTML are preserved
    - - Defaults to normal flow
        
        Block and inline children
      - flex
      - grid
  - - - Alternative box model
        
        box-sizing: border-box
        
        Box size includes everything up to the border box
        
        Can be set globally by setting on the html element and inheriting
      - Standard box model
        
        box-sizing: content-box
        
        Box size only includes the size of the content box
      - Set by the box-sizing property
      - Margin size is not counted towards the box size
    - - Content box
        
        Sized using properties like width and height
      - Padding box
        
        No negative margins
        
        Backgrounds are displayed behind the padding
      - Margin box
        
        Can have negative margins that overlap containing elements
        
        Margin collapsing
        
        Only the larger of two adjacent (positive) margins are applied
        
        A single negative margin is subtracted from the total margin size
        
        Only the larger (absolute value) of negative margin pairs are applied
        
        Sits around the actual box
      - Border box
    - - Vertical properties are applied but don't influence other elements
      - width and height aren't respected