画布 1
CSS
  属性
    定位(Positioning)
      position
        static
          默认
        relative
        absolute
        fixed
        sticky
      z-index
        auto
          默认
        <integer>
      top
      right
      bottom
      left
      适用于定位元素，用来指定元素偏移量
    布局(Layout)
      display
        none
        inline
          默认
        block
        list-item
        inline-block
        table
        inline-table
        table-caption
        table-cell
        table-row
        table-row-group
        table-column
        table-column-group
        table-footer-group
        table-header-group
        run-in
        box
        inline-box
        flexbox
        inline-flexbox
        flex
        inline-flex
      float
        none
          默认
        left
        right
      clear
        none
          默认
        left
        right
        both
      visibility
        visible
          默认
        hidden
        collapse
      overflow
        visible
        hidden
        scroll
        auto
        clip
      定义了元素的浮动
    尺寸与补白(Dimension)
      width
      min-width
      max-width
      height
      min-height
      max-height
      margin
      padding
    背景与边框(Backgrounds and Borders)
      border
      border-width
      border-style
      border-color
      box-shadow
      border-radius
      border-image
      border-image-source
      border-image-slice
      border-image-width
      border-image-outset
      border-image-repeat
      background
      background-color
      background-image
      background-repeat
      background-attachment
      background-position
      background-origin
      background-clip
      background-size
    颜色(Color)
      color
      opacity
    字体(Font)
      font
      font-style
      font-variant
      font-weight
      font-size
      font-family
      font-stretch
      font-size-adjust
    文本(Text)
      text-transform
      white-space
      tab-size
      word-break
      word-wrap/overflow-wrap
      text-align
      text-align-last
      text-justify
      word-spacing
      letter-spacing
      text-indent
      vertical-align
      line-height
      text-size-adjust
    文本装饰(Text Decoration)
      text-decoration
      text-decoraton-line
      text-decoration-color
      text-decoration-style
      text-decoration-skip
      text-underline-positon
      text-shadow
    书写模式(Writing Modes)
      direction
      unicode-bidi
      writing-mode
    列表(List)
      list-style
      list-style-image
      list-style-position
      list-style-type
    表格(Table)
      table-layout
      border-collapse
      border-spacing
      caption-side
      empty-cells
    内容(Content)
      content
      content-increment
      content-reset
      quotes
    用户界面(User Interface)
      appearance
      text-overflow
      outline
      outline-width
      outline-color
      outline-style
      outline-offset
      nav-index
      nav-up
      nav-right
      nav-down
      nav-left
      cursor
      zoom
      box-sizing
      resize
      ime-mode
      user-select
      pointer-events
    多列(Multi-column)
      columns
      column-width
      column-count
      column-gap
      column-rule
      column-rule
      column-rule-width
      column-rule-style
      column-rule-color
      column-span
      column-fill
      column-break-before
      column-break-after
      column-break-inside
    伸缩盒(Flexible Box)
      flex
      flex-grow
      flex-shrink
      flex-basis
      flex-flow
      flex-direction
      flex-wrap
      align-content
      align-items
      align-self
      justify-content
      order
    变换(Transform)
      transform
      transform-origin
      transform-style
      perspective
      perspective-origin
      backface-visibility
    过渡(Transition)
      transition
      transition-property
      transition-duration
      transition-timeing-function
      transition-delay
    动画(Animation)
      animation
      animation-name
      animation-duration
      animation-timing-function
      animation-delay
      animation-iteration-count
      animation-direction
      animation-play-state
      animation-fill-mode
    打印(Printing)
      page
      page-break-before
      page-break-after
      page-break-inside
    媒体查询(Media Queries)
      width
      height
      device-width
      device-height
      orientation
      aspect-ratio
      device-aspect-ratio
      color
      color-index
      monochrome
      resolution
      scan
      grid
  选择符
    元素选择符
      通配选择符(*)
      类型选择符(E)
      ID选择符(E#id)
      类选择符(E.class)
    关系选择符
      选择符组(E,F)
      包含选择符(E F)
      子选择符(E>F)
      相邻选择符(E+F)
      兄弟选择符(E~F)
    属性选择符
      E[att]
      E[att="val"]
      E[att~="val"]
      E[att^="val"]
      E[att$="val"]
      E[att*="val"]
      E[att|="val"]
    伪类选择符
      E:link
      E:visited
      E:hover
      E:active
      E:focus
      E:lang(fr)
      E:not(s)
      E:root
      E:first-child
      E:last-child
      E:only-child
      E:nth-child(n)
      E:nth-last-child(n)
      E:first-of-type
      E:last-of-type
      E:only-of-type
      E:nth-of-type(n)
      E:nth-last-of-type(n)
      E:empty
      E:checked
      E:enabled
      E:disabled
      E:target
      @page:first
      @page:left
      @page:right
      有序
    伪对象选择符
      E:first-letter/E::first-letter
      E:first-line/E::first-line
      E:before/E::before
      E:after/E::after
      E::placeholder
      E::selection
  语法与规则
    !important
    /*comment*/
    @import
    @charset
    @media
    @font-face
    @page
    @keyframes
    @supports
  取值与单位
    长度(Length)
      <length>
      em
      ex
      ch
      rem
      vw
      vh
      vmax
      vmin
      cm
      mm
      q
      in
      pt
      pc
      px
    角度(Angle)
      <angle>
      deg
      grad
      rad
      turn
    时间(Itme)
      <time>
      s
      ms
    频率(Frequency)
      <frequency>
      Hz
      kHz
    布局(Layout-specific)
      <fraction>
      <grid>
      fr
      gr
    分辨率(Resolution)
      <resolution>
      dpi
      dpcm
      dppx
    颜色(Color)
      <color>
      Color Name
      HEX
      RGB
      RGBA
      HSL
      HSLA
      transparent
      currentColor
    文本(Textual)
      inherit
      initial
      unset
      <string>
      <url>
      <identifier>
    函数(Functional)
      calc()
      toggle()
    生成内容(Content)
      counter()
      counters()
      attr()
    图像(Image)
      <image>
      image()
      image-set()
      <gradient>
      linear-gradient()
      radial-gradient()
      repeating-linear-gradient()
      repeating-radial-gradient()
    数字(Numeric)
      <number>
      <integer>
      <percentage>
CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
适用于：除display属性定义为table-column-group | table-column之外的所有元素
对象遵循常规流。此时4个定位偏移属性不会被应用。
任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。
对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
注：相对，是指相对于元素自身在常规流中的原始位置。如果不添加额外属性，relative 表现的和 static 一样。
对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素（定位元素是指position值不是static的元素），如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
与absolute一致，但偏移定位是以窗口为参考。当页面滚动时，对象不会随着滚动。
对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。
适用于：定位元素。即定义了position为非static的元素
正值表示将元素移动到auto上方，负值将元素移动到auto下方。较大的值在较小值的上方，无论实际值多少。
适用于：定位元素。即定义了position为非static的元素
适用于：定位元素。即定义了position为非static的元素
适用于：定位元素。即定义了position为非static的元素
适用于：定位元素。即定义了position为非static的元素
auto： 无特殊定位，根据HTML定位规则在文档流中分配 。
<length>： 用长度值来定义偏移量。可以为负值。
<percentage>： 用百分比来定义偏移量。百分比参照包含块的高度。可以为负值。
如果display设置为none，float及position属性定义将不生效；
如果position既不是static也不是relative或者float不是none或者该元素是根元素，当display: inline-table时，display的计算值为table；当display: inline | inline-block | run-in | table-*系时，display的计算值为block，其它情况为指定值；
隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
指定对象为内联元素
指定对象为块元素
指定对象为列表项目
指定对象为内联块元素
指定对象作为块元素级的表格。类同于html标签<table>
指定对象作为内联元素级的表格。类同于html标签<table>
指定对象作为表格标题。类同于html标签<caption>
指定对象作为表格单元格。类同于html标签<td>
指定对象作为表格行。类同于html标签<tr>
指定对象作为表格行组。类同于html标签<tbody>
指定对象作为表格列。类同于html标签<col>
指定对象作为表格列组显示。类同于html标签<colgroup>
指定对象作为表格脚注组。类同于html标签<tfoot>
指定对象作为表格标题组。类同于html标签<thead>
根据上下文决定对象是内联对象还是块级对象
将对象作为弹性伸缩盒显示。（伸缩盒最老版本）
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）
将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）
将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）
将对象作为弹性伸缩盒显示。（伸缩盒最新版本）
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）
如果float不是none，当display: inline-table时，display的计算值为table；当display: inline | inline-block | run-in | table-*系时，display的计算值为block，其它情况为指定值；
当一个元素是绝对定位元素或者定义了display为none时，float定义不生效。
设置元素不浮动
设置元素浮在左边
设置元素浮在右边
适用于：块级元素。定义了一个元素是否可以放置在它之前的浮动元素旁边，或者必须向下移动在新行中放置。
当一个元素定义了clear值不为none时，可以被用来清除其之前的浮动元素对自身的影响（不同的取值，对应不同方向的浮动）。
允许两边都可以有浮动对象
不允许左边有浮动对象
不允许右边有浮动对象
不允许有浮动对象
定义了元素是否可见。与display属性不同，visibility会为隐藏的元素保留其占据的物理空间。
如果希望某个元素为可见，其父元素也必须是可见的。
设置对象可见
设置对象隐藏
主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。
定义了元素处理溢出内容的方式。
overflow的效果等同于overflow-x + overflow-y。
当块级元素定义了overflow属性（包括overflow-x与overflow-y）值为非 visibile时，将会为它的内容创建一个新的块格式化上下文（BFC）。
对于table元素来说，假如其table-layout属性设置为fixed，则td、th元素支持将overflow设为hidden、scroll或auto，此时超出单元格尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
overflow-x属性用于指定元素水平方向上的内容溢出时的处理方式，overflow-y属性用于指定元素垂直方向上的内容溢出时的处理方式。
当overflow-x,overflow-y中任意一个属性值的定义为非 visible时，另一个属性会自动将默认值visible计算为auto。
对溢出内容不做处理，内容可能会超出容器。
隐藏溢出容器的内容且不出现滚动条。
隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。
当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea元素的overflow默认值就是auto。
与hidden一样，clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于，clip是一个完全禁止滚动的容器，而hidden仍然可以通过编程机制让内容可以滚动。
语法：
* { sRules }
说明：
选定所有对象。
通配选择符(Universal Selector)
通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用
语法：
E { sRules }
说明：
以文档语言对象类型作为选择符。
类型选择符(Type Selector)
语法：
E#myid { sRules }
说明：
以唯一标识符id属性等于myid的E对象作为选择符。
语法：
E.myclass { sRules }
说明：
以class属性包含myclass的E对象作为选择符。 不同于ID选择符的唯一性，类选择符可以同时定义多个。
语法：
E,F { sRules }
说明：
匹配满足E或F的任意元素
语法：
E F { sRules }
说明：
选择所有被E元素包含的F元素。
与 子选择符(E>F) 不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
语法：
E>F { sRules }
说明：
选择所有作为E元素的子元素F。
与 包含选择符(E F) 不同的是，子选择符只能命中子元素，而不能命中孙辈。
语法：
E+F { sRules }
说明：
选择紧贴在E元素之后F元素，元素E与F必须同属一个父级。
与 兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）。
语法：
E~F { sRules }
说明：
选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。
需要注意的是，选择的只是同级的元素F，后代中的元素F不会被选择。
只选择E元素之后的F元素，出现在E元素之前的元素F，不会被选择到。
与 相邻选择符(E+F) 不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。
语法：
E[att] { sRules }
说明：
选择具有att属性的E元素。
语法：
E[att="val"] { sRules }
说明：
选择具有att属性且属性值等于val的E元素。
语法：
E[att~="val"] { sRules }
说明：
选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。
语法：
E[att^="val"] { sRules }
说明：
选择具有att属性且属性值为以val开头的字符串的E元素。
语法：
E[att$="val"] { sRules }
说明：
选择具有att属性且属性值为以val结尾的字符串的E元素。
语法：
E[att*="val"] { sRules }
说明：
选择具有att属性且属性值为包含val的字符串的E元素。
语法：
E[att|="val"] { sRules }
说明：
选择具有att属性，其值是以val开头并用连接符"-"分隔的字符串的E元素；如果值仅为val，也将被选择。
设置超链接a在未被访问前的样式。
设置超链接a在其链接地址已被访问过时的样式。
设置元素在其鼠标悬停时的样式。
设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
匹配使用特殊语言的E元素。
匹配不含有s选择符的元素E。
匹配E元素在文档的根元素。在HTML中，根元素永远是HTML。
匹配父元素的第一个子元素E。
匹配父元素的最后一个子元素E。
匹配父元素仅有的一个子元素E。
匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)
该选择符允许使用一些关键字，比如：odd, even
匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
匹配父元素下第一个类型为E的子元素。
需要注意3个要点：
首先，该选择符要匹配的是类型为E的子元素，这意味着E元素必须作为某个元素的子元素存在（E元素的父元素最高是html，也就是说E元素本身最高只能是body，这表示任何非html的元素都符合这个约束，因为html元素是根元素。）
其次，该选择符要匹配的是父元素第一个类型为E的子元素，这意味着被命中的元素不一定是父元素的第一个子元素（因为排在父元素首位的不一定是E元素，E元素可能在子元素列表中的任何位置）。
再次，只能匹配与E元素同级的元素，即：E元素的兄弟元素
匹配父元素下的所有E子元素中的倒数第一个。
匹配父元素的所有子元素中唯一的那个子元素E。
需要注意2个要点：
首先，因为匹配的是父元素的子元素，这意味着E元素必须作为某个元素的子元素存在（E元素的父元素最高是html，也就是说E元素最高是body，这表示任何非html的元素都符合这个约束，因为html元素是根元素）。
其次，父元素可以有多个子元素，但其中的子元素E必须是唯一的，不能出现多个。
匹配父元素的第n个子元素E。
需要注意3个要点：
首先，因为匹配的是父元素的子元素，这意味着E元素必须作为某个元素的子元素存在（E元素的父元素最高是html，也就是说E元素最高是body，这表示任何非html的元素都符合这个约束，因为html元素是根元素。）
其次，匹配的是父元素的第n个为E的子元素（被命中的不一定是第n个子元素，因为匹配的不是第n个子元素，而是第n个为E的子元素）
匹配父元素的倒数第n个子元素E。
匹配没有任何子元素（包括text节点）的元素E。
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
匹配用户界面上处于可用状态的元素E。
匹配用户界面上处于禁用状态的元素E。
匹配相关URL指向的E元素。
解释：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。
设置在打印时页面容器第一页使用的样式。仅用于@page规则。
设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则。
设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则。
如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现。超链接的4种状态，需要有特定的书写顺序才能生效。
设置对象内的第一个字符的样式。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
该伪类常被用来配合font-size属性和float属性制作首字下沉效果。
IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包括：E:first-line
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。
即E:first-letter可转化为E::first-letter
设置对象内的第一行的样式。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包括：E:first-letter
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。
即E:first-line可转化为E::first-line
设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
设置对象文字占位符的样式。
设置对象被选择时的样式。
需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。