[-] 优先级

• selector选择器支持一览.值得注意的是.class.class IE6并不识别
• 选择器优先级 1.三种引入方式的优先级
  2.同引入方式内的基本原则：
  一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
  复杂的计算方法：
  ●用1表示派生选择器(用HTML标签申明)的优先级
  ●用10表示类选择器(用一个样式类名申明)的优先级
  ●用100标示ID选择器(用DOM的ID申明)的优先级
  ●div.test1 .span var 优先级 1+10 +10 +1
  ●span#xxx .songs li 优先级1+100 + 10 + 1
  ●#xxx li 优先级 100 +1
  3.Tips:样式在html中的先后顺序不决定样式优先级,由CSS中定义的先后和优先级有关 参考资料
  4.Tips:选择器拾遗漏
• !important提升指定样式规则的应用优先权。
  但在IE6中有BUG,需要分开写在2个选择符中
  参考资料：GO TO!

[-] HACK

• if IE 条件HACK

  
                      <!--[if IE]>
                      指定载入相关JS/CSS或其他文件
                      <![endif]-->
                      

  
  参考资料：GO TO!
• _property属性级HACK

  key: value\9;	IE6~10
  key: value\0;	Oprea+IE8~10
  .key: value;	IE6+7+8
  *key: value;	IE6+7 (+或#亦可)
  _key: value;	IE6 (-亦可)
  [;property:value;];	webkit(Chrome,Safari)
  @-moz-document url-prefix(){..}	FireFox
  @media screen and (-webkit-min-device-pixel-ratio:0) {..}	webkit(Chrome,Safari)

  
  参考资料1：GO TO!
  参考资料2：GO TO!
  参考资料3：GO TO!
• *html selector选择符级HACK
  *html selector: IE6及以下
  *+html selector : IE7
  结合选择器能力
• expression表达式，IE6-7支持，IE8不支持

[-] 常用选择符

• *通配符
• tagName元素标签名
• #id#id选择器,也可以ele#id
• .class类选择器,可以连缀.class1.class2
• E F后代选择器
• E>F子选择器
• E+F相邻选择器
• E~F兄弟选择器

[-] 伪类选择符

• :link/:visited/:hover/:active a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后（LVHA）
  a:link{}
  a:visited{}
  a:hover{}
  a:active{}
  目前hover可用于任何元素,例如li:hover{},也可以用为li:hover a{}
  IE6中:hover只对a元素有效,可通过JS控制
• :not(selector)匹配不含有s选择符的元素E
• :first-child :first-child 第一个子元素,前缀为被选元素,必须是第一个子元素而非第一个本类子元素
  :first-of-type 该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E
• :last-child :last-child 最后一个子元素
  :last-of-type 最后一个此类元素
• :nth-child(n) :nth-child(n) 第N个子元素
  :nth-child(2n) 偶数,:nth-child(2n+1) 奇数
  第N个子元素，如果有不同类别的其他同级标签元素亦会增长序列数
  :nth-of-type(n) 第N个此类子元素
• :only-child :only-child 唯一一个子元素
  :only-of-type 为父元素中唯一元素的此类元素
• :focus设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
  webkit内核浏览器会默认给:focus状态的元素加上outline的样式,设置:focus{outline:0}
  
• :empty匹配没有任何子元素（包括text节点）的元素E。
• :target匹配相关URL指向的HASH目标元素。

[-] 属性选择符

• [att]含有属性
• [att='val']属性值为指定
• [att~='val']选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。完整包含,而非字符串。
• [att^='val']属性值以..开头
• [att$='val']属性值以..结尾
• [att*='val']属性值包含..字符串
• [att|='val']属性值以val开头并用连接符"-"分隔的字符串的元素

[-] 其他选择符

• :lang(zh-cn)匹配使用特殊语言的E元素。
• :root匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
• :checked匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)，不包含下拉菜单
• :enabled匹配用户界面上处于可用状态的元素E。
• :disabled匹配用户界面上处于禁用状态的元素E。

[-] 字体

• font([i][b] size/lh family)【简写】font:italic bold 18px/22px 'Consolas' （简写时font-size和font-family属性不可省略）顺序不对则有可能出现BUG
• font-size(px/180%) 字体大小,浏览器默认大小为1em（一般为16px）,移动端则使用rem,PC端使用px。
  % : 页面元素中font-size使用百分比时，其百分比取值是基于父对象中字体的尺寸，不允许简写百分比。字体没有相对父盒子大小比例扩展算法。
  px : 像素,相对长度单位。1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px;
  em : 相对长度单位.相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 PX转EM快速工具
  rem : 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。设置字体html{font-size:62.5% = 10px},则1.2rem=12px（手机端HTML5元素不主动继承body字体大小时，使用*）
  vm : 视窗可用宽度,0～100.(除去滚动条)
• color 1.颜色:red(颜色名称),#ff3399(16进制),rgb(255,0,255)

  ---

  2.transparent
  IE6及更早浏览器(CSS1)只有background-color接受transparent取值。
  IE7及IE8(CSS2)除了background-color，还有border-color也开始接受transparent取值。
  在CSS3中，transparent被延伸到任何一个有color值的属性上。
  *IE8及以下，color属性值为transparent时，文本显示为黑色。
  IE6透明边框的处理
  

  
                      _border-color: #000000; 
                      _filter: ~"progid:DXImageTransform.Microsoft.Chroma(color='#000000')";
                      

  ---

  3.rgba(255,255,255,0.8)
  带Alpha通道的颜色模式,可以半透明（IE8-不支持）
  让IE8-通过IE滤镜来实现rgba效果
  

  
                      background: rgba(0,0,0,.92);
                      filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startcolorstr=#CC000000, endcolorstr=#CC000000);
                      

  
  扩展知识：DXImageTransform.Microsoft.gradient 滤镜里的 startcolorstr 参数值是 #AARRGGBB 形式的， 其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的 RRGGBB 就是颜色的十六进制代码。
  举例如：background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下：先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4C。

  ---

  4.hsl，h色环角度,s饱和度,l亮度 Paletton.com
• line-height(px/180%/1.8) 行高,可为百分比或乘积因子,具有继承性
  % : 当为百分比时，子级会继承父级，此时的百分比，基于父级的字体大小的百分比，可能发生重叠（不具动画性）。参考资料
  1.5 : 当为乘积因子时，以自身的百分比150%=1.5。
  

  ---

  扩展阅读：
  linebox模型与基线等 | 行高的深入理解

  ---

  兼容处理：
  1.在FF中的对齐规则BUG，解决方案使用FF专属HACK@-moz-document url-prefix(){some-style}
  2.使用乘积因子时，IE7对1处理不当，需设置1.1或避免设置为字符等高。
• font-weight(bold/normal)粗体,normal正常=400,bold粗体=700,取值100~900
• font-style(italic/normal)normal正常,italic字体自带斜体,oblique人为斜体
• font-variant(small-caps)normal正常的字体,small-caps小型的大写字母字体
• text-transform(c/u/l) none： 无转换
  capitalize： 将每个单词的第一个字母转换成大写
  uppercase： 将每个单词转换成大写
  lowercase： 将每个单词转换成小写
• font-family 按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起。
  常用字体：Helvetica,Verdana,Arial,Consolas,Georgia,Impact,Trebuchet MS,Comic Sans MS,Tahoma,Time News Roman,微软雅黑,宋体
  参考常用字体预览
  移动端字体设置font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; 参考资料
• @font-face{f:'n',src:'url'} @font-face 必须在字体使用前引入
  @font-face {
  font-family: 'diyfont';
  src: url('diyfont.eot'); /* IE9+ */
  src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('diyfont.woff') format('woff'), /* chrome、firefox */
  url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
  }
  .iconfont{
  font-family:"iconfont";
  font-style:normal;
  display:block/inline-block;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  }
  放在html中时写为“& #xe62a;”赋值以对应class,当为伪元素content引用时,赋值“\e62a”
  图标字体 alibaba / Glyphicons / icomoon
  更多字体 Get it!
  字体转换 将一种字体转为网页所需的所有格式

[-] 对齐与缩进

• text-align(l/r/c/j) 水平对齐:center居中,left左,right右,justify两端对齐
  对inline/inline-block元素均有效,在IE6-7下对block也有效
  在父级设置,让子级中内联(块)元素水平居中对齐父级
• vertical-align(t/b/m) 垂直对齐：

  长度	通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'
  百分值 – %	通过距离（相对于line-height值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline'
  baseline	默认。元素的基线与父元素的基线对齐。
  sub	降低元素的基线到父元素合适的下标位置。
  super	升高元素的基线到父元素合适的上标位置。
  top	把对齐的子元素的顶端与line box顶端对齐。
  text-top	把元素的顶端与父元素内容区域的顶端对齐。
  middle	元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。
  bottom	把对齐的子元素的底端与line box底端对齐(受line-height影响)【line-box底端】。
  text-bottom	把元素的底端与父元素内容区域的底端对齐。【content-area底端】
  inherit	采用父元素相关属性的相同的指定值。

  
  对inline/inline-block元素有效,例如默认的图片,表单控件
  在子级设置,让自身与同级元素垂直对齐,而非对子集!
  参考资料
• text-indent([+-]Npx) 缩进,可为负值.
  div内部的第一行及每个强制换行的首行都拥有2em的缩进：text-indent:2em each-line;【CSS3】
  技巧：对于要保留html文字,但不显示的文字,可设置text-indent:-999px/100%【SEO】
  对内联a应用text-indent无效,需将a设置为block/inline-block
• :first-letter对象内第一个字符
  选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。
  例 p:first-letter[_]{} （[_]处保留空格）
• :first-line对象内第一行
  选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行
• letter-spacing(Npx)字母/中文字间隔
• word-spacing(Npx)单词间隔

[-] 文本装饰

• text-decoration(n/u/o/t)none：无
  underline：下划线
  overline：上划线
  line-through：删除线
• text-shadow(1px 1px 2px #248)文本阴影:1px 1px 5px #000; （水平,垂直,模糊半径,颜色）
  在线生成3DCSS文字GO TO!
• ::selection对象被选择时的样式,必须使用双冒号【CSS】
  ::selection只能定义被选择时的background-color及color
• -webkit-text-fill-color 文字的填充颜色,默认值transparent,参考：彩条文字

  
  	                    -webkit-background-clip: text;
  	                    -webkit-text-fill-color: transparent;
  	                    background-image: linear-gradient( to bottom, #9588DD, #9588DD 25%);
  	                    

• -webkit-text-stroke文字的描边,1px #ff3399
• -webkit-font-smoothing文字的平滑,-webkit-font-smoothing: antialiased;

[-] 文本折行

• white-space normal：默认处理方式。
  pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
  nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
  pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
  pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。
  常用片段（设置宽度）：white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
• text-overflow(ellipsis/str)文本溢出:clip剪裁掉/ellipsis点点点/string指定字符串【CSS3】
  多行文本省略(webkit)

  /* height: 36px; line-height: 18px; */ 
  	                    display: -webkit-box; 
  	                    -webkit-line-clamp: 2; 
  	                    -webkit-box-orient: vertical; 
  	                    overflow: hidden;
  	                    

• word-wrap当内容超过指定容器的边界时是否断行
  normal：允许内容顶开或溢出指定的容器边界。
  break-word：内容将在边界内换行。如果需要，单词内部允许断行。
  断行控制片段word-wrap: break-word;word-break: break-all;
• word-break对象内文本的字内换行行为 normal：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
  keep-all：与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
  break-all：该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。

[-] 文本流

• unicode-bidi(bidi-override) normal：对象不打开附加的嵌入层，对于内联元素，隐式重排序跨对象边界进行工作。
  embed：对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。

  ---

  bidi-override：严格按照direction属性的值重排序。忽略隐式双向运算规则。
  用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
• direction(ltr/rtl) ltr：文本流从左到右。
  rtl：文本流从右到左。
  设置direction:rtl;unicode-bidi:bidi-override;实现牌匾排字效果
• writing-mode书写模式
  horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）
  lr-tb：左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）

  ---

  vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）
  vertical-lr：垂直方向自左而右的书写方式。即 top-bottom-left-right
  tb-rl：上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度
  设置-webkit-writing-mode:vertical-rl;writing-mode:tb-rl;writing-mode:vertical-rl;实现文笺排版效果。

[-] 内容

• :before 设置在对象前（依据对象树的逻辑结构）发生的内容。IE6-7不支持,IE8支持。
  用来和content属性一起使用，并且必须定义content属性！必要时候即使有block表现仍需定义宽度
  伪元素的位置在内容之后，如果内容为空，则在起点，即使指定了父级尺寸
• :after 设置在对象后（依据对象树的逻辑结构）发生的内容。IE6-7不支持,IE8支持。
  用来和content属性一起使用，并且必须定义content属性！必要时候即使有block表现仍需定义宽度
• content(str/attr/url/count) content:'str' 一个字符串或符号,需加引号,例如 '»'
  content:attr(标签名) 载入此标签的一个属性节点上的内容,例如title
  content:url('文件地址') 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
  content:counter(name,list-style-type)使用一个已命名的计数器
  参考资料：GO TO!
• counter-increment(name [N]) 定义一个计数器,并设定累加值,默认为1,可以为负值。
  在要计数的对象上设置 li{counter-increment:test 1}
  在起始伪对象上启用 li:before{content:counter(test)'.'}
  参考资料：GO TO!
  实例演示：GO TO!
• counter-reset(name [N]) 复位计数器,默认为0.
  在要复位的对象(伪元素)上设置 li:before{counter-reset:test -1}
  参考资料：GO TO!
  复杂嵌套：GO TO!
  嵌套原理：
  1级列表设置计数器1,1级列表的before伪元素启用计数器1
  2级列表设置2计数器2,2级列表的before伪元素启用计数器2
  1级列表设置清空计数器
• quotes('['*4) 设置或检索对象内使用的嵌套标记。
  设置标签的包围符号：q{quotes:'外层左标记' '外层右标记' '内层左标记' '内层右标记'}
  参考资料：GO TO!

[-] 滤镜与透明

• opacity 透明度：使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。
  注意如果父级应用了此透明度方法,则子元素也会跟随一起透明,不受影响可以将子元素写在外面,再通过负值的margin或其他定位方法定位.
  IE8-不支持此属性,但可以用IE滤镜来处理,片段
  

  
                      .tm(@tm){
                      @alpha:@tm*100;
                      opacity:@tm;
                      filter:alpha(opacity=@alpha);
                      }
                      

• (new)filter ele {filter: none | * }
  函数不传值,默认为100%=1完全渲染,多个函数之间用空格隔开
  grayscale() 灰度，黑白
  sepia() 褐色,黄褐色旧照片
  saturate() 饱和度
  hue-rotate() 色相旋转
  invert() 反色
  opacity() 透明度
  brightness() 亮度
  contrast() 对比度
  blur(3px) 模糊
  drop-shadow(5px 5px 5px #ccc) 阴影
  参考资料 示例
• (ie)filter IE特有的滤镜属性,配合上述实现透明颜色,透明区块,另外由于IE无法正常显示PNG透明图片,当图片用作为背景图时,同样可以使用本属性解决.
  

  
                      background:url('../images/ex.png') no-repeat;
                      _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/ex.png");
                      

  
  *注意:通过滤镜对引入图片，滤镜引入图片的时候是相对于HTML文件，而不是相对于CSS文件，建议引入绝对路径。此方法不能应用于平铺图像！
  完整参考文档：GO TO!
  IE6使用滤镜PNG图片透明后，容器内链接失效，设置a{_position:relative;}
  扩展资料
  
  ie filter滤镜的说明：
  1.ie9滤镜重叠，给定统一class在条件注释中取消ie9滤镜。
  2.z-index与filter的渲染冲突bug。
  3.ie8中对img包裹元素a滤镜失效需要设置在img上。

[-] 背景

• background [简写]background:#222 url() Xpx Ypx/size repeat attachment clip origin,...
  逗号隔开每组background的缩写值；如果有size值，需要紧跟position并且用"/"隔开；
  分解写法时，background-color只能设置一个。
  缩写时,如果前面设置了独立属性,在缩写中未被定义的会被覆盖会空或默认值,如果在后面补充了的,后面的属性会自动合并到缩写中,如果该属性不被支持,则造成整个缩写属性无法识别！因根据情况全部分开写。
• background-color背景颜色,可用rgba来设置半透明背景,而不是用opacity,制作一些遮罩效果
• currentcolor 让Border/backgroud等沿袭color的颜色
  参考资料
• background-position背景图的位置,可以为负值和百分比,也可以用left(x=0),right(x=100%),top(y=100%),bottom(y=100%).先写水平,后写垂直.背景图的50%居中以图形中心为基点，不需要再移动自身一半尺寸
  雪碧图：CSS GAGA
  BASE64编码：GO TO!
• background-size background-size: Xpx Ypx / A% B% / cover / contain / auto
  cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；【全兼容的方式,独立图层img～100%】
  contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
  x% y%：百分比大小，占满父元素空间的百分比，可能导致图片变形
  x% auto | auto y%：使元素占父元素宽/高的百分比，并等比缩放～！
  一些情况不能识别/，反编译时候只需要反编译值，而不包括属性！
• background-repeat平铺方式：
  repeat-x：背景图像在横向上平铺
  repeat-y：背景图像在纵向上平铺
  repeat：背景图像在横向和纵向平铺
  no-repeat：背景图像不平铺
  round：背景图像自动缩放直到适应且填充满整个容器。
  IE6不指定此属性时，默认不平铺，其他浏览器默认平铺
• background-attachment fixed【相对浏览器固定】背景图像相对于窗体固定。
  scroll【相对元素固定】背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
  local【相对元素内容固定】背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。
• background-clip padding-box：从padding区域（不含padding）开始向外裁剪背景。
  border-box：从border区域（不含border）开始向外裁剪背景。(默认)
  content-box：从content区域开始向外裁剪背景。
  text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。
  TEXT剪裁方式的遮罩效果：GO TO!
• background-origin padding-box：从padding区域（含padding）开始显示背景图像。(默认)
  border-box：从border区域（含border）开始显示背景图像。
  content-box：从content区域开始显示背景图像。
• background-image图像url(''),无none,渐变

[-] 阴影与倒影

• box-shadow 盒子阴影,box-shadow:2px 2px 5px 50px #000 inset
  水平,垂直,模糊半径,阴影大小,颜色,内阴影
  可用逗号分隔多个阴影,制作复杂重叠阴影效果
  投影制作：GO TO!
  投影彩带：GO TO!
• -webkit-box-reflect -webkit-box-reflect:none/direction offset mask
  可应用于盒子或者直接应用于图片
  direction(倒影方向): above / below / left / right
  offset(倒影与源间隔): length / %
  mask(蒙版): url() / gradient

[-] 遮罩

• mask-image 遮罩使用的图片资源，支持多图片
  默认值：none / url(),..
  移动端可移除效果，同时设置border-radius配合实现粗略效果
• mask-mode 默认值：match-source
  
• mask-repeat 默认值：repeat
• mask-position 默认值：left top
• mask-clip 默认值：border-box
• mask-origin 默认值：border-box
• mask-size 默认值：auto
• mask-composite 默认值：source-over（累加）
  add累加/substract相减/intersect相交/exclude排除

[-] 图像

• image-set(1x,2x,Ndpi) 为不同的设备分配合适得图像;

   div{ background-image: image-set("test.png" 1x, "test-2x.png" 2x, "test-print.png" 300dpi);}

  为普通屏幕使用 test.png，为高分屏使用 test-2x.png，如果更高的分辨率则使用 test-print.png，比如印刷。
• -ms-interpolation-mode:bicubicIE7图像缩放失真

[-] 渐变

• grandient tools 图片渐变获取：从图片读取渐变生成CSS
  仿PS渐变生成：GO TO!
  渐变按钮生成：简洁 / 玻璃 / 水晶 / 简单 / 质感
• linear-grandient() background:linear-gradient(point,#colorA lengthA/A%,……#colorB lengthB/B%) 线性渐变
  point:left/right/top/bottom/N deg 方向或角度
  默认以垂直上方点为0度向下
  技巧应用实例：
  

  
                      使用1像素背景渐变绘制分割线
                      /*使用伪元素制作导航列表项分隔线*/
                      .nav li:after{
                      content:""; 
                      width:1px;
                      height:15px;
                      position:absolute;
                      right:0;
                      top:20px;
                      background:linear-gradient(0deg,#990000,#ff0000,#990000);
                      }
                      /*删除第一项和最后一项导航分隔线*/
                      .nav li:last-child:after{
                      width:0;
                      height:0;
                      }
                      

• repeating-linear-gradient()

  
                      repeating-linear-gradient(#f00, #ff0 10%, #f00 15%);
                      repeating-linear-gradient(to bottom, #f00, #ff0 10%, #f00 15%);
                      repeating-linear-gradient(180deg, #f00, #ff0 10%, #f00 15%);
                      repeating-linear-gradient(to top, #f00, #ff0 10%, #f00 15%);
                      

• radial-grandient() background:radial-gradient(position,shape,#colorA lengthA/A%,……#colorB lengthB/B%)径向渐变
  position:left~center/lengthA lengthB/A% 5% 指定圆心位置
  shape:ellipse/circle形状
  可以使用rgba色，设置从透明到渐变效果！
• repeating-radial-gradient()

  
                      repeating-radial-gradient(circle closest-side, #f00, #ff0 10%, #f00 15%);
                      

[-] 交互

• cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
  格式：使用自定义图像作为光标类型，IE, Opera只支持*.cur等特定的图片格式；Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.jpg, *.gif, *.jpg等图片格式。
  兼容：cursor的属性值可以是一个序列,用逗号分隔地址,优先级递降。
  

  
                      示例代码：
                      :link,:visited{
                      cursor:url(example.svg#linkcursor),
                            url(hyper.cur),
                            url(hyper.png) 2 3,
                            pointer;
                      }
                      本例用来给所有的超链接定义光标类型，客户端如果不支持SVG类型的光标，则使用下个"hyper.cur"；如果cur类型也不支持，则使用下个"hyper.png"；依次类推。
                      

  
  附录：

  值	描述
  url	需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
  default	默认光标（通常是一个箭头）
  auto	默认。浏览器设置的光标。
  crosshair	光标呈现为十字线。
  pointer	光标呈现为指示链接的指针（一只手）
  move	此光标指示某对象可被移动。
  e-resize	此光标指示矩形框的边缘可被向右（东）移动。
  ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
  nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
  n-resize	此光标指示矩形框的边缘可被向上（北）移动。
  se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
  sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
  s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
  w-resize	此光标指示矩形框的边缘可被向左移动（西）。
  text	此光标指示文本。
  wait	此光标指示程序正忙（通常是一只表或沙漏）。
  help	此光标指示可用的帮助（通常是一个问号或一个气球）。

• resize(both) 设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。
  如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。
  none：不允许用户调整元素大小。
  both：用户可以调节元素的宽度和高度。
  horizontal：用户可以调节元素的宽度
  vertical：用户可以调节元素的高度。
• ime-mode(disabled)输入法状态：设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。
  auto：不影响IME的状态。
  normal：正常的IME状态
  active：指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime
  inactive：指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime
  disabled：完全禁用ime。对于有焦点的控件(如输入框)，用户不可以激活ime
• pointer-events(none/auto) pointer-events:none 开启穿透点击,忽略自身
  pointer-events:auto 忽略部分的内部重新开启
  详细资料
• user-select(none) 禁止用户选中文字
  none：文本不能被选择
  text：可以选择文本
  all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
  element：可以选择文本，但选择范围受元素边界的约束
  IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；
  直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果；unselectable 的另一个值是 off；
  除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；
  html:

  
                      <p onselectstart="return false;" unselectable="on">禁止被选择的文字</p>
                      

  css:

  
                      p{user-select:none;} //在自动生成前缀时
                      

[-] 滚动条

• ie

  scrollbar-base-color	基色
  scrollbar-track-color	轨道色
  scrollbar-face-color	滑块色
  scrollbar-arrow-color	箭头色
  scrollbar-highlight-color	左上阴影的颜色
  scrollbar-shadow-color	右下阴影的颜色
  scrollbar-3dlight-color	箭头阴影的颜色
  scrollbar-dark-shadow-color	立体阴影色

  
  
• chrome

  ::-webkit-scrollbar	整体部分
  ::-webkit-scrollbar-track	轨道
  ::-webkit-scrollbar-track-piece	内层轨道
  ::-webkit-scrollbar-thumb	滚动条滑块
  ::-webkit-scrollbar-button	两侧按钮
  ::-webkit-scrollbar-corner	边角（横纵滚动条的交汇处）
  ::-webkit-resizer	边角拖拽控件

  
  
• chrome伪元素

  :horizontal	horizontal伪类适用于任何水平方向上的滚动条
  :vertical	vertical伪类适用于任何垂直方向的滚动条
  :decrement	decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
  :increment	increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
  :start	start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面
  :end	end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面
  :double-button	double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
  :single-button	single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
  :no-button	no-button伪类表示轨道结束的位置没有按钮。
  :corner-present	corner-present伪类表示滚动条的角落是否存在。
  :window-inactive	适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。

• [compare]

  整体	::-webkit-scrollbar	整体样式，可用来设置宽度等，IE不可调整宽度
  轨道	::-webkit-scrollbar-track scrollbar-track-color	轨道样式，IE只能设置颜色，chrome可以加点内阴影和圆角
  滑块	::-webkit-scrollbar-thumb scrollbar-face-color	滑块样式，同上
  箭头	::-webkit-scrollbar-button scrollbar-arrow-color	箭头样式，chrome下当设置了自定义scrollbar时默认则隐藏了箭头，这样看起来和平板差不多 而IE还是需要给其配色，让它和整体看起来更协调
  其他（IE）	scrollbar-base-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-3dlight-color scrollbar-dark-shadow-color	IE下为了整体协调美观，左侧属性仍根据实际情况调整，通常我将它设置与滑块一致
  其他（Chrome）	::-webkit-scrollbar-track-piece ::-webkit-scrollbar-corner ::-webkit-resizer	chrome下有伪状态

[-] 表现

• Standards/Quirks Mode HTML文档根据文档顶部的doctype声明来决定渲染模式，有标准模式（Standards Mode）与怪异模式（Quirks mode，或叫做混杂模式）两种模式。
  IE5及以前默认总是表现为怪异模式，IE6~IE8遇到非正常声明或特定声明时也会进入怪异模式。
  否则，如果有正确声明doctype并在顶端，则默认进入标准模式，即包括HTML5声明在IE6~IE8，也会进入标准模式，而非一定需要HTML4长长的声明。
  而许多现代浏览器即使是怪异模式，表现也和标准模式是一致的。
  
  IE6+进入怪异模式的条件：
  1.IE6~IE8没有doctype的页面是在怪异模式下渲染。
  2.在文档类型定义之前出现非空格和换行字符，浏览器也会激活怪异模式。
  3.除上述两种情况外，有一些特殊声明时用来特定激活怪异模式的。
  具体见下表，删减至只考虑中国市场常用浏览器（来自《Activating Browser Modes with Doctype》）
  标准模式与怪异模式下导致的和模型区别：
  需要知道的是，盒模型差异是两种模式导致的最重要的区别之一，但是IE一些其他的BUG，即使是在标准模式下，仍然需要通过HACK解决，而并非处于标准模式下则没有BUG。
  Box model ：标准模式width=content，怪异模式width=content+padding+border
  例外：即使是标准模式下,button总是应用border-box,现代浏览器为了表现一致,默认添加了box-sizing:border-box属性，故在button的高度上仍然要考虑border而影响的高度,即设置height=height+border*2。
  另外，button在现代浏览器中总是表现为基于垂直对齐，在IE7~8中表现为顶部对齐，在IE6中表现为基线对齐，故需要设置vertical-align:middle初始化让所有表现一致。
  参考自《Quirks mode and strict mode》查阅更多区别
• box-sizing content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
  border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。
• display 完整参考资料：W3C
  当元素float,fixed,abosulte或者为根元素时,总是表现为块级元素(但并不会宽度占据100%,而是根据自己内容扩展,正确理解成inline-block?但又不完全是,由于float的性质为包裹)

  none	隐藏对象,不保留物理空间
  inline	内联元素 a,span,文本格式化(b,strong,i,em,sub,sup)
  block	块级元素 div,p,h1~h6,h5,form,ul,ol新元素
  inline-block	img,表单控件(input,button,textarea,label)
  list-item	列表项目li
  table	块级元素级的表格table,表格内部元素表现为对应的table-cell等。 table-caption | table-cell table-row | table-row-group table-u-column | table-u-column-group table-footer-group | table-header-group
  inline-table	内联元素级的表格
  flex	弹性伸缩盒
  box	inline-box,块/内联块级弹性伸缩盒（旧）
  flex	inline-flexbox,块/内联块级弹性伸缩盒（新）
  run-in	根据上下文决定对象是内联对象还是块级对象

• zoom 设置或检索对象的缩放比例,normal实际尺寸,1.x浮点数,120%百分比.
  1.可局部用于响应式设计改变DOM尺寸，会有偏移错位（以像素起点对齐变换）
  2.可用于触发IE6的haslayout,拥有haslayout属性的层会自动管理其宽高,除非设置overflow否则宽高会自动扩展.
  现代浏览器会溢出显示,但自身宽高不变.
• (hasLayout) 详细文档
  触发haslayout的条件：
  IE6:
  * display: inline-block
  * float: (left 或 right)
  * position: absolute
  * width: (任何值除了auto)
  * height: (任何值除了auto)
  * writing-mode: tb-rl
  * zoom: (除 normal 外任意值)
  IE7:（额外）
  * min-height: (任意值)
  * max-height: (除 none 外任意值)
  * min-width: (任意值)
  * max-width: (除 none 外任意值)
  * overflow: (除 visible 外任意值)
  * overflow-x: (除 visible 外任意值)
  * overflow-y: (除 visible 外任意值)
  * position: fixed
• (BFC) block fomatting context详细文档
  BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
  BFC不会重叠浮动元素
  BFC可以包含浮动
  触发BFC条件
  * 根元素,fieldset
  * float的值不为none
  * overflow的值不为visible
  * display的值为inline-block、table-cell、table-caption、flex、inline-flex
  * position的值为absolute或fixed

[-] 尺寸

• calc()长度计算,width:calc(100% - 50px) 中间必须有空格！
• width宽度
  1.IE6 BUG:当元素设置百分比宽高时,自动继承父级,宽度由于block默认占比100%,即总是不会缺失,但若父级高度自适应,则IE6会继续向上级继承,而现代浏览器则继承当前父级内容实际产生的高度.
  2.IE6 BUG:1像素BUG,尽量设置尺寸为偶数或不设置参考资料
  3.子元素设置100%宽高时不包含父元素的padding!当父元素有padding时,因设置固定尺寸或修改父级模型!
  4.width:auto 现代浏览器中表示根据内容自动扩展,而IE6-7表示占满父级
  5.IE6-7对宽度的处理略有差异，特别是IE7下有许多离奇BUG，取百分比小数时，尽量只取到1位或取整
• height高度
  1.如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%; 参考资料
  2.对于绝对定位拉伸的元素，内部元素可以直接使用百分比
  3.IE6-7中浮动创建的自适应布局,需要主动给定父级高度，否则绝对定位的元素无法正常定位。
  4.height:inherit的用法(IE8+)
• min-width/height最小宽高
  ie7-8支持,仅ie6不支持
  IE6触发haslayout时,总是会自动管理其内容的宽高,自适应增长
  故可以写成.test{min-height:200px;_height:200px;}
• max-width/height最大宽高
  1.ie7-8支持,仅ie6不支持

[-] 边框

• border[简写]border:1px solid #ccc;
  [0px height]元素的边框位置IE6 BUG！
  当引入一个透明边框时,ie6+会增长内部空间至边框区域(背景色,不含内容),ie6显示黑色边框.

  ---

  border-width宽度：
  指定一个宽度,此宽度在双线时等于其间隔.

  ---

  border-style样式：
  none：无轮廓（等价border-width:0）
  dotted：点状轮廓。IE6下显示为dashed效果
  dashed：虚线轮廓。
  solid：实线轮廓
  double：双线轮廓。两条单线与其间隔的和等于指定的border-width值
  groove：3D凹槽轮廓。
  ridge：3D凸槽轮廓。
  inset：3D凹边轮廓。
  outset：3D凸边轮廓。

  ---

  border-color颜色：
  如果想在hover上做边框显示不发生抖动,应将默认状态添加如1px solid transparent
  三角制作：在线生成（利用宽高0,设置1个夹角边框大值）
  arrow生成：GO TO!
  
• border-top 单边:border-top/border-bottom/border-left/border-right
  取消某一边:border:1px solid #ccc;border-bottom:none;
• border-width/color/style border-width/color/style:上 右 下 左;4个值
• border-radius [边框圆角简写]border-radius:5px 4px 3px 2px;
  四个半径值分别是左上角、右上角、右下角和左下角,可以设置百分比.
  提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数（顺时针顺序）
  border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;
  改变形状：
  正方形->圆：radius=width|height/2
  叶子-> 左上+右下,注意书写方式与简写代表
  半圆->宽度设为高度的一半，并且也只设置左上角和左下角的半径
  饼->四分之一圆的实现方法是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度
  用radius画形状参考资料
  在线生成：GO TO!

  ---

  扩展:
  1.chrome hover radius bug
• border-top-left-radius 单角圆角,注意书写格式,先写top/bottom后写left/right
  提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
  border-top-left-radius:5px 10px。不用“/”分割
• border-image border-image:url(路径不需要引号) 80 80 80 80 round/stretch
  移动端1像素边框处理
• outline 轮廓边框,在border之外,chrome有焦点样式.另可作为定位参考或特殊动画
  不支持圆角
  不允许类似border属性那样能将自身拆分为border-top..
  IE6-7不支持,IE8支持
• outline-offset 用长度值来定义轮廓偏移。允许负值。
  0是以border边界作为参考点的，正值从border边界往外延，负值从border边界往里缩.
  可用outline来制作一些边框动画但又不改变原大小并非真正边框的改变(因为边框大小改变必然内容需要改变)

[-] 补白

• padding 内部补白
  【设置】

  ---

  [简写]依次设置上右下左padding:1px 2px 3px 4px;
  [单边]padding-top/right/bottom/left
  [缩写]如果只提供一个，将用于全部的四边;如果提供两个，第一个用于上、下，第二个用于左、右;如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

  ---

  【生效】
  非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。即内联元素(a等)设置padding水平有效,垂直无效,除非转换display值。margin同理。

  ---

  【注意】
  1.默认背景图片的平铺是包含在padding区域的
  2.padding生效在伪对象之外。
  3.%比值水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照包含块 height，margin同理参考资料

  ---

  【其它】
  1.IE7会胡乱继承padding,自适应宽高的地方必要应设置父级宽高并设置隐藏。
  2.当设置类似必须overflow但内部有元素偏移时，可用padding替代margin。

[-] 边距

• margin(num/%/auto) 取值：num / % /auto
  1.auto：当margin-left/right同时为auto时水平居中
  2.%百分比：水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height。
  3.num：可以为负值

  ---

  margin负值：
  1.当元素不存在width属性或者（width：auto）的时候，负margin-left/right会增加元素的宽度。

  
  
  	
  
  		
  item..
  		
  item..
  		
  item..
  	
  
  
  

  2.margin-bottom为负值不会产生位移，会减少自身的供css读取的高度。
  

  
  
      text
      
  
  
  © 2018 mgtv.com
  
  

  3.margin负值发生位移后，会影响其后的文档流位置。

  
  
              
  main content
  
  left
  right
  
  

  4.margin负值实现自动等高的多列布局。

  
  
  	
  
  		
  item..
  		
  item..
  		
  item..
  	
  
  
  

  参考资料
• margin-left/right 1.IE6/7双倍margin
  对块状容器元素设置了float和与float相同方向的margin值就会出现双倍margin
  解决方法：设置BUG元素display:inline;
  由于当元素float的时候，display样式的值就会自动转换为“block”，无论display先前设置的属性是什么都会失去效果，不会影响块级特性。
• margin-top/bottom 1.内联元素垂直无效
  非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
  2.外边距合并 参考文档
  当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
  当一个元素包含在另一个元素中时【假设没有内边距或边框把外边距分隔开】，它们的上和/或下外边距也会发生合并。
  假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并 如果这个外边距遇到另一个元素的外边距，它还会发生合并。
  3.不发生margin合并的情况
  margin折叠只发生在块级元素上，且只发生在垂直上
  浮动元素的margin不与任何margin发生折叠；
  绝对定位元素的margin不与任何margin发生折叠；
  设置了display:inline-block的元素不发生折叠；
  设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
  根元素的margin不与其它任何margin发生折叠,指html而非body
  IE6-7中,如果父元素触发了haslayout,则不会发生折叠

[-] 溢出

• visibility 此属性为隐藏的对象保留其占据的物理空间如果希望对象为可视，其父对象也必须是可视的。
  visible： 设置对象可视
  hidden： 设置对象隐藏
  collapse： 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

  ---

  使得一个DOM元素不显示在浏览器可视范围内的方法：
  display:none
  visibility:hidden
  width:0;height:0;opacity:0;z-index:-1000
• overflow溢出
  使overflow生效需要指定尺寸!而非自适应尺寸
  visible： 对溢出内容不做处理，内容可能会超出容器。
  hidden： 隐藏溢出容器的内容且不出现滚动条。
  scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
  auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
  在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。
  扩展：
  当内含一个100%的元素时，外层设置overflow来与一个浮动元素水平衔接。
• overflow-x横向溢出处理
• overflow-y纵向溢出处理
  对html元素设置overflow:hidden;可隐藏浏览器滚动条,通过js设置让body,html滚动
• clip 剪裁,【绝对定位元素】.
  auto：不剪裁
  rect(50px 20px 10px auto)：上右下左，四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。
  更多说明
  只有为shape时才支持动画性,可做遮罩动画效果
• webkit-mask-imageurl(img) webkit-mask-image:url(img.png)

[+] 方案

• 水平居中 1.自动margin(固定尺寸, .x(auto) )
  只适用于水平切为块级元素,margin:0 auto;
  2.text-align:center( 适用于inline/inline-block, .x )
  现代浏览器只对inline/inline-block元素有效,且非绝对定位.IE6-7可对block元素有效(需指定尺寸)
  3.绝对定位( 已知元素尺寸,ct(x,@width) )
  设置绝对定位,left:50%,并设置margin-left:-尺寸的一半
  4.绝对定位( 未知元素尺寸,.ct(x) )
  设置绝对定位,并设置left:0;right:0;margin-left:auto;margin-right:auto; 【IE6不支持】
  5.自动margin(伸缩尺寸,margin:x)
  设置margin:value 对边相等margin值,对盒子宽高未设置则自动扩展宽高
• 垂直居中 1.绝对定位( 已知元素尺寸,ct(y,@height) )
  设置绝对定位,top:50%,并设置margin-top:-尺寸的一半
  2.绝对定位( 未知元素尺寸,.ct(y) )
  设置绝对定位,并设置top:0;bottom:0;margin-top:auto;margin-top:auto; 【IE6不支持】
  3.table-cell
  设置display:table-cell;vertical-align:middle;（子元素为inline或inline-block） 【IE6不支持】
  4.display:-webkit-box;-webkit-box-align:center;(手机端)
• 中央居中 1.绝对定位( 已知元素尺寸,ct(o,@width,@height) )
  设置绝对定位,top:50%,left:50%,并设置margin-top:-尺寸的一半,margin-left:-尺寸的一半
  2.绝对定位( 未知元素尺寸,.ct )
  设置绝对定位,并设置top:0;bottom:0;left:0;right:0;margin:auto; 【IE6不支持】
  3.自动margin(伸缩尺寸,margin:x)
  设置margin:value 对边相等margin值,对盒子宽高未设置则自动扩展宽高
• 尺寸兼容 1.hasLayout概念,ie6的自动管理,如不设置overflow总是自动扩展
  2.当元素设置百分比宽高时,自动继承父级,宽度由于block默认占比100%,即总是不会缺失,但若父级高度自适应,则IE6会继续向上级继承,而现代浏览器则继承当前父级内容实际产生的高度.
  3.IE6的1像素BUG,尽量设置尺寸为偶数或不设置参考资料
  4.IE6-7对百分比小数值例如33.33%解析不正确,因修正为*width:32%
• % + border百分比尺寸下border的处理
  1.margin:-2px（hover处理则增加双倍）
  2.box-sizing
  3.calc函数 ~"calc(100% - 50px)"
  4.table布局,width=100%-50(无单位)
• 自适应宽度自适应宽度
  1.margin:x val,由于默认block宽度占满100%,设置margin即占满剩余宽度【如side float则需要清除3px bug,可选择绝对定位】
  2.绝对定位,不设置宽高,left:x起始点,right:x结束点.margin:auto.【IE6不兼容】如为相对浏览器窗口可表达式计算
  3.calc函数 ~"calc(100% - 50px)"
  4.table-cell,根据内容扩展,占满剩余父级空间
  5.改table布局,使用width=100%-50(无单位)
• 自适应高度自适应高度
  1.绝对定位,不设置宽高,top:x起始点,bottom:x结束点.margin:auto.【IE6不兼容】如为相对浏览器窗口可表达式计算
  2.calc函数 ~"calc(100% - 50px)"
  3.改table布局,使用height=100%-50(无单位)
• 水平布局水平布局方案
  1.float
  2.inline-block,需设置vertical-align:top,去除inline-block的200B空格.【IE6中要使不断行还必须指定父级高度！】
  3.table-cell(总是等高最高的)【IE6不支持】

  ---

  
  float:错乱,换行不低于上行最高值,不等高
  inline-block:不会错乱,新行整齐,不等高
  table-cell:不会错乱,同行元素必定等高

[-] 浮动

• float 浮动详解 视频版
  【特性】：
  1.浮动内置设置：设置了float的元素则自动转换display为block.只有块级元素具有宽高等特性.
  2.浮动原理1.环绕特性本质，2.脱离文本流特性
  3.与非浮动元素的margin问题：如果浮动并未被闭合处理，下级非浮动元素默认还是以“环绕”浮动元素，其margin会作用在空的区域，此时应在浮动元素上设置margin
  【浮动闭合与BFC】 参考文档
  1.清除浮动解决方案：
  .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
  .clearfix:after {content:"";display:table;clear:both;}
  .clearfix { *zoom:1; }
  完整参考资料
  2.BFC条件：
  float为 left|right
  overflow为 hidden|auto|scroll
  display为 table-cell|table-caption|inline-block
  position为 absolute|fixed
  【IE BUG】
  1:IE6 双倍margin BUG
  对块状容器元素设置了float和与float相同方向的margin值就会出现双倍margin
  解决方法：设置BUG元素：display:inline;
  由于当元素float的时候，display样式的值就会自动转换为“block”,无论display先前设置的属性是什么都会失去效果，不会影响块级特性。
  2.IE6下3像素bug：
  当浮动元素与非浮动元素相邻时,会发生3像素间隙,可设置浮动元素_margin-right:-3px;或使非浮动元素浮动.
  详细参考资料
  中间列自适应布局方案:左右各浮动（层级需要都在不浮动之前！），需要解决3px bug
  3.IE6-7浮动自适应布局
  IE6-7中浮动创建的自适应布局,需要主动给定父级高度，否则绝对定位的元素无法正常定位。
• clear清除浮动：none,left,right,both
  清除浮动只影响自己，而不影响其他元素；
  对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
  参考资料1
  参考资料2

[-] 定位

• position:static对象遵循常规流
• position:relative 相对定位：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素
  1.相对定位不同于margin-left/top,不会改变原先文档流,html后者层级默认仍然比前者高
  2.相对定位可设置z-index改变层级
• position:absolute绝对定位：【参考资料】
  特征：
  1.对象脱离常规流,会在正常文档流之上,也可以通过z-index改为负值在正常流之下
  2.使用top，right，bottom，left等属性进行绝对定位，坐标总是以最近的被定位的父级元素为基准,如没有则以window窗口.
  3.盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
  4.当元素设置为绝对定位时,则该元素变为inline-block块级.（不再占据100%）
  特殊用法：
  1.(未定义坐标)：绝对定位的元素，在top，right，bottom，left属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。如无兄弟元素则贴在父元素起点。即绝对定位在不赋值位置属性时，可作为脱离文档流的相对定位。
  无依赖的绝对定位主要通过margin来实现位移.
  可配合text-align+ ；实现一些自动布局。
  关于跟随性,默认会跟在图片的顶端,由于200B baseline对齐会错位,可通过注释或串联来规避
  2.(未知/已知元素尺寸)：垂直/水平/双向居中,可设置绝对定位,并设置top+bottom:0 / left+right:0 / top+left+bottom+right:0,并设置对应方向margin:auto【IE8支持，6-7均不支持】
  3.(已知元素尺寸)：垂直/水平/双向居中,可设置绝对定位,并设置单向距离(left:50% / top:50%),并设置margin-left/top:-尺寸的一半.【IE6支持】
  4.(自适应宽高)：一个绝对定位元素,如未对其宽高进行设置,但对其对向方位值设置时,则认为宽高总是扩展值定位点.可利用作为自适应宽高.【IE8支持，6-7均不支持】
  BUG：
  1.IE6中,父元素区域会管理到内部包含的绝对定位元素范围.
• position:fixed窗口定位：
  对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
  HACK：
  IE6不支持fixed定位，通过CSS表达式解决，完整参考资料
  平板下的fixed有Bug，使用绝对定位代替。
• top/bottom/left/right 配合定位属性进行定位,可为负值.
  值可以为百分比，百分比的值是以自身尺寸为参照。
• z-indexZ轴设定,可以为负值.
  同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。
  不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。
  在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。
  实例参考

[-] 列表

• display:inline-block 1.IE6-7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；
  解决方案：
  div{display:inline-block;*display:inline;*zoom:1;}
  2.默认inline-block元素之间默认会有间隔,是由于html元素间200B空格导致的(根据上下文字体大小有差异),可以通过连接html元素,或注释,或分行,及其他方式去掉.(浮动亦可,但浮动无法制作横向布局)
  详细参考资料
  3.禁止换行还需要设置white-space:nowrap制作横向滚动效果.
• ul/li 1.用ul+li打造table效果时,可以自适应宽度换行,边框设置的方式,设置全框,负margin,可规避padding及屏幕尺寸变化问题.
  2.IE6下ul默认表现为block，浮动后依旧占据100%，即使父级浮动，需要自身表现为dbi或fl（设置为dbi如果没有压缩html会出现空格），即用到ul,li来构造布局时，注意给ul,li添加浮动hack。
  3.在ul,li布局时，如非标准结构，在IE67中可能会解析错误导致bug，当非标准结构时建议使用div替代ul,li。
  4.ul表现为dbi在部分原生IE8中可能有渲染bug，添加margin强制渲染占据宽度。
• list-style[简写] img position type,无序列表ul,有序列表ol,自定义列表dl
  可以用列表来进行布局,清除列表样式ul设置list-style:none,ul{padding:0,margin:0}
  如标记为图片时一般用背景图来替代
• list-style-type 仅作用于具有display值等于list-item的对象（如li对象）,如修改display值后不再显示(设置为块或其他特性均消失标记).
  注意：ol,ul,dl对象的type特性为其后的所有列表项目（如li对象）指明列表属性。
  此样式也可应用于counter计数器样式

  值	描述
  none	无标记。
  disc（默认）	实心圆。
  circle	空心圆。
  square	实心方块。
  decimal	数字。( 1,2,3…… )
  decimal-leading-zero	0开头的数字标记。( 01,02,03…… )
  lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
  upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
  lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
  upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
  lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
  lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
  upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
  hebrew	传统的希伯来编号方式
  armenian	传统的亚美尼亚编号方式
  georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
  cjk-ideographic	简单的表意数字
  hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
  katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
  hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
  katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

• list-style-image list-style-image:url(img.png)
  定位位置上会有问题.以文字中线开始显示图片.
  并且也只当li依旧为list-item特性时才有效.
  一般使用背景图来制作列表背景.
• list-style-position 指标记的内外方式,而非(图片)标记坐标位置
  outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐（默认值）
  1.当type在outside时,如RESET样式中设置ul的padding:0,则会看不到type图标(无论li是否设置padding);如设置ul的padding(例如)小于20,则type图标将会溢出在ul之外.
  2.如设置li的padding-left,则标记位置不更改,而标记与内容之间拉开间距
  3.如设置li的margin-left,则margin继承到标记之外,标记与父级拉开间距

  ---

  inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。[查看演示]
  1.当type在inside时,type会和文字一起距离浏览器默认padding缩进,设置padding:0时,则会贴边显示.
  2.设置li的padding-left和margin-left视觉表现都为标记之外与父级拉开间距

[-] 表格

• display:table-cell 特点：
  1.table-cell有类似inline-block的可并行性
  2.表格单元格宽度根据内容扩展，自行设置无效。
  3.表格单元格同行元素总是等高。
  注意：
  1.IE8+有效
  2.设置了display:table-cell的元素对宽度高度敏感，【对margin值无反应】，响应padding属性
  3.display:table-cell与float:left或是position:absolute属性不同时使用
  作用：
  1.可以通过设置vertical-align:middle内容垂直居中
  2.可用于宽度自适应布局，因为单元格本质宽度即由内容宽度决定。注意设置vertical-align:top
  hack处理display:table-cell; width:2000px;*width:auto;*zoom:1;
  3.可用于等高布局，即使不设置高度也会与同行元素等高。
  hack处理display:table-cell; width:30%; margin-bottom:-100px; *padding-bottom:110px;*float:left;
  参考资料
  4.自适应.cell{display:table-cell;*display:inline-block;} //table-cell content + auto side*2
  5.td中让元素垂直居中对齐，是对元素img设置y而非父级 ，文字则设置父级
• table 1.表格中插div会脱离表格在外
  2.表格中对合并后 或tr 表现为block,会只有第一个单元格宽度,可直接应用arrow,tr的显示应用table-row而非block
  3.垂直th添加scope="col"
• table-layout 适用于：table系元素。
  auto:默认的自动算法。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢
  fixed：固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切
  关于text-overflow在单元格中的失效
• border-collapse separate：边框独立
  collapse：相邻边被合并
  只有当表格边框独立（即border-u-collapse属性等于separate时），border-spacing和empty-cells才起作用。
• border-spacing 该属性作用等同于标签属性cellspacing(单元格边距)。border-spacing:0等同于cellspacing="0"
  如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。
  如果只提供一个length值时，这个值将作用于横向和纵向上的间距。
  *一般将此值与表格内标签属性cellpadding,cellspacing均设为0,通过CSS边距来控制.
• caption-side top：指定caption在表格上边（默认）
  bottom：指定caption在表格下边
  要在IE7及以下浏览器中实现top与bottom参数值的效果，可直接在caption标签内定义标签属性valign为top和bottom。
• empty-cells show：指定当表格的单元格无内容时，显示该单元格的边框。（默认）
  hide：指定当表格的单元格无内容时，隐藏该单元格的边框。
  IE7及以下浏览器中默认隐藏无内容的单元格边框，要想使其获得与show参数值相同的效果，可以变相给该空单元格加个占位且不可见的元素，例如全角空格或\ 等等。

[-] 表单

• form text
  1.Chrome、IE、Firefox、Opera各有不同默认的padding和边框。
  2.IE中,不会因为行高而撑开高度
  3.所有浏览器均为content-box计算模式.
  4.IE6-7中,对input设置text-indent会整个缩进,应设为padding
  5.IE6-7中,过高行高字体显示异常,可能只有一半,则单独设置同字号行高与高度,添加专有padding。
  故重置text为：重定义padding,重定义边框样式,同时定义等值高度与行高。

  ---

  button
  1.Chrome、IE、Firefox、Opera各有不同默认的padding和边框。
  2.所有浏览器中,未定义高度时会受行高撑开高度
  3.Edge与IE8-中,为content-box计算模式,其他浏览器为border-box模式,但指定box-sizing将不会对IE8-生效。
  故重置button为：重定义padding,重定义边框样式,同时修改为content-box模式,可定义等值高度与行高,且设置ie7-的行高为normal。

  ---

  select
  1.各浏览器边框边距以及option的边距略有不同。
  2.默认所有浏览器均为border-box模式。
  3.仅firefox在未定义高度时会受行高撑开高度
  4.右侧padding在IE中会出现在下拉按钮以外。
  故重置select为：重定义padding,且不设置右侧padding,重定义边框样式,定义高度等于行高+padding+边框。

  ---

  radio/checkbox
  1.firefox无法修改其尺寸，opera无法修改复选框尺寸。
  2.单复选框的对齐问题,可用vertical-algin解决。参考资料
• :placeholder 占位提示字符

  
                      &:-moz-placeholder
                      &:-ms-input-placeholder
                      &::-webkit-input-placeholder
                      //可定义文字样式：颜色、字号、对齐方式、字体等
                      

• input::-ms-clear 设置为display:none，禁止IE10+显示密码切换功能
• input::-mas-reveal 设置为display:none，禁止IE10+显示密码切换功能

[+] 其它

• p/div 充分利用p,h1-h6等标签进行语义化.但不要在p中放置h1-h6,结构出错。
• h1-h6 在H内部直接放置浮动右元素，IE7会换行，改用position定位
• a 1.IE10-对于a与同级元素，空的a调整层级或顺序仍然无法点击，需要将a包裹其他元素
  2.在平板中a标签中包含:hover触发改变display:none/block的元素，旧平板无法点击，将display切换改为透明度更改并可能需要修改ie78的filter值
  

[-] 多列

• columns(Npx [M]) 多列,简写时注意加s,简写中只含宽度(带单位,不能百分比)和列数.Chrome需要前缀-webkit-
  应用于除table外的非替换块级元素，display:table-cell 元素, 内联块元素。
  实现多列的是里面的内容,而非自身.
  简写方式一：设置width,column:200px 3（固定3列200宽。）
  简写方式二：column:200px （自动根据父级宽度生成X列）
  同时指定2个值时，优先先按列数来分配宽.例如浏览器宽度1800px,指定3列200px宽,结果为分配为3列600px宽,忽略200宽指定值;如果指定宽度200px,未指定列数,则按宽度自动平分为9列
  参考资料：替换/非替换块级/内联元素
• column-width(Npx)列宽
• column-count(N)列数
• column-gap(Npx)列间隔
• column-rule(1px solid #ccc)列间隔边框 1px solid #ccc
  column-rule-style等同于border样式
• column-span(N/all)列横跨,适用于：除浮动和绝对定位之外的块级元素
  是否横跨全部,all和none,不可设置数值非表格,此属性应设置在被应用多列属性的子元素上,多列无继承性,对于不想被继承多列的元素应写在多列父元素之外,而非去设置多列横跨.

[+] Flex

• flex 教程 | 兼容旧版box教程
  在线调试flexbox布局效果
  display:flex/inline-flex;
  注意：
  所有column-*属性在flex容器上都不生效;flex容器上不能使用::first-line和::first-letter伪元素。
  float，clear和vertical-align属性应用在flex项目上将会无效和无法将其out-of-flow。
• item flex 这个属性是flex-grow、flex-shrink和flex-basis属性的简写。
  如果缩写「flex: 1」, 则其计算值为「1 1 0%」
  如果缩写「flex: auto」, 则其计算值为「1 1 auto」
  如果「flex: none」, 则其计算值为「0 0 auto」
  如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值
• item flex-grow 剩余空间的扩展比例,默认值0。
  flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。
• item flex-shrink 剩余空间的收缩比例,默认1。
  默认情况之下，所有flex项目都可以收缩，但如果将它们设置为0时，他们不会缩小会保持原来的大小。
• item flex-basis 如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间
• item order 用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认值0。
• item align-self指定flex项目自身的对齐方式或者使用align-items来指定单个flex项目。
  auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
  flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
  stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
• box flex-direction 该属性设置在flex元素上，非flex项目上。
  row：横向从左到右排列（左对齐），默认的排列方式。
  row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  column：纵向排列。
  row-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
  注意：row和row-reverse依赖其写作模式，如果在rtl上下文方式下，他们都将分别被逆转。
• box flex-wrap nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
  wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
  wrap-reverse：反转 wrap 排列。
• box flex-flow 这个属性是flex-direction和flex-wrap属性的简写，默认值：row nowrap。
• box justify-content 水平方向项目的分布方式。
• box align-items 垂直方向单行项目的分布方式。
  flex-start： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  flex-end： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  center： 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  baseline： 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
  stretch： 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
• box align-content 垂直方向多行项目的分布方式。

[+] Grid

• grid 教程
  display: grid | inline-grid | subgrid;
  注意：
  grid盒子上column,float,clear,vertical-align都没有效果。
• box grid-template-columns grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
  grid-template-columns: 1fr 1fr 1fr;
• box grid-template-rows grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
• box grid-template-areas grid-template-areas: "<grid-area-name> | . | none | ..."
  "..."
• box grid-column-gap grid-column-gap: 10px;
• box grid-row-gap grid-row-gap: 15px;
• box grid-gap grid-gap: <grid-column-gap> <grid-row-gap>;
• box justify-items 水平方向网格内容的对齐方式。
  justify-items: start | end | center | stretch;
• box align-items 垂直方向网格内容的对齐方式。
  align-items: start | end | center | stretch;
• box justify-content 水平方向网格的分布方式。
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
• box align-content 垂直方向网格的分布方式。
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
• box grid-auto-columns 定义隐式自动创建的网格大小
  grid-template-columns: 60px 60px;
• box grid-auto-rows 定义隐式自动创建的网格大小
  grid-template-rows: 90px 90px
• box grid-auto-flow 定义隐式自动创建的网格大小
  grid-auto-flow: row | column | row dense | column dense
• box grid

  
  					grid: 200px auto / 1fr auto 1fr;
  
                      grid-template-rows: 200px auto;
                      grid-template-columns: 1fr auto 1fr;
                      grid-template-areas: none;
                      

• item grid-column-start
• item grid-column-end
• item grid-row-start
• item grid-row-end
• item grid-column
• item grid-row
• item grid-area
• item justify-self
• item align-self

[+] Box

• display:-webkit-box旧手机浏览器
  兼容处理
• -webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式。
  horizontal：设置伸缩盒对象的子元素从左到右水平排列
  vertical：设置伸缩盒对象的子元素从上到下纵向排列
  inline-axis：设置伸缩盒对象的子元素沿行轴排列
  block-axis：设置伸缩盒对象的子元素沿块轴排列
• -webkit-box-pack设置或检索伸缩盒对象的子元素的对齐方式。
  start：设置伸缩盒对象的子元素从开始位置对齐（大部分情况等同于左对齐，受）
  center：设置伸缩盒对象的子元素居中对齐
  end：设置伸缩盒对象的子元素从结束位置对齐（大部分情况等同于右对齐）
  justify：设置或伸缩盒对象的子元素两端对齐
• -webkit-box-align设置或检索伸缩盒对象的子元素的对齐方式。
  start：设置伸缩盒对象的子元素从开始位置对齐
  center：设置伸缩盒对象的子元素居中对齐
  end：设置伸缩盒对象的子元素从结束位置对齐
  baseline：设置伸缩盒对象的子元素基线对齐
  stretch：设置伸缩盒对象的子元素自适应父元素尺寸
• -webkit-box-flex使用浮点数指定对象所分配其父元素剩余空间的比例。
• -webkit-box-flex-group用整数值来定义伸缩盒对象的子元素所在的组。
• -webkit-box-ordinal-group用整数值来定义伸缩盒对象的子元素显示顺序。
• -webkit-box-direction设置或检索伸缩盒对象的子元素的排列顺序是否反转。normal | reverse
• -webkit-box-lines设置或检索伸缩盒对象的子元素是否可以换行显示。single | multiple

[-] 2D/3D

• transform 可以用【空格】（非逗号）分隔多个操作,被定义的元素必须为对外表现块级的元素.
  (*老版webkit一定要设置为块，否则内联元素的transfrom和animation无效).
  位移动画闪动问题,可提前加载为0.
• transform-origin设置或检索对象以某个原点进行转换,数值或百分比.
  如果提供两个，第一个用于横坐标，第二个用于纵坐标。
  如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
• transform:rotate旋转[n deg度数]
  transform:rotate(Ndeg) / rotateX(n) / rotateY(n) / rotateZ(n)
  transform:rotate3d(x,y,z,角度)
• transform:skew倾斜[n deg度数]
  transform:skew(Ndeg / Xdeg,Ydeg) / skewX(n) / skewY(n)
• transform:scale缩放[n倍数]
  transform:scale(x,y) / scaleX(n) / scaleY(n) / scaleZ(n)
  transform:scale3d(x,y,z)
  默认缩放以中心点为起点,不能用zoom
• transform:translate位移/滑动[n px长度]
  transform:translate(x,y) / translateX(n) / translateY(n)
  transform:translate3d:(x,y,z) 案例演示
• transform:matrix矩阵
  transform: matrix(6n)
  transform: matrix3d(16n)
• transform-style规定被嵌套元素如何在 3D 空间中显示。
  flat,子元素将不保留其 3D 位置。
  preserve-3d 子元素将保留其 3D 位置。
• backface-visibility定义元素在不面对屏幕时是否可见。
  取值背面可见/不可见visible|hidden;
  消除 transition 闪屏
  两个方法
  -webkit-transform-style: preserve-3d;
  /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
  -webkit-backface-visibility: hidden;
  /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
• perspective(n)定义 3D 转换元素的透视视图。
  取值number|none,常用500; 参考资料
• perspective-origin(x,y)规定 3D 元素的底部位置。
  50% 50%默认值,取值left,center,right,length,%

[-] 过渡

• transition过渡,简写,属性-时间-缓动-延迟
  在Chrome下，使用过渡效果transition时有时会出现页面闪动
  设置：-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;
• transition-property过渡的属性,以逗号分割多个
• transition-duration过度所需的时间
• transition-timing-function缓动线：
  linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
  ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
  ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
  cubic-bezier(, , , )： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
  自定义缓动函数 ( stylie教程 )
• transition-delay延迟时间

[-] 动画

• @keyframes定义动画
  keyframes 名称{
  from{}
  to{}
  }
  @keyframes 名称{
  0% {}
  25%{}
  75% {}
  100% {}
  }
  注意写前缀
  过渡的动画不能使用简写。例如border:8px solid #fff无效,提前定义样式颜色,并给予0宽度,改变宽度.
  利用起点设置为非0%可设置出间隔动画
  不想设置断点的数据留空会线性执行到下一个有数据位置
  设置内层img等于祖层宽度，对子层尺寸进行变化形成遮罩显示效果（需设置overflow:hidden)
• animation执行动画
  简写animation:
  name 5s ease-in 1s 8/infinite alternate paused forwards;
  名称 时间 缓动函数 延迟执行 重复次数 反向 暂停 停留在末尾状态;
  多个动画之间用【逗号】隔开，不同组动画属性的变化同时执行，可设置延迟达到队列效果，同属性例transform会覆盖
  动画帧数计算 腾讯工具 / cssanimate / liffect / 简单示例 / cssload / loading动画
• animation-name动画名称
• animation-duration时间
• animation-timing-function缓动函数
  steps(num)逐帧动画
• animation-delay延迟时间
• animation-iteration-count执行次数
• animation-directionanimation-direction:reverse / alternate / alternate-reverse （反向,奇正偶反,偶正奇反）
• animation-play-stateanimation-play-state: running / paused 运行/暂停
• animation-fill-modeanimation-fill-mode:none / forwards / backwords / both (返回初始,停留末尾,应用初始,两者)
• 移动端动画 参考资料1 | 参考资料2
  1.减少BFC属性方式
  2.减少使用阴影与渐变
  3.让动画元素脱离文档流，减少重排
  4.JS中减少layout

[-] 显示

• -webkit-text-size-adjust:100% 开启文字调整（WEBKIT默认最小只支持12px大小字）
  参考资料
• -webkit-appearance 设置或检索外观按照本地默认样式
  webkit移动表单控件重置
  

  
                       input[type="submit"],input[type="reset"],input[type="button"],button {
                        -webkit-appearance:none;
                       }
                      

• -webkit-min-device-pixel-ratio

  
  	@media only screen and (-webkit-min-device-pixel-ratio: 2),
  	    only screen and (min--moz-device-pixel-ratio: 2),
  	    only screen and (-o-min-device-pixel-ratio: 2/1),
  	    only screen and (min-device-pixel-ratio: 2){
  	    @2x.img
  	}
  

[-] 交互

• -webkit-overflow-scrolling:touch 区域快速回滚 参考资料
• -webkit-tap-highlight-color*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
• -webkit-touch-callout:nonebody,防止长按复制图片,ipad+iphone

[-] 语法规则

• @charset @charset "utf-8";
  在外部样式表文件内使用。指定该样式表使用的字符编码。
  该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。
• @import 指定导入的外部样式表
  @import url('demo.css') screen and (min-width:800px);
  该规则必须在样式表头部最先声明,并且其后的分号是必需的.IE9以前不支持.
• @supports 检测是否支持某CSS特性
  @supports (rule) or | and | not (rule)
• @media 详细资料
  @media [only/not] 媒体类型 [and (媒体特性表达式)] {你的样式}
  例：@media only/not print and (max-width: 1200px){样式代码}
  IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。
  其中部分支持max&min

[+] 打印

• @page设置页面容器的版式，方向，边空等。可增加@page name
• @page:first设置在打印时页面容器第一页使用的样式。
• @page:left设置页面容器位于装订线左边的所有页面使用的样式。
• @page:right设置页面容器位于装订线右边的所有页面使用的样式。
• page检索或指定显示对象容器时使用的页面类型。需要先用@page定义name，调用ele{page:name;}
• page-break-before检索或设置对象之前出现的页分割符。
• page-break-after检索或设置对象之后出现的页分割符。
• page-break-inside检索或设置对象容器内部出现的页分割符。

[-] Less

• Less中文文档
• @var变量 .@{mySelector}{rule..}
  @{property}:value
  background: url("@{url}/white-sand.png");
  

  ---

  @fnord: "I am fnord.";
  @var: "fnord";
  content: @@var;
  
• &:extend(.obj all)继承 .e:extend(.f,.p all) {}
• Function 函数
• Mixin 混合 随机数需在min下捕捉
  参考资料
• ~ 避免编译 ~ 特殊内容
  ~`'goTop_'+Math.round(Math.random() * 1.0e8)` 字符串连接解析
  其中包括calc()运算函数在LESS中需要避免编译
• ` JS表达式
• when 条件与循环 .mixin (@a; @b: 0) when (isnumber(@b)) { ... }
  .mixin (@a; @b: black) when (iscolor(@b)) { ... }
  循环

  
  .generate-columns(4);
  
  .generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
  }
  
  //输出
  .column-1 {
    width: 25%;
  }
  .column-2 {
    width: 50%;
  }
  .column-3 {
    width: 75%;
  }
  .column-4 {
    width: 100%;
  }
  

[-] 动画

• Stylie 自定义缓动函数预览

[-] 字体

• Fontsquirrel 字体转换
• Iconfont 字体图标
• FontSpider 中文字体提取
• CSS Font Stack 字体覆盖率查询

[-] 图像

• Gradient Scanner Open an image that contains a gradient and then draw a line over the major components of the gradient.
• Ultimate CSS Gradient Generator A powerful Photoshop-like CSS gradient editor from ColorZilla.
• BASE64 Image to BASE64.
• Color Scheme Designer Color Scheme Designer online.

[-] 边框阴影

• CSS triangle generator Generator a triangle by css border.
• Border image generator Border image generator.
• 3D Ribbon Generator Generator a Ribbon by css.
• Drop Shadows CSS3 Drop Shadows Generator.
• CSS3 Long Shadows Generator.

[-] 其它

• PXtoEM PX to EM conversion made simple.
• Screen Sizes SmartPhones/Tablets/Monitors size statistics.

[-] 文档

• Can I Use
• MDN CSS参考手册
• CSS中文参考手册
• W3C

[-] 动态

• CSS INFO
• W3cplus
• TGideas

[-] 资料

• 移动web知识库

[+]值

• 常规数 在 JavaScript 里面，数字均为双精度浮点类型double-precision 64-bit binary format IEEE 754 （也就是说一个数字的范围只能在+-2的53次方）

  ---

  十进制数：01、1
  二进制数：0b01、0B10 （只能为0和1）
  八进制数：0o777 （小于8）
  十六进制数：0x10、0XAB （0~9A~F）
  指数形式：1E2、1e2、0.1e2
• 特殊值

  属性	描述
  Number.MAX_VALUE	可表示的最大值 1.79e+308
  Number.MIN_VALUE	可表示的最小值 5e-324
  Number.NEGATIVE_INFINITY	特指“负无穷”;在溢出时返回
  Number.POSITIVE_INFINITY	特指“正无穷”;在溢出时返回
  Number.EPSILON	表示1和比最接近1且大于1的最小Number之间的差别
  Number.MIN_SAFE_INTEGER	JavaScript最小安全整数.
  Number.MAX_SAFE_INTEGER	JavaScript最大安全整数.

  0/0=NaN，正数/0=正无穷，负数/0=负无穷
  正无穷+正无穷=正无穷，负无穷+负无穷=负无穷，正无穷+负无穷=NaN
  无穷乘法操作得到无穷，无穷除法与求余操作得到NaN
• NaN 特指非数值
  任何与 NaN 进行运算的结果均为 NaN
  NaN 与自身不相等(NaN 不与任何值相等)

[-]检测

• [Number.]isNaN(val) 判断传递的值是否为 NaN
  全局isNaN会自动转换参数为数值再做判断，Number.isNaN不会自动转换
• [Number.]isFinite(val) 判断传递的值是否为有限数字
  全局的isFinite会自动转换参数为数值再作判断，Number.isFinite不会自动转换
• Number.isInteger(val) 判断传递的值是否为整数
  IE不支持，需使用polyfill
• Number.isSafeInteger(val) 判断传递的值是否为安全整数
  IE不支持，需使用polyfill

[-]转换

• (num).toString([rad]) 指定进制，转为字符串，默认为10进制，范围[2~36]。
• [Number.]parseInt(val,[rad]) 根据给定的进制数把一个字符串解析成整数
  自动判断进制，默认转换进制为10进制
  

  value	结果
  空字符串	NaN
  第一个非空字符不是数值或负号	NaN
  第一个非空字符是数值，遇到非数值时停止解析	number

• [Number.]parseFloat(val) 把字符串参数解析成浮点数
  第一个小数点有效，第二个无效

[-]表示

• (num).toFixed([n]) 指定小数点后位数，小数位数[0 ~ 20]
  会四舍五入，返回的是一个字符串
• (num).toExponential([n]) 使用指数计数法，范围[0~20]，返回的是一个字符串。
• (num).toPrecision([n]) 以指定的精度返回该数值对象的字符串表示
  把数字格式化为指定的长度。N为显示位数，自动选择toFixed() toExponential(N)两者之一。
• (num).toLocaleString([local],[opt]) 返回这个数字在特定语言环境下的表示字符串 参考资料
  仅浏览器中有效
  $num.toLocaleString('zh-u-nu-hanidec') //中文数字
  x.toLocaleString('cn-ZH',{
  style:'currency',
  currency:'CNY',
  currencyDisplay:'symbol'
  })
  en-US、en-JP
  USD、JPY...

[-]Math

• Math.abs(x) 返回 x 的绝对值
• Math.sign(x) 判断一个数到底是正数、负数、还是零。

  ---

  参数为正数，返回+1；
  参数为负数，返回-1；
  参数为 0，返回0；
  参数为-0，返回-0;
  其他值，返回NaN。
• Math.random() 返回 0 ~ 1 之间的随机数(大于等于 0.0且小于1.0的伪随机 double 值)
  1.随机颜色16进制：Math.floor( Math.random() * 16777215 ).toString( 16 )
  2.2个值之间的随机值：function random(min,max){return min + (max-min)*Math.random();}
  参考资料
• Math.max/min(x,y,z..n) 返回 x,y,z,...,n 中的最高/低值
  参数中最大的值。如果没有参数，则返回 -Infinity。如果有某个参数为 NaN，或是不能转换成数字的非数字值，则返回 NaN。
• Math.ceil/floor/round/trunc(x) 对数进行上/下舍入/四舍五入/返回整数部分
• Math.根

  函数	描述
  Math.SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）
  Math.SQRT2	返回 2 的平方根（约等于 1.414）
  Math.sqrt(x)	返回一个数的平方根
  Math.cbrt	返回一个数的立方根
  Math.hypot(x,y..)	返回所有参数的平方和的平方根

• Math.指数对数

  函数	描述
  Math.E	返回算术常量 e，即自然对数的底数（约等于2.718）
  Math.LN2	返回 2 的自然对数（约等于0.693）
  Math.LN10	返回 10 的自然对数（约等于2.302）
  Math.LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）
  Math.LOG10E	返回以 10 为底的 e 的对数（约等于0.434）
  Math.pow(x,y)	返回x的y次幂
  Math.exp(x)	返回E(x)的指数
  Math.log(x)	返回数的自然对数（底为e）
  Math.log2(x)	返回一个数字以2为底的对数
  Math.log10(x)	返回以10为底的对数
  Math.expm1(x)	返回e(x)-1
  Math.log1p(x)	返回一个数字加1后的自然对数，即log(x+1)

• Math.三角函数

  函数	描述
  Math.PI	返回圆周率（约等于3.14159）
  Math.sin(π)	返回数的正弦
  Math.cos(π)	返回数的余弦
  Math.tan(π)	返回角的正切
  Math.asin(x)	返回数的反正弦值
  Math.acos(x)	返回数的反余弦值
  Math.atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值
  Math.atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）
  Math.sinh(x)	返回数的双曲正弦值
  Math.cosh(x)	返回数的双曲余弦值
  Math.tanh(x)	返回数的双曲正切值
  Math.asinh(x)	返回数的反双曲正弦值
  Math.acosh(x)	返回数的反双曲余弦值
  Math.atanh(x)	返回数的反双曲正切值

• Math.clz32/(x) 返回一个数的 32 位无符号整数形式有多少个前导 0
• Math.imul(x,y) 返回两个数以 32 位带符号整数形式相乘的结果
  
• Math.fround(x) 方法返回一个数的32位单精度浮点数形式

[-]Date

• new Date([time..]) 返回：日期对象

  ---

  无参数时：创建计算机当前时间的日期对象
  var date = new Date();
  Sat Oct 07 2017 01:20:24 GMT+0800 (中国标准时间)

  ---

  有参数时：创建指定时间的日期对象
  var date = new Date(2015, 5, 19, 20, 15, 30, 123);
  var date = new Date(1435146562875);
  当前时间是浏览器从本机操作系统获取的时间，所以不一定准确，因为用户可以把当前时间设定为任何值。
• date.getTime(){timestamp}时间戳，等同于date.valueOf()
• date.getFullYear(){2017}年份
• date.getMonth(){0~11}月份，范围0~11
• date.getDate(){1~31}日期
• date.getDay(){1~7}星期
• date.getHours(){0~24}时，24小时制
• date.getMinutes(){0~60}分
• date.getSeconds(){0~60}秒
• date.getMilliseconds(){0~1000}毫秒
• data.set... 设置日期对象
• date.toString() Sat Oct 07 2017 01:36:58 GMT+0800 (中国标准时间)
• date.toLocaleString() 2017/10/7 上午1:33:06
• date.toUTCString() Fri, 06 Oct 2017 17:33:06 GMT
• Date.parse(ISO){timestamp} 解析一个符合ISO 8601格式的字符串，并返回对应时间戳
  var d = Date.parse('2015-06-24T19:49:22.875+08:00');
  d; // 1435146562875
• Date.now(){timestamp} 当前时间戳，IE8不支持

[+]构建

• 'str' 字面量方法
  `\u{xxxxx}` unicode编码
• new String() 尽量避免使用包装对象
• `__ ${varname} __` 模板字符串，支持多行
• str.length 字符串的长度。
  需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果。

[-]转换

• str.toUpperCase() 返回值：新字符串
  原对象：不变
  转为大写
• str.toLowerCase() 返回值：新字符串
  原对象：不变
  转为小写
• String.raw(str) 会对斜杠进行转义

[-]查找

• str.indexOf(val,[i]) 参数：正向查找指定值,i为起始索引
  返回值：第一个出现的索引位置；如查找不到则返回-1
• str.lastIndexOf(val,[i]) 参数：逆向查找指定值,i为起始索引
  返回值：最后一个出现的索引位置；如查找不到则返回-1
• str.includes(str,[i]) 返回布尔值，表示是否找到了参数字符串
  第二个参数，表示开始搜索的位置
• str.startsWith(str,[i]) 返回布尔值，表示参数字符串是否在原字符串的头部。
  第二个参数，表示开始搜索的位置
• str.endsWidth(str,[i]) 返回布尔值，表示参数字符串是否在原字符串的尾部。
  第二个参数表示针对前n个字符

[-]匹配

• str.split(/reg/,[len]) 参数1：字符串或正则表达式
  参数2：最大的数组长度
  返回值：数组
  原对象：不变
  把字符串按指定符号或正则分割为字符串数组
• str.search(/reg/) 参数：字符串/正则表达式
  返回：第一个子串的索引/-1
  始终从头开始找，找到一个即返回，正则无需全局设置
• str.match(/reg/g) 参数：字符串/正则表达式
  返回：子串数组/null
  如果传入非正则，会隐式地转换为正则表达式；
  如果没有参数，会返回空数组；
  数组：
  1.进行匹配完整的字符串
  2.圆括号捕获的结果
  3.index: 0，匹配结果在原字符串中的索引
  4.input: "原字符串"
  如果没有匹配到，返回null
• str.replace(/reg/g,val|fn) 参数1：需要替换的字符或正则表达式，没有全局标识时只替换一次
  参数2：替换成的字符串或生成字符串的函数，用return返回
  返回值：新的字符串
  原对象：不变

  ---

  回调函数参数详情

[-]操作

• str.concat(str,..) 参数：串联一个或更多字符串
  返回值：新的字符串
  原对象：不变。
• str.slice[n,m) 参数：起始位置，末尾位置（不包含）
  返回值：被截取得到的新字符串。
  原对象：不变。
  当只有1个参数时，则为起始位置到末尾全部，且包含末尾元素（即m=arr.length）。
  n和m可为负值，-1 指最后一个元素，-2 指倒数第二个元素。
• str.substring[n,m) 参数：起始位置，末尾位置（不包含），不接受负数
  返回值：被截取得到的新字符串。
  原对象：不变。
  
• str.substr(n,[len]) 参数：开始提取字符的位置（如为负数，则用len+n），提取的字符数
  返回值：新字符串
  原对象：不变
  参考资料
• str.trim() 返回值：新字符串
  原对象：不变
  移除字符串的两端删除空白字符。
  空白字符包括所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR）。
• str.repeat(n) 参数：重复次数(包含原)
  返回值：新的字符串
  原对象：不变
  会向下取整，当为0时变为空字符串
• str.charAt(i) 参数：查找的索引位置
  返回值：索引上的字符

[-]JSON

• json 概念：
  它是一种表示结构化数据的形式，JSON是一个格式化的字符串，文件格式后缀为.json

  ---

  语法：
  简单值：字符串、数值、布尔值、null，不支持undefined
  对象：一组无序的键值对
  数组：一组有序的值的列表，可以通过索引来访问

  ---

  JSON与JS的区别：
  1.对象：JSON字符串必须使用双引号（单引号会导致语法错误），且对象的属性必须加双引号；
  2.对象和数组：最后一个属性后不能有逗号
  3.数值：禁止出现前导零，如果有小数点，则后面至少跟着一位数字
  参考资料
• JSON.stringify(obj,[fn,space]) js对象 -> json字符串 参考资料

  ---

  参数1：传入的对象。
  如有键值为函数时，会排除该成员。我们可以在转换前将函数用.toString()方法转换为字符串来避免以上问题的发生。
  如有键值为日期对象时，会转为字符串。

  ---

  参数2：用于转换结果的函数或数组
  如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为null或者未提供，则对象所有的属性都会被序列化；

  ---

  参数3：缩进空格
  指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串(字符串的前十个字母)，该字符串将被作为空格；如果该参数没有提供（或者为null）将没有空格。
• JSON.parse(json,[fn(key,val)]) json字符串 -> js对象
  转换函数需返回value值。
  参考资料
• obj.toJSON() JS对象中添加toJSON()方法，自定义过滤一些数据，返回新的对象
  注意设置return值

[-]URI

• encodeURI(uri) 参数：完整URI字符串
  返回：新字符串，表示提供的字符串编码为统一资源标识符
  不会编码：&,+,=
• encodeURIComponent(uri) 除了字母、数字、(、)、.、!、~、*、'、-和_之外的所有字符均会被转移
• decodeURI(uri) 解码某个编码的 URI。
• decodeURIComponent(uri) 解码一个编码的 URI 组件。

[-]Unicode

• str.charCodeAt(i) 参数：查找的索引位置
  返回值：unicode码点(十进制)
• str.codePointAt(i) 参数：查找的索引位置
  返回值：unicode码点（十进制，需自行转16进制）
  支持大于2个字节的Uniode编码
• String.fromCharCode(uni..) 参数：unicode码点
  返回值：字符串
• String.fromCodePoint(uni..) 参数：unicode码点
  返回值：字符串
  支持大于2个字节的Uniode编码
• str.normalize([NFC]) 按指定Unicode正规形式将当前字符串正规化。
  参数：四种 Unicode 正规形式 "NFC", "NFD", "NFKC", 以及 "NFKD" 其中的一个, 默认值为 "NFC".
  参考资料

[-]正则表达式

• /exp/flags 正则表达式：/exp/flags
  RegExp对象：new RegExp('exp',flags)
  RegExp对象：new RegExp(/exp/flags)
  注意，如果使用第二种写法，因为字符串的转义问题，字符串的两个\\实际上是一个\。

  ---

  参考资料1 | 参考资料2

  ---

  修饰符：
  i：忽略大小写。
  g：全局匹配。
  m：多行模式。
  y：执行“粘性”搜索,匹配从目标字符串的当前位置开始。
  u：正确处理大于\uFFFF的 Unicode 字符（点.字符在正则表达式中，含义是除了换行符以外的任意单个字符。对于码点大于0xFFFF的 Unicode 字符，点字符不能识别，必须加上u修饰符。）
  s：行终止符
• reg.exec(str) 返回：数组/null
  参考资料
• reg.test(str) 返回：true/false

[+]构建

• [val,...,] 数组直接量的语法允许有可选的结尾的逗号
  即[1,2,]长度为2
• new Array([len]) var arr = new Array(val1,val2,...)
  var arr = new Array(len) //长度为len，但并数组内无任何值
• Array.of(val..) Array.of() 和 Array 构造函数之间的区别在于处理整数参数：
  Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个包含 7 个 undefined 元素的数组。且不需要new运算符。
  参考资料

[+]属性

• arr.constructor 返回值：Array
• arr.entries() 返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
• arr.length 返回值：数组的长度（0 到 232-1 的整数）。
  你可以设置 length 属性的值来截断任何数组。当通过改变length属性值来扩展数组时，实际元素的数目将会增加。
• arr[index] 返回值：指定索引处数组的值
  如果是字符串下标，不会体现在数组上，需要指定下标键打印，如果是索引下标，则可以直接打印

[-]检测

• Array.isArray(arr) 返回值：布尔值，是否为数组（ES5）
  参考资料

[-]转换

• ...[argArr] 返回值：参数序列
  扩展运算符，好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列，主要用于函数调用
  如果扩展运算符后面是一个空数组，则不产生任何效果。

  ---

  ES5写法：fn.apply(null,argArr)
  求最大值：Math.max(...argArr)
  参考资料
• Array.from(o,[fn],[fthis]) 从一个类似数组或可迭代对象中创建一个新的数组实例。
  参数：包括arguments，set，map，DOM元素集，字符串等 | 回调函数(当前值val)并返回一个新的替换的值 | 回调函数的this指向
  返回：新数组
  原对象：不变。
  参考资料1 | 参考资料2

  ---

  Array.from(arrayLike,callback(val),this)
  callback -> return replace_val

  ---

  扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。如：Array.from({ length: 3 });
  
  Array.from()的另一个应用是，将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种 Unicode 字符，可以避免 JavaScript 将大于\uFFFF的 Unicode 字符，算作两个字符的 bug。
• arr.join(symbol) 使用指定符号把数组元素拼接为字符串
  参数：符号
  返回：新字符串
  原对象：不变。

  ---

  如果元素是undefined 或者null，则会转化成空字符串
  如果缺省符号，数组元素用逗号分隔

[-]查找

• arr.indexOf(val,[i]) 参数：正向查找指定值,i为起始索引
  返回值：第一个出现的索引位置；如查找不到则返回-1

  ---

  默认起始索引为0，如为-2则从倒数第二个元素开始查找。
  该方法执行严格相等判断
• arr.lastIndexOf(val,[i]) 参数：逆向查找指定值,i为起始索引
  返回值：第一个出现的索引位置；如查找不到则返回-1

  ---

  默认起始索引为arr.length - 1，从数组末尾往前开始查找。
  该方法执行严格相等判断
• arr.includes(val,[i]) 返回值：true/false
  参数：从i索引处开始查找val,默认为 0。
  如果i为负值，则按升序从array.length + fromIndex 的索引开始搜索。
  指定了i的时候升序查找到末端不会再从头查找。
• arr.find(fn,[fthis]) 查找数组中满足提供的测试函数的第一个元素的值
  返回：第一个满足的值 | undefined

  ---

  arr.find(callback(val,i,arr),this)
  callback -> return val

  ---

  参考资料
• arr.findIndex(fn,[fthis]) 返回符合测试条件的第一个数组元素索引
  返回：第一个满足的值的索引 | -1

  ---

  arr.find(callback(val,i,arr),this)
  callback -> return true/false

  ---

  参考资料

[-]排序

• arr.sort([fn]) 对数组进行排序。
  参数：空（如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序） | 指定按某种顺序进行排列的函数
  返回：改变后的数组。
  原对象：改变。
  如果数组包含undefined元素，它们会被排到数组的尾部。

  ---

  compareFunction(a,b)
  如return < 0，a排在b之前；
  如return > 0，a排在b之后；
  如return = 0，两个参数相等。
• arr.reverse() 反转当前数组排序
  参数：无
  返回：改变后的数组
  原对象：改变

[-]添加

• arr.push(val...) 参数：在数组末端添加若干个元素
  返回值：数组的新长度。
  原数组：改变。

  ---

  该方法和 call() 或 apply() 一起使用时，可应用在类似数组的对象上。push 方法根据 length 属性来决定从哪里开始插入给定的值。如果 length 不能被转成一个数值，则插入的元素索引为 0，包括 length 不存在时。当 length 不存在时，将会创建它。
  唯一的原生类数组（array-like）对象是 Strings，尽管如此，它们并不适用该方法，因为字符串是不可改变的。
• arr.unshift(val...) 参数：在数组最前方添加若干个元素
  返回值：数组的新长度。
  原数组：改变。

  ---

  这个方法能够通过 call 或 apply 方法作用于类似数组的对象上。不过对于没有 length 属性（代表从0开始的一系列连续的数字属性的最后一个）的对象，调用该方法可能没有任何意义。
• arr.splice(i,0,val...) 参数：在数组指定的i索引位置添加若干个元素
  返回值：空数组。
  原数组：改变。

[-]移除

• arr.pop() 参数：移除数组的最后一个元素，无参数。
  返回值：被删除的元素。
  原数组：改变。

  ---

  该方法和 call() 或 apply() 一起使用时，可应用在类似数组的对象上。pop方法根据 length属性来确定最后一个元素的位置。如果不包含length属性或length属性不能被转成一个数值，会将length置为0，并返回undefined。
• arr.shift() 参数：移除数组的第一个元素，无参数。
  返回值：被删除的元素。
  原数组：改变。

  ---

  这个方法能够通过 call 或 apply 方法作用于类似数组的对象上。但是对于没有 length 属性（从0开始的一系列连续的数字属性的最后一个）的对象，调用该方法可能没有任何意义。
• arr.splice(i,[delnum]) 参数：在数组指定的i索引位置删除指定个数
  返回值：被删除的元素组成的数组。
  原数组：改变。
  delnum=空：如第2个参数缺省，则删除从索引位置起到数组末尾的全部元素。
  delnum=1：如第2个参数存在，且=1，则相当于删除索引位置的元素。
  delnum=n：如第2个参数存在，且>1，删除arr[i]~arr[i+n-1]的元素。

[-]替换

• arr.fill(val,[n,m)) 参数：用一个固定值替换数组的元素。
  返回值：新的数组。
  原数组：改变。
  包含n位置，不包含m位置。默认值n=0,m=length
• arr.copyWithin(i,[n,m)) 参数：复制（索引n ~ 索引m-1）的元素，替换（索引i ~ 索引i+m-n-1）的元素。
  返回值：新的数组。
  原数组：改变。
  复制选取的部分包含n，但不包含m。如果m不定义，即到数组末端。

  ---

  i 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算
  如果 n 被忽略，copyWithin 将会从0开始复制。
  如果 m 被忽略，copyWithin 将会复制到 arr.length。
  参考资料
• arr.splice(i,[delnum],val...) 参数：在数组指定的i索引位置删除和添加若干个元素（用新的替换旧的）
  返回值：被删除的元素组成的数组。
  原数组：改变。
  delnum=空：如第2个参数缺省，则删除从索引位置起到数组末尾的全部元素。
  delnum=1：如第2个参数存在，且=1，则相当于删除索引位置的元素。
  delnum=n：如第2个参数存在，且>1，删除arr[i]~arr[i+n-1]的元素。

[-]操作

• arr.concat(val...) 参数：串联一个新的数组元素或数组内的元素（当串联的是一个新数组时，只取数组里的值）。
  返回：一个新的数组。
  原数组：不变。
• arr.slice[n,m) 参数：起始位置，末尾位置（不包含）
  返回值：被截取得到的新数组。
  原数组：不变。
  当只有1个参数时，则为起始位置到末尾全部，且包含末尾元素（即m=arr.length）。
  n和m可为负值，-1 指最后一个元素，-2 指倒数第二个元素。

[-]遍历

• arr.forEach(fn(val,i),[fthis]) 对数组的每个元素执行一次提供的函数
  返回值：无
  原数组：不变
  回调返回：无
  必定会每个均遍历一次，无法用continue或break退出

  ---

  参考资料
  如果使用箭头函数表达式传入函数参数，thisArg 参数会被忽略，因为箭头函数在词法上绑定了this值。
  如果数组在迭代时被修改了，则其他元素会被跳过
• arr.map(fn(val,i),[fthis]) 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
  返回值：新数组
  原数组：不变
  回调返回：新值
  传入的是函数名或匿名函数，不是一个执行的函数。
  callback需返回一个新val，注意不能直接用parseInt方法，具体见参考资料 参考资料
• arr.filter(fn(val,i),[fthis]) 检测数值元素，并返回符合条件所有元素的数组。
  返回值：新数组
  原数组：不变
  回调返回：true/false
  和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
  参考资料
• arr.every(fn(val,i),[fthis]) 测试数组的所有元素是否都通过了指定函数的测试
  返回值：true/false
  原数组：不变
  回调返回：true/false

  ---

  回调中请指定所有返回的true/false情况
• arr.some(fn(val,i),[fthis]) 测试数组中的某些元素是否通过由提供的函数实现的测试
  返回值：true/false
  原数组：不变
  回调返回：true/false

  ---

[-]递归

• arr.reduce(fn(total,val,i),[init]) 将数组中的元素通过回调函数累计处理
  返回值：最终累计处理结果
  原数组：不变
  回调返回：新的total值（total与val的规则）

  ---

  total:累加器累加回调的返回值; 它是上一次调用回调时返回的累积值，或初始值
  val:当前正在处理的元素
  i:当前处理元素的索引号；如果提供了初始值，索引号为0开始，否则索引为1开始
  init:用作第一个调用callback的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。
• arr.reduceRight(fn(total,val,i),[init]) 从右向左递归。

[-]类数组对象

• arguments 函数内部的arguments对象
  不能直接使用数组原型方法，但是可以用call实现
• NodeList dom遍历方法返回的节点列表

[+]构建

• new Set([arr]) Set是一组key的集合，但不存储value，且key不能重复。
  [...$set] 解构成一个数组
• new Map([[val1,val2]]) 初始化Map需要一个二维数组
  map的键可以为任意数据类型，object只能为字符串
  [...$map] 解构成一个二维数组

[-]属性

• set/map.size 返回值：数值
  返回实例的长度

[-]增删改查

• set.add(key) 返回值：set本身
  添加一个值
• map.set(key,val) 返回值：map本身
  添加新的key-value键值对
• map.get(key) 返回值：value | undefined
  取key的值
• set/map.has(key) 返回值：布尔
  该值是否为实例的成员
• set/map.delete(key) 返回值：布尔
  删除一个值
• set/map.clear() 返回值：无
  清除所有成员

[-]遍历

• set/map.keys() 返回键名的遍历器
  set/map.keys()返回的是遍历器，而对象的Object.keys(obj)返回的是数组
• set/map.values() 返回键值的遍历器
• set/map.entries() 返回所有成员的遍历器
• set/map.forEach(fn(val,key,sm)) 使用回调函数遍历每个成员
  Set 结构的键名就是键值，因此第一个参数与第二个参数的值永远都是一样的(并非像数组是索引号)

[-]Buffer

[-]Stream

[-]TypedArray

• TypedArray 参考资料1 | 参考资料2 | 参考资料3

[+]构建与调用

• function name(arg){} 函数声明
  1.使用函数声明时，会提升优先级（一等公民），不包括函数表达式。
  2.如果同一个函数被多次声明，后面的声明就会覆盖前面的声明。
  3.函数参数是拷贝值传递：对于基本类型，不会修改原值；对于引用类型，拷贝的是指针，如修改原数据属性会改变原数据，如替换整个目标则不修改原数据，此外始终不改变原指针的指向。参考资料
  4.函数可以被递归，函数可以调用其本身。
  5.ES6中块级作用域中声明的函数，在块级作用域之外不可引用
• var handle = function [name](arg){} 函数表达式
  1.函数表达式是一个匿名函数
  2.当定义name时，此时可以用name在函数内部指代函数本身，但在函数体外部无效
  3.函数表达式，不会被提升。
  4.如果同时采用function命令和赋值语句声明同一个函数，最后总是采用赋值语句的定义。 参考资料
  
• (x) => x*x 箭头函数
  1.不可以当做构造函数，即不能使用new操作符
  2.不可以使用arguments、super、new.target，均指向外层函数的对应变量
  3.不可以使用yield命令，因此箭头函数不能用作 Generator 函数
  4.没有自己的this，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，且固定不可变，即使使用call也无法修改，更多的可在构造函数或闭包内使用，则可替代普通函数需要用that指代this。
  this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。所以call的绑定也是无效，但上层的普通函数的call绑定有效。
  5.没有prototype属性，也不能使用yield关键字

  ---

  例：
  1.当只有一行直接返回变量的处理时，x=>x*x，返回x的平方
  2.当只有一行且无需返回值时，x=>void dosomething
  3.当有多个参数或多条语句时，需添加括号和花括号，(x,y)=>{dosomething / return xx}
• var handle = new Function('arg..','fnbody') Function构造函数构建
  1.此形式构建的是匿名函数
  2.参数为字符串
  3.只有最后一个参数会被当做函数体，如果只有一个参数，该参数就是函数体。
• IIFE ( function(){}() );
  ( function(){} )();
  [ function(){}() ];
  
  ~ function() {}();
  ! function() {}();
  + function() {}();
  - function() {}();
  
  delete function() {}();
  typeof function() {}();
  void function() {}();
  new function() {}();
  new function() {};
  
  var f = function() {}();
  
  1, function() {}();
  1 ^ function() {}();
  1 > function() {}();

[+]参数

• (arg=x) 一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域 参考资料
• ...args rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
  rest 参数之后不能再有其他参数（即只能是最后一个参数）
• arguments 函数的实参，一个类数组对象。
  1.在JavaScript中，函数参数的默认值是undefined
  2.严格模式下为只读对象，不允许修改。
  3.箭头函数不存在(浏览器)

  对象值	描述
  arguments[0]	第一个参数名字
  arguments.length	参数的个数
  arguments.callee	主体函数本身，拥有这个参数对象的函数 (严格模式禁用)

• fn.length 返回函数预期传入的参数个数，即函数定义之中的参数个数(定义之时的个数)
  指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。

[+]内部

• 理论 作用域：静态/词法作用域，取决于函数声明时所在的作用域，与其运行时所在的作用域无关。

  ---

  执行上下文栈：变量对象、作用域链、this
  1.变量对象：函数的所有形参、函数声明、变量声明（如果变量名称与声明的形参或函数相同，则变量声明不会干扰已经存在的这类属性）参考资料
  变量对象为进入执行上下文阶段，在执行阶段，可能被重新赋值。
  2.作用域链：[VO=>AO压入栈顶,全局作用域链]

  ---

  闭包：参考资料
• this this关键字总是指向函数所在的当前对象

  ---

  普通函数：严格模式(undefined)、严格模式(全局对象)
  构造函数：对象的实例
  对象方法：对象本身
  call/apply/bind：绑定的对象
  箭头函数：函数所在的块的this
  从ES规范解读this
• return [val] 如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined.
  尾调用优化

[-]方法

• fn.call(obj,arg) fn.call(作用域，[传递参数])
  apply与call均让函数作用于特定作用域,call必须明确传入每一个参数。
  apply()把参数打包成Array再传入；call()把参数按顺序传入
  对普通函数调用，我们通常把this绑定为null。
  在非严格模式下，如果参数为空、null和undefined，则默认传入全局对象。
• fn.apply(obj,[argArr]) fn.apply(作用域，[传递参数Arr])
• fn.bind(obj) 返回由指定的this值和初始化参数改造的原函数拷贝 参考资料
• fn.toString() 返回一个表示当前函数源代码的字符串，注释也可以返回

[-]Promise

• new Promise(fn(resolve,reject)) 参考资料
  Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
  resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
  Promise 新建后就会立即执行。
• pms.then(fn(val)]) Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
• pms.catch(fn(error)) Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。
  Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。
  跟传统的try/catch代码块不同的是，如果没有使用catch方法指定错误处理的回调函数，Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。
• pms.finally(fn) 不管 Promise 对象最后状态如何，都会执行的操作
• Promise.all(arr) const p = Promise.all([p1, p2, p3]);
  用于：多个promise实例全部完成时
  Promise.all方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。
  只有数组里的promise实例状态都变为fulfilled，p的状态才会变成fulfilled，只要有一个rejected，则p的状态也会变为rejected
• Promise.race(arr) 用于：任意promise实例完成时
• Promise.resolve(o) 将需要的对象转为promise对象
  如果为普通对象，将直接改变状态至resolved，且传递参数至then
  如果没有任何参数时，立即resolve的 Promise 对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。
• Promise.reject(o) Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续then方法的第2个函数的参数
• Promise.try(o) 参考资料

[-]Iterable

• [...iterable] 只要具有 Iterator 接口的对象，都可以使用扩展运算符
  [...str]
  [...arr|TypedArray]
  [...set|map]
  [...arguments]
  [...nodeList]
• for(.. of iterable) for(let key of iterable){}
  任何部署了Interator接口的数据都可以用for..of来遍历
  String、Array、TypedArray、Map、Set、函数arguments对象、NodeList对象都内置Interator接口，因为它们的原型对象都有一个 Symbol.iterator 方法。

  ---

  数组使用for .. of 直接取值更快捷
• for await(.. of iterable) 遍历异步的 Iterator 接口

[-]Iterator

• o.[Symbol.iterator] 一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”
  Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。
  执行这个函数，就会返回一个遍历器。
  给对象自定义一个遍历器

  ---

  由于 Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口。
• ite.next([val]) 每次调用next方法，都会返回一个代表当前成员的信息对象，具有value和done两个属性。
• ite.return([val]) 如果一个对象在完成遍历前，需要清理或释放资源，就可以部署return方法
  
• ite.throw([val]) next、throw、return的共同点

[-]Generator

• function* {ite} 执行 Generator 函数会返回一个遍历器对象

  ---

  这个遍历器是 Generator 函数的实例，也继承了 Generator 函数的prototype对象上的方法
  Generator的this与new
  var g = Generator.call(Generator.prototype)
  此时Generator函数中的this指向实例g
  var F() = {return Generator.call(Generator.prototype)}
  则可通过 var f = new F() 来生成实例
• yield[*] 暂停标志，遍历器每执行一次next则执行当前yield。

  ---

  yield表达式本身没有返回值，或者说总是返回undefined。
  next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值，作为当下一个yield依赖上一个yield时使用。

  ---

  yield表达式后面执行一个函数，函数的返回值，相当于生成器运行了该步骤并返回给遍历器对象value的值。 Generator 函数也可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数。

  ---

  在Generator函数内部，调用另一个 Generator 函数，需要使用yield* Generator()
  会一次执行完被代理对象的全部步骤
• return 结束标志

[-]Async Function

• async function {promise} async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
• await promise await表示紧跟在后面的表达式需要等待结果
  async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）
• return async函数内部return语句返回的值，会成为then方法回调函数的参数

[-]Async Iterator

• o.[Symbol.asyncIterator] asyncIterator是一个异步遍历器
• aite.next() {promise} 调用next方法以后，返回一个 Promise 对象。
  因此，可以使用then方法指定，这个 Promise 对象的状态变为resolve以后的回调函数。
  回调函数的参数，则是一个具有value和done两个属性的对象，这个跟同步遍历器是一样的。

[-]Async Generator

• async function* {aite} 返回一个异步遍历器对象
• yield* yield*语句也可以跟一个异步遍历器

[+]构建

• {key:val,[$key]:val...} 字面量创建方法
  对象有时也被叫作关联数组。对象的属性之间用逗号分隔，最后一个属性后面可以加逗号，也可以不加。
  对象的所有键名都是字符串，可以不加引号。但如果不符合表示名的条件，则需要加引号。参考资料

  ---

  如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量，会影响到其他所有变量。
  但如果取消某一个变量对于原对象的引用，不会影响到另一个变量。
  这种引用只局限于对象，对于原始类型的数据则是传值引用，也就是说，都是值的拷贝。
  故在设置一个新的对象继承旧对象时，不能直接通过new.prototype = old.prototype进行设置，否则对new原型的任何修改，将直接会影响旧的原型对象。

  ---

  如果行首是大括号，一律解释为语句（即代码块）。如果要解释为表达式（即对象），必须在大括号前加上圆括号。

  ---

  如果读取一个不存在的键，会返回undefined，而不是报错。
  但不能对一个未声明的对象直接指定属性，这样会报错
• new Fn() 用构造函数创建
  

  
  							function Obj(opts){
  								this.key = value
  							}
  							var o = new Obj(opts)
  						

  new命令总是返回一个对象，要么是实例对象，要么是return语句指定的对象。
  new 构造函数时，this指向新创建的对象，并默认返回this，也就是说，不需要在最后写return this
  函数内部可以使用new.target属性。如果当前函数是new命令调用，new.target指向当前函数，否则为undefined
• new Object() var obj = new Object();
  var obj = Object.creat(Object.prototype)

  ---

  obj.key = value;
  从Object原型创建

[+]属性表示

• obj.key 一个对象的属性可以被解释成一个附加到对象上的变量，使用.表示法时必须是一个合法的标识符 参考资料
• obj['key'] 对象的属性也可以通过方括号访问或者设置，对象有时也被叫作关联数组, 因为每个属性都有一个用于访问它的字符串值。
  一个对象的属性名可以是任何有效的 JavaScript 字符串，或者可以被转换为字符串的任何类型，包括空字符串。
  当属性含空格、关键字时，只能用中括号表示
• obj[$key] 当属性为变量时，只能用中括号表示

[-]属性设置

• {key:val} 定义一个属性，值可以为任意类型
  对于一个已经存在的对象，可用obj.key = val 来进行设置
• {get|set key([x]){}} 使用对象初始化器定义getter/setter方法
  getter方法必须是无参数的，setter方法只接受一个参数
  对于已经存在的对象，则需使用Object.defineProperties
• Object.defineProperty(obj,key,desc) 在一个对象上定义一个新属性或者修改现有属性， 并返回这个对象。参考资料
• Object.defineProperties(obj,{key:{desc}}) 在一个对象上定义新的属性或修改现有属性， 并返回这个对象。 参考资料
• delete obj.key delete 操作符删除一个不是继承而来的属性
  删除成功后返回true，注意，删除一个不存在的属性，delete不报错，而且返回true。
  只有一种情况，delete命令会返回false，那就是该属性存在，且不得删除。

[+]属性描述对象

• Object.getOwnPropertyDescriptor(obj,key) 返回指定对象上一个自有属性对应的属性描述符。 参考资料
  注意，Object.getOwnPropertyDescriptor方法只能用于对象自身的属性，不能用于继承的属性
• Object.getOwnPropertyDescriptors(obj) 获取一个对象的所有自身属性的描述符 参考资料
• configurable false|true
  表示该属性的描述对象是否可以修改(属性是否可被删除)。
  数据描述符和存取描述符均具有此键值
• enumerable false|true
  表示该属性是否可枚举
  数据描述符和存取描述符均具有此键值
• value undefined|val
  该属性对应的值
  数据描述符具有此键值
• writable false|true
  表示属性值是否可改变
  数据描述符具有此键值
• get undefined|fn
  存放一个函数，表示该属性的取值函数（getter）
  存取描述符具有此键值
• set undefined|fn
  存放一个函数，表示该属性的存值函数（setter）
  存取描述符具有此键值

[-]属性判断

• obj.hasOwnProperty(key) 检测对象是否拥有某一属性（非原型继承）
  返回值：布尔
• obj.propertyIsEnumerable(key) 判断某个属性是否可枚举

[-]属性枚举

• for $key in obj 依次访问一个 [对象及其原型链] 中所有 [可枚举的属性]
• Object.keys(obj) 返回 [对象] 自身（不包括原型中）的所有 [可枚举的属性] 的数组
• Object.getOwnPropertyNames(obj) 返回 [对象] 自身（不包括继承的）的所有 [属性] 的数组
• Object.getOwnPropertySymbols(obj) 返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。
• Reflect.ownKeys(obj) 返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

  ---

  参考资料
  首先遍历所有数值键，按照数值升序排列。
  其次遍历所有字符串键，按照加入时间升序排列。
  最后遍历所有 Symbol 键，按照加入时间升序排列。
  

[+]状态控制

• Object.preventExtensions(obj) 防止对象扩展
• Object.isExtensible(obj) 判断对象是否可扩展
• Object.seal(obj) 禁止对象配置，既无法添加新属性，也无法删除旧属性，但并不影响修改某个属性的值
• Object.isSealed(obj) 判断一个对象是否可配置
• Object.freeze(obj) 冻结一个对象，无法添加新属性、无法删除旧属性、也无法改变属性的值
  冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说，这个对象永远是不可变的。
• Object.isFrozen(obj) 判断一个对象是否被冻结

[+]其它

• Object.values(obj) 返回一个对象的值的数组
• Object.entries(obj) 返回一个对象的键值的二维数组
• Object.assign(to,from...) 将所有可枚举属性的值从一个或多个源对象复制到目标对象，将返回目标对象。
  1.浅拷贝，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用
  2.只会拷贝源对象自身的并且可枚举的属性到目标对象
  Object.assign 不会跳过那些值为 null 或 undefined 的源对象
  参考资料

  ---

• Object.is(x,y) 判断两个值是否全等（必须引用地址也一致）
• obj.toString() 可通过自定义toString方法替换原型的返回值。
  Object.prototype.toString.call(value) 可判断其构造函数：

  value	返回值
  数值	[object Number]
  字符串	[object String]
  布尔值	[object Boolean]
  undefined	[object Undefined]
  null	[object Null]
  数组	[object Array]
  arguments对象	[object Arguments]
  函数	[object Function]
  Error对象	[object Error]
  Date对象	[object Date]
  RegExp对象	[object RegExp]
  其他对象	[object Object]

• obj.valueOf() 返回指定对象的原始值
  参考资料

[-]类与继承

• class name 1.类的内部所有定义的方法，都是不可枚举的。
  2.类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。
  3.类不存在变量提升
  4.类不能继承常规（非可构造）对象，如要继承常规对象，则改用Object.setPrototypeOf()
• class $child extends $parent 1.如果子类中存在构造函数，则需要在使用“this”之前首先调用 super()。
  2.在子类的构造函数中，只有调用super之后，才可以使用this关键字
• class.constructor([opt]){} 1.constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法
  2.一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
• class.super(key)|.fn 1.super作为函数调用时，代表父类的构造函数。
  2.super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

  环境	this	super
  构造函数	实例对象	父类构造函数
  普通方法	实例对象	父类原型对象
  静态方法	类	父类

• class.fn(){} 原型方法
• class.static fn(){} 1.静态方法不会被实例继承，而是直接通过类来调用
  2.静态方法会被子类继承
  3.如果静态方法包含this关键字，这个this指的是类，而不是实例。参考资料
• class.get|set prop(){} getter/setter

[+]类修饰器

• @decorator(cls) 修饰器是一个对类进行处理的函数
• @decorator(cls,prop,desc) 修饰器不仅可以修饰类，还可以修饰类的属性

[+]原型链

• cst.prototype 返回值：构造函数创建的实例的原型（prototype是函数才会有的属性）
  为减少内存消耗，将公共方法写在构造函数的原型上，参考资料
  在改变原型对象时，一般要同时设置constructor属性
  
• pro.constructor 原型对象的这个属性指向构造函数
  
  参考资料
• obj.__proto__ 返回值：Object / 构造函数原型对象（仅浏览器环境）
  在编写JavaScript代码时，不要直接用obj.__proto__去改变一个对象的原型，并且，低版本的IE也无法使用__proto__。

[+]原型方法

• Object.create(obj) 基于一个对象创建新对象，源对象会成为新对象的原型对象，原型对象属性并不能在自身默认可见 参考资料
  不能直接将b的原型赋值给a，否则当b的原型修改时，a的原型也会被更改

  ---

  Child.prototype = Object.create(Parent.prototype)
  Child.prototype.constructor = Child
• pro.isPrototypeOf(obj) 判断当前对象是否为另一个对象的原型
  Object.prototype处于原型链的最顶端，所以对各种实例都返回true，只有继承null的对象除外。
• Object.getPrototypeOf(obj) 获取对象的原型对象
• Object.setPrototypeOf(obj,proto) 为现有对象设置原型，返回新对象。

[+]Symbol

• Symbol([des]) 它是一种类似于字符串的数据类型，但独一无二。

  ---

  1.Symbol函数前不能使用new命令，否则会报错
  2.Symbol 是一个原始类型的值，不是对象。也就是说，由于 Symbol 值不是对象，所以不能添加属性。
  3.Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。
  4.Symbol 值不能与其他类型的值进行运算
  5.Symbol 值可以通过toString或String方法显式转为字符串
  6.Symbol 值也可以转为布尔值，但是不能转为数值
  7.不能使用.运算符，必须使用[]
  8.Symbol 作为属性名，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。但是，它也不是私有属性，有一个Object.getOwnPropertySymbols方法，可以获取指定对象的所有 Symbol 属性名。
• Symbol.for(desc) 接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值。如果有，就返回这个 Symbol 值，否则就新建并返回一个以该字符串为名称的 Symbol 值。
• Symbol.keyfor(symbol) 返回一个已登记的 Symbol 类型值的key

[-]Proxy

• new Proxy(target,handler) var proxy = new Proxy(target,{handler})
  在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
  参考资料
  通过改写return值，可实现链式操作

  ---

  当被代理的对象为不同的类型时：
  对象：target=源对象,key=源对象的属性;
  数组：target=源数组,key=源数组的索引;
  函数：target=执行源函数,target[key]=函数源;
  
• Proxy.revocable(target,handler) 返回一个可取消的Proxy实例
  let {proxy, revoke} = Proxy.revocable(target, handler);
  目标对象内部的this关键字会指向 Proxy 代理
  Proxy.revocable方法返回一个对象，该对象的proxy属性是Proxy实例，revoke属性是一个函数，可以取消Proxy实例 参考资料
• handler.get(target,key,receiver) 拦截对象属性的读取
• handler.set(target,key,val,receiver) 拦截对象属性的设置
• handler.has(target,key) 拦截propKey in proxy的操作，返回一个布尔值。
• handler.deleteProperty(target,key) 拦截delete proxy[propKey]的操作，返回一个布尔值。
• handler.construct(target, args) 拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。
• handler.apply(target,object,args) 拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
• handler.ownKeys(target) 拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)，返回一个数组。该方法返回目标对象所有自身的属性的属性名。
• handler.getOwnPropertyDescriptor(target,key) 拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
• handler.defineProperty(target,key,desc) 拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
• handler.preventExtensions(target) 拦截Object.preventExtensions(proxy)，返回一个布尔值。
• handler.isExtensible(target) 拦截Object.isExtensible(proxy)，返回一个布尔值。
• handler.getPrototypeOf(target) 拦截Object.getPrototypeOf(proxy)，返回一个对象。
• handler.setPrototypeOf(target,proto) 拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。

[+]Reflect

• Reflect 1.将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。
  2.修改某些Object方法的返回结果，让其变得更合理。
  3.让Object操作都变成函数行为。
  参考资料
• Reflect.get(target,key,[receiver]) 查找并返回target对象的name属性，如果没有该属性，则返回undefined。
• Reflect.set(target,key,value,[receiver]) 设置target对象的name属性等于value
• Reflect.has(target,key) 对应key in obj里面的in运算符
• Reflect.deleteProperty(target,key) 等同于delete obj[name]，用于删除对象的属性
• Reflect.construct(target,args) 等同于new target(...args)，这提供了一种不使用new，来调用构造函数的方法。
• Reflect.apply(fn,thisArg,args) 等同于Function.prototype.apply.call(func, thisArg, args)，用于绑定this对象后执行给定函数。
• Reflect.ownKeys(target) 返回对象的所有属性，基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和。
• Reflect.getOwnPropertyDescriptor(target,key) 基本等同于Object.getOwnPropertyDescriptor，用于得到指定属性的描述对象
• Reflect.defineProperty(target,key,desc) 基本等同于Object.defineProperty，用来为对象定义属性。
• Reflect.preventExtensions(target) 对应Object.preventExtensions方法，用于让一个对象变为不可扩展。它返回一个布尔值，表示是否操作成功。
• Reflect.isExtensible(target) 对应Object.isExtensible，返回一个布尔值，表示当前对象是否可扩展。
• Reflect.getPrototypeOf(obj) 用于读取对象的__proto__属性，对应Object.getPrototypeOf(obj)。
• Reflect.setPrototypeOf(obj,proto) 用于设置对象的__proto__属性，返回第一个参数对象，对应Object.setPrototypeOf(obj, newProto)。

[-]全局函数

• eval(str) 将传入的字符串当做 JavaScript 代码进行执行。
  1.eval没有自己的作用域，都在当前作用域内执行。
  2.JavaScript规定，如果使用严格模式，eval内部声明的变量，不会影响到外部作用域。
  3.在严格模式下，eval依然可以读写当前作用域的变量。
  4.eval“间接调用”时作用域总是全局作用域 参考资料

[+]其它

• Error new Error('msg')
  错误对象属性：

  属性	描述
  err.message	错误提示信息
  err.name	错误名称（非标准属性）
  err.stack	错误的堆栈（非标准属性）

  
  原生错误类型：

  名称	描述
  SyntaxError	解析代码时发生的语法错误
  ReferenceError	引用一个不存在的变量时发生的错误；将一个值分配给无法分配的对象
  RangeError	当一个值超出有效范围时发生的错误
  TypeError	变量或参数不是预期类型时发生的错误
  URIError	URI相关函数的参数不正确时抛出的错误
  EvalError	eval函数没有被正确执行
  自定义错误	参考资料

  
  
  如果在一个函数内部发生了错误，它自身没有捕获，错误就会被抛到外层调用函数，如果外层函数也没有捕获，该错误会一直沿着函数调用链向上抛出，直到被JavaScript引擎捕获，代码终止执行。所以，我们不必在每一个函数内部捕获错误，只需要在合适的地方来个统一捕获，一网打尽。

  ---

  涉及到异步代码，无法在调用时捕获，原因就是在捕获的当时，回调函数并未执行。
  类似的，当我们处理一个事件时，在绑定事件的代码处，无法捕获事件处理函数的错误。
• WebAssembly

[+]数据类型

• Boolean 布尔:原始类型
• Number 数值：原始类型
  根据 ECMAScript 标准，JavaScript 中只有一种数字类型：基于 IEEE 754 标准的双精度 64 位二进制格式的值（-(263 -1) 到 263 -1）
  数字类型只有一个整数: 0
• String 字符串：原始类型
  JavaScript 字符串是不可更改的
• Symbol 符号：原始类型
  符号类型是唯一的并且是不可修改的,可以用来作为Object的key的值
• Undefined 未定义：原始类型
  一个没有被赋值的变量会有个默认值 undefined
• Null 空：原始类型
  Null 类型只有一个值： null
  内存优化
• Object 对象：引用类型（包括数组、函数、标准对象等）

[+]类型检测

• typeof val 返回的是字符串。
  可通过Object.prototype.toString.call(o)测试

  类型	结果
  true/false	boolean
  数值/NaN	boolean
  Symbol	symbol
  字符串/JSON	string
  fn	function
  obj/数组/null	object
  undefined/不存在的属性或方法	undefined

  
  

  ---

  1.判断null请使用myVar === null
  2.不存在的变量与未声明的变量typeof检测均为undefined，但两者其实不同，故建议总是初始化。
  3.Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针)，而 typeof 操作符检测 null 会返回 object。如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为 null。这样，当检查 null 值就知道是否已经变量是否已经分配了对象引用了。
  4.undefined 是派生自 null 的，因此 ECMA-262 规定对它们的相等性测试返回 true。alert(undefined == null);但typeof数据类型不等。
• obj instanceof cst instanceof运算符返回一个布尔值，表示某个对象是否为指定的构造函数的实例。

  测试目标	测试结果
  数组	arr instanceof Array
  函数/构造函数	fn instanceof Function
  构造函数实例	child instanceof parent
  泛对象	obj instanceof Object
  日期	value instanceof Date
  正则表达式	value instanceof RegExp
  数学	value instanceof Math

[+]类型转换

• Boolean(val) 省略该参数
  其值为 0、-0、null、false、NaN、undefined、或者空字符串（""）
  参数是DOM对象document.all
  以上均生成值为false的Boolean对象
• Number(val)

  value	返回值
  number/包含单个数值的数组	number
  boolean	1 / 0
  null/空字符串/空数组	0
  undefined/string/object	NaN

• String(val)

  value	返回值
  数值	转为相应的字符串
  字符串	转换后还是原来的值
  布尔值	true转为"true"，false转为"false"
  undefined	转为"undefined"
  null	转为"null"
  数组	返回该数组的字符串形式 "1,2,3"
  对象	返回一个类型字符串 "[object Object]" 可通过toString方法来设置修改

[+]变量

• var x1 = 1;
  var x2 = 2;
  window.x3 = 3;
  3种全局变量的异同

  ---

  1.变量会提升，在没有声明前调用，会输出undefined
  2.假设声明a、b、c,且c=a+b，且均为非引用类型，当ab发生变化时，c不会改变，应设为c=fn(return a+b)
• let let i = 1;
  1.申明一个块级作用域的变量
  2.不能使用let重复定义一个变量
  3.只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响，暂时性死区。
  
• const const PI = 3.14
  1.const来定义常量，在声明时就必须赋值。
  2.const与let都具有块级作用域。
  2.一旦声明，常量的指针就不能改变。

[+]表达式与运算符

• 运算符
• void void运算符对给定的表达式进行求值，然后返回 undefined
  在使用立即执行的函数表达式时，可以利用 void 运算符让 JavaScript 引擎把一个function关键字识别成函数表达式而不是函数声明（语句）

[+]流程控制与错误处理

• if..else.. if..
  if..else..
  if..else if..else..
• switch switch(expression){
  case ex:
  ..
  break;
  default:
  ..
  }
  1.switch中的case为全等判断
  2.多个case使用同一个执行块应写为case 1: case2: ...
  3.每个case代码块内部的break不能少，否则会接着执行下一个case
• try..catch try{..}
  catch(e){..}
  finally{..}
• throw 抛出一个异常
• debugger 调用任何可用的调试功能，例如设置断点。

[+]循环与迭代

• for 设置循环变量的部分和循环体内部有各自单独的作用域，变量彼此不影响（使用let时）。
• for..in 循环一个对象所有可枚举的属性
• for..of 在可迭代的对象上创建了一个循环
  包括Array, Map, Set, 参数对象（ arguments） 等等
• do..while(exp) 一直重复直到指定的条件求值得到假
• while(exp).. 一个 while 语句只要指定的条件求值为真（true）就会一直执行它的语句块
• label: 使用 break 或者 continue 来指出程序是否该停止循环还是继续循环
• break [label] 跳出(内部/指定)循环
• continue [label] 跳至(内部/指定)循环

  ---

  不带参数的break和continue语句都只针对最内层的循环，如continue语句后面不使用标签，则进入下一轮的内层循环
  带参数的break和continue语句，满足条件时，会跳过当前循环，直接进入下一轮外层循环

[+]模块引入与导出

• import $path 引入某个模块
• export default $mod 输出某个模块
• import $mod from $path 引入某个模块
• export {mods,..} 导出多个模块
  也可以将其导出时更换为别的名称：
  export {
  $inner as $outer,
  ..
  }
• import {mods,..} from $path 导入多个模块
  也可以在导入时将其重命名：
  import { $old as $new,
  ..
  }

  ---

  也可以将其全部导入在一个对象下：
  import * as $modc from $path
  

[+]文档

• JS参考文档
• ES6支持程度
• ECMAScript5规范

[+]教程

• JS指南
• ES5教程
• ES6教程

[+]动态

• 前端库大全
• 掘金社区
• 知乎话题

[-] global变量

• global 全局对象
• module 对当前模块的引用
  全局变量在所有模块中均可使用，但以下变量的作用域只在模块内
• __filename 当前正在执行的脚本的文件名，它将输出文件所在位置的绝对路径
  如果在模块中，返回的值是模块文件的路径。
• __dirname 表示当前执行脚本所在的目录
• exports 这是一个对于 module.exports 的更简短的引用形式
  如果一个新的值被赋值给 exports，它就不再绑定到 module.exports
  但如果是对exports.prop进行赋值，则依然当做module.exports.prop输出
  当 module.exports 属性被一个新的对象完全替代时，也会重新赋值 exports
• require(mod) 引入模块
  缓存 > 原生模块 > 文件模块 > node_modules > 全局目录

[+] module对象

• module.exports 模块对外输出
  单个函数输出，需要 module.exports = fn(){}
  作为对象输出，可以exports.prop = fn(){}
  或者 module.exports = $obj
• module.children 被该模块引用的模块对象，返回数组
  不会包括内置对象
• module.parent 最先引用该模块的模块
• module.id 模块的标识符。 通常是完全解析后的文件名
  被引入的模块，同__filename
• module.filename 模块的完全解析后的文件名
• module.loaded 模块是否已经加载完成，或正在加载中
• module.paths 模块的搜索路径,返回数组
• require.cache 被引入的模块将被缓存在这个对象中。从此对象中删除键值对将会导致下一次 require 重新加载被删除的模块。
• require.main 当 Node.js 直接运行一个文件时，require.main 会被设为它的 module。 这意味着可以通过 require.main === module 来判断一个文件是否被直接运行
  通过检查 require.main.filename 来获取当前应用程序的入口点

[-] timers

• setImmediate(fn,[arg]) 预定立即执行的 callback，它是在 I/O 事件的回调之后被触发。
  当多次调用 setImmediate() 时，callback 函数会按照它们被创建的顺序依次执行。 每次事件循环迭代都会处理整个回调队列。 如果一个立即定时器是被一个正在执行的回调排入队列的，则该定时器直到下一次事件循环迭代才会被触发。
• clearImmediate(immediate) 取消一个由 setImmediate() 创建的 Immediate 对象。
• setInterval(fn,delay,[arg]) 预定每隔 delay 毫秒重复执行的 callback。
• clearInterval(timeout) 取消一个由 setInterval() 创建的 Timeout 对象。
• setTimeout(fn,delay,[arg]) 预定在 delay 毫秒之后执行的单次 callback。
• clearTimeout(timeout) 取消一个由 setTimeout() 创建的 Timeout 对象。
• timeout.ref() 调用时，只要 Timeout 处于活动状态就要求 Node.js 事件循环不要退出。
  返回 Timeout 的一个引用。
• timeout.unref() 当调用时，活动的 Timeout 对象不要求 Node.js 事件循环保持活动。
  返回对 Timeout 的一个引用。

[+] console

• new Console(stdout,[stderr]) 通过传入一个或两个可写流实例，创建一个新的 Console 对象。 stdout 是一个可写流，用于打印日志或输出信息。 stderr 用于输出警告或错误。 如果没有传入 stderr ，则警告或错误输出会被发送到 stdout 。
• console.log/info([data,..]) 打印到 stdout，并带上换行符。
• console.error/warn([data,..]) 打印到 stderr，并带上换行符。
• console.dir(obj,[opt]) 在 obj 上使用 util.inspect() 并打印结果字符串到 stdout。

  ---

  showHidden - 如果为 true，则该对象中的不可枚举属性和 symbol 属性也会显示。默认为 false。
  depth - 告诉 util.inspect() 函数当格式化对象时要递归多少次。 这对于检查较大的复杂对象很有用。 默认为 2。 设为 null 可无限递归。
  colors - 如果为 true，则输出会带有 ANSI 颜色代码。 默认为 false。 颜色是可定制的，详见定制 util.inspect() 颜色。
• console.time(label) 启动一个定时器，用以计算一个操作的持续时间。 定时器由一个唯一的 label 标识。 当调用 console.timeEnd() 时，可以使用相同的 label 来停止定时器，并以毫秒为单位将持续时间输出到 stdout。 定时器持续时间精确到亚毫秒。
• console.timeEnd(label) 停止之前通过调用 console.time() 启动的定时器，并打印结果到 stdout
• console.count([label]) 维护一个指定 label 的内部计数器并且输出到 stdout 指定 label 调用 console.count() 的次数。label计数器的显示标签，默认为 'default'。
• console.countRest([label]) 重置指定 label 的内部计数器。
• console.group([label]) 将后续行的缩进增加两个空格。
• console.groupEnd() 将后续行的缩进减少两个空格。
• console.clear() 当 stdout 是一个 TTY 时，调用 console.clear() 将尝试清除 TTY。 当 stdout 不是一个TTY时，该方法什么都不做。
• console.assert(val,[msg,..]) 一个简单的断言测试，验证 value 是否为真。 如果不为真，则抛出 AssertionError。
• console.trace([msg,..]) 打印字符串 'Trace :' 到 stderr ，并通过 util.format() 格式化消息与堆栈跟踪在代码中的当前位置。

[+] EventEmitter类

• var EventEmitter = require('events') 引入events模块，得到EventEmitter类
• class $EMT extends EventEmitter {} 需要监听事件的对象，继承事件对象
  大多数时候我们不会直接使用 EventEmitter，而是在对象中继承它。包括 fs、net、 http 在内的，只要是支持事件响应的核心模块都是 EventEmitter 的子类。
• var evt = new $EMT() 创建一个EventEmitter 实例

[-] 添加/移除/触发监听器

• eet.on(evt,listener) 绑定事件及事件处理程序
  也可以写作eet.addListener(evt,fn)
  一个事件可以有多个监听器，但参数应是一致的，否则应作为多个事件处理

  ---

  返回值：返回一个 EventEmitter 引用，可以链式调用。
• eet.prependListener(evt,listener) 添加 listener 函数到名为 eventName 的事件的监听器数组的开头。
  不会检查 listener 是否已被添加。 多次调用并传入相同的 eventName 和 listener 会导致 listener 被添加与调用多次。

  ---

  返回值：返回一个 EventEmitter 引用，可以链式调用。
• eet.once(evt,listener) 为指定事件注册一个单次监听器，即监听器最多只会触发一次，触发后立刻解除该监听器。

  ---

  返回值：返回一个 EventEmitter 引用，可以链式调用。
• eet.prependOnceListener(evt,listener) 添加一个单次 listener 函数到名为 eventName 的事件的监听器数组的开头。
  下次触发 eventName 事件时，监听器会被移除，然后调用。

  ---

  返回值：返回一个 EventEmitter 引用，可以链式调用。
• eet.removeListener(evt,listener) 移除指定事件的某个监听器，监听器必须是该事件已经注册过的监听器。
  removeListener 最多只会从监听器数组里移除一个监听器实例。 如果任何单一的监听器被多次添加到指定 eventName 的监听器数组中，则必须多次调用 removeListener 才能移除每个实例。

  ---

  返回值：返回一个 EventEmitter 引用，可以链式调用。
• eet.removeAllListeners([evt]) 移除全部或指定 eventName 的监听器。

  ---

  返回值：返回一个 EventEmitter 引用，可以链式调用。
• eet.emit(evt,[arg]) 触发事件
  arg为监听器回调函数传入的参数，同一个事件下的监听器应使用同样的参数

  ---

  返回值：布尔值，如果事件有监听器，则返回 true ，否则返回 false。

[+] 内置事件

• [evt]newListener EventEmitter 实例会在一个监听器被添加到其内部监听器数组之前触发自身的 'newListener' 事件。
• [evt]removeListener 'removeListener' 事件在 listener 被移除后触发。
• [evt]error 我们一般要为会触发 error 事件的对象设置监听器，避免遇到错误后整个程序崩溃。

[+] 其它属性/方法

• eet.eventNames() 列出触发器上所有绑定的事件，返回一个数组。
• eet.getMaxListeners() 返回 EventEmitter 当前的最大监听器限制值，默认10
• eet.setMaxListeners(n) 值设为 Infinity（或 0）表明不限制监听器的数量。
  返回值：返回一个 EventEmitter 引用，可以链式调用。
• eet.listenerCount(evt) 返回指定事件的监听器的数量
• eet.listeners(evt) 返回指定事件的监听器数组的副本

[-] 路径信息

• path.dirname(path) 返回路径中代表文件夹的部分，同 Unix 的dirname 命令类似。
  不要以\\结尾，总是返回上一级目录
• path.basename(path,[ext]) 返回路径中的最后一部分。同 Unix 命令 bashname 类似。
  ext:可选的文件扩展名，使用了时，返回的数据不带扩展名
• path.extname(path) 返回路径中文件的后缀名，即路径中最后一个'.'之后的部分。
  如果一个路径中并不包含'.'或该路径只包含一个'.' 且这个'.'为路径的第一个字符，则此命令返回空字符串。
• path.parse(path) 返回路径字符串的对象
  root:根目录,dir:目录,base:文件名,name:文件名称,ext:扩展名
• path.format(obj) 从对象中返回路径字符串，和 path.parse 相反。

[-] 路径操作

• path.relative(from,to) 返回从 from 到 to 的相对路径（基于当前工作目录）
• path.resolve([...paths]) 会返回当前工作目录的绝对路径
• path.isAbsolute(path) 判断参数 path 是否是绝对路径
• path.join([...paths]) 用于连接路径。
  该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix系统是"/"，Windows系统是"\"。
  当出现..自动跳至上一级目录
• path.normalize(path) 规范化路径

[+] 平台特性

• path.sep 平台的文件路径分隔符，'\\' 或 '/'
• path.delimiter 平台特定的路径分隔符
  windows为; posix为:
• path.posix 提供了 path 方法针对 POSIX 的实现
• path.win32 提供上述 path 的方法，不过总是以 win32 兼容的方式交互

[+] 事件

• [evt]exit(exitCode) 显式调用process.exit()方法，使得Node.js进程即将结束；
  Node.js事件循环数组中不再有额外的工作，使得Node.js进程即将结束

  ---

  'exit'事件监听器的回调函数，只有一个入参，这个参数的值可以是process.exitCode的属性值，或者是调用process.exit()方法时传入的exitCode值。

  ---

  'exit'事件监听器的回调函数，只允许包含同步操作。所有监听器的回调函数被调用后，任何在事件循环数组中排队的工作都会被强制丢弃，然后Nodje.js进程会立即结束。 例如回调中的timeout操作永远不会被执行(因为不是同步操作)。

  ---

  退出状态码参考资料
• [evt]beforeExit(exitCode) 当Node.js的事件循环数组已经为空，并且没有额外的工作被添加进来，事件'beforeExit'会被触发。
  process.exitCode 作为唯一的参数值传递给'beforeExit'事件监听器的回调函数。

  ---

  正常情况下，如果没有额外的工作被添加到事件循环数组，Node.js进程会结束。但是如果'beforeExit'事件绑定的监听器的回调函数中，含有一个可以进行异步调用的操作，那么Node.js进程会继续运行。
  如果进程由于显式的原因而将要终止，例如直接调用process.exit()或抛出未捕获的异常，'beforeExit'事件不会被触发。
• [evt]uncaughtException(err) 如果Javascript未捕获的异常，沿着代码调用路径反向传递回event loop，会触发'uncaughtException'事件。 Node.js默认情况下会将这些异常堆栈打印到stderr 然后进程退出。 为'uncaughtException'事件增加监听器会覆盖上述默认行为。
• [evt]Signal Events 当进程接收到信号时就触发。信号列表详见标准的 POSIX 信号名，如 SIGINT、SIGUSR1 等。
  参考资料
• [evt]disconnect 如果Node.js进程是由IPC channel的方式创建的，当IPC channel关闭时，会触发'disconnect'事件。
• [evt]message(msg,sendHanle) 如果Node.js进程是由IPC channel的方式创建的，当子进程收到父进程的的消息时(消息通过childprocess.send()发送）， 会触发'message'事件。

  ---

  'message'事件监听器的回调函数中被传递的参数如下：
  message - 解析的JSON对象，或primitive值。
  sendHandle - 一个net.Socket 或 net.Server对象，或undefined。
• [evt]rejectionHandled 如果有Promise被rejected，并且此Promise在Nodje.js事件循环的下次轮询及之后期间，被绑定了一个错误处理器[例如使用promise.catch()][])， 会触发'rejectionHandled'事件。

  ---

  参考资料
• [evt]unhandledRejection 参考资料

[-] 基本属性

• process.stdout 标准输出流
• process.stderr 标准错误流
• process.stdin 标准输入流
• process.exitCode 进程退出时的代码，如果进程优通过 process.exit() 退出，不需要指定退出码。

[-] 常用方法

• process.cwd() 返回当前进程的工作目录
• process.chdir(dir) 改变当前工作进程的目录，如果操作失败抛出异常。
• process.nextTick(callback,[args]) 一旦当前事件循环结束，调用回到函数
• process.abort() 这将导致 node 触发 abort 事件。会让 node 退出并生成一个核心文件。
• process.exit([code]) 使用指定的 code 结束进程。如果忽略，将会使用 code 0。
• process.kill(pid,[signal]) 发送信号给进程. pid 是进程id，并且 signal 是发送的信号的字符串描述。信号名是字符串，比如 'SIGINT' 或 'SIGHUP'。如果忽略，信号会是 'SIGTERM'。

[-] 进程环境

• process.argv argv 属性返回一个数组，由命令行执行脚本时的各个参数组成。
  它的第一个成员总是node，第二个成员是脚本文件名，其余成员是脚本文件的参数。
• process.argv0 v6.4+
  保存Node.js启动时传入的argv[0]参数值的一份只读副本
• process.execPath 返回执行当前脚本的 Node 二进制文件的绝对路径
• process.execArgv 返回一个数组，成员是命令行下执行脚本时，在Node可执行文件与脚本文件之间的命令行参数。
• process.env 返回一个对象，成员为当前 shell 的环境变量
• process.version Node 的版本
• process.versions 一个属性，包含了 node 的版本和依赖.
• process.config 一个包含用来编译当前 node 执行文件的 javascript 配置选项的对象。它与运行 ./configure 脚本生成的 "config.gypi" 文件相同。
• process.pid 当前进程的进程号
• process.title 进程名
• process.arch 当前 CPU 的架构：'arm'、'ia32' 或者 'x64'。
• process.platform 运行程序所在的平台系统 'darwin', 'freebsd', 'linux', 'sunos' 或 'win32'
• process.mainModule require.main 的备选方法。不同点，如果主模块在运行时改变，require.main可能会继续返回老的模块。可以认为，这两者引用了同一个模块。

[+] 关联控制

• process.umask([mask]) 设置或读取进程文件的掩码。子进程从父进程继承掩码。如果mask 参数有效，返回旧的掩码。否则，返回当前掩码。
• process.channel 如果Node.js进程是由IPC channel方式创建的，process.channel属性保存IPC channel的引用。 如果IPC channel不存在，此属性值为`undefined。
• process.connected 如果Node.js进程是由IPC channel方式创建的， 只要IPC channel保持连接，process.connected属性就会返回true。 process.disconnect()被调用后，此属性会返回false。
  process.connected如果为false，则不能通过IPC channel使用process.send()发送信息。
• process.disconnect() 关闭到父进程的IPC频道，以允许子进程一旦没有其他链接来保持活跃就优雅地关闭。
• process.send(msg,{},fn) 给父进程发送消息

[+] 性能相关

• process.memoryUsage() 返回一个对象，描述了 Node 进程所用的内存状况，单位为字节。
• process.cpuUsage([previousValue]) v6.1+
  返回包含当前进程的用户CPU时间和系统CPU时间的对象
• process.uptime() 返回 Node 已经运行的秒数
• process.hrtime() 返回当前进程的高分辨时间，形式为 [seconds, nanoseconds]数组。它是相对于过去的任意事件。该值与日期无关，因此不受时钟漂移的影响。主要用途是可以通过精确的时间间隔，来衡量程序的性能。你可以将之前的结果传递给当前的 process.hrtime() ，会返回两者间的时间差，用来基准和测量时间间隔。

[+] POSIX权限

• process.getgid() 获取进程的群组标识。获取到得时群组的数字 id，而不是名字。
  注意：这个函数仅在 POSIX 平台上可用(例如，非Windows 和 Android)。
• process.setgid(id) 设置进程的群组标识.可以接收数字 ID 或者群组名。如果指定了群组名，会阻塞等待解析为数字 ID 。
  注意：这个函数仅在 POSIX 平台上可用(例如，非Windows 和 Android)。
• process.getuid() 获取进程的用户标识。这是数字的用户 id，不是用户名。
  注意：这个函数仅在 POSIX 平台上可用(例如，非Windows 和 Android)。
• process.setuid(id) 设置进程的用户标识。接收数字 ID或字符串名字。果指定了群组名，会阻塞等待解析为数字 ID 。
  注意：这个函数仅在 POSIX 平台上可用(例如，非Windows 和 Android)。
• process.getgroups() 返回进程的群组 iD 数组。POSIX 系统没有保证一定有，但是 node.js 保证有。
  注意：这个函数仅在 POSIX 平台上可用(例如，非Windows 和 Android)。
• process.setgroups(groups) 设置进程的群组 ID。这是授权操作，所有你需要有 root 权限，或者有 CAP_SETGID 能力。
  注意：这个函数仅在 POSIX 平台上可用(例如，非Windows 和 Android)。
• process.initgroups(user,extra_group) 读取 /etc/group ，并初始化群组访问列表，使用成员所在的所有群组。这是授权操作，所有你需要有 root 权限，或者有 CAP_SETGID 能力。
  注意：这个函数仅在 POSIX 平台上可用(例如，非Windows 和 Android)。

[-] 创建

• ipc.spawn(cmd,[args],[opt]) 通过当前命令启动一个新的进程

  ---

  cmd - str,要运行的命令行
  args - arr,字符串参数列表
  opt - obj,设置 参考资料
• ipc.fork(modulePath,[arg],[opt]) child_process.fork() 方法是 child_process.spawn() 的一个特殊情况，专门用于衍生新的 Node.js 进程。 跟 child_process.spawn() 一样返回一个 ChildProcess 对象。 返回的 ChildProcess 会有一个额外的内置的通信通道，它允许消息在父进程和子进程之间来回传递。 参考资料
• ipc.exec(cmd,[opt],[fn]) 在shell中运行一个命令，并缓存其输出 参考资料
• ipc.execFile(file,[arg],[opt],[fn]) 指定的可执行的 file 被直接衍生为一个新进程 参考资料

[+] 事件

• [evt]close 当子进程的 stdio 流被关闭时会触发 'close' 事件。 这与 'exit' 事件不同，因为多个进程可能共享同一 stdio 流。
• [evt]disconnect 在父进程中调用 subprocess.disconnect() 或在子进程中调用 process.disconnect() 后会触发 'disconnect' 事件。 断开后就不能再发送或接收信息，且 subprocess.connected 属性会被设为 false。
• [evt]error 每当出现以下情况时触发 'error' 事件：
  1.进程无法被衍生；
  2.进程无法被杀死；
  3.向子进程发送信息失败。
  注意，在错误发生后，'exit' 事件可能会也可能不会触发。 当同时监听了 'exit' 和 'error' 事件，谨防处理函数被多次调用。
• [evt]exit 子进程结束后会触发 'exit' 事件。 如果进程退出了，则 code 是进程的最终退出码，否则为 null。 如果进程是收到的信号而终止的，则 signal 是信号的字符串名称，否则为 null。 这两个总有一个是非空的。
  注意，当 'exit' 事件被触发时，子进程的 stdio 流可能依然是打开的。
• [evt]message 当一个子进程使用 process.send() 发送消息时会触发 'message' 事件。

[+] 子进程

• subp.channel 当前子进程的 IPC 通道的引用。如果当前没有 IPC 通道，则该属性为 undefined。
• subp.connected 表明是否仍可以从一个子进程发送和接收消息。 当 subprocess.connected 为 false 时，则不能再发送或接收的消息。
• subp.disconnect() 关闭父进程与子进程之间的 IPC 通道，一旦没有其他的连接使其保持活跃，则允许子进程正常退出。 调用该方法后，父进程和子进程上各自的 subprocess.connected 和 subprocess.connected 属性都会被设为 false，且进程之间不能再传递消息。
• subp.kill([signal]) 向子进程发送一个信号。 如果没有给定参数，则进程会发送 'SIGTERM' 信号。
• subp.killed 表明该子进程是否已成功接收到 subprocess.kill() 的信号。 该属性不代表子进程是否已被终止。
• subp.pid 返回子进程的进程标识（PID）
• subp.send(msg,[handle],[opt],[fn]) 发送消息到子进程
• subp.stderr 一个代表子进程的 stderr 的可读流。
• subp.stdin 一个代表子进程的 stdin 的可写流。
• subp.stdio 一个到子进程的管道的稀疏数组
• subp.stdout 一个代表子进程的 stdout 的可读流

[-] 特征

• os.hostname() 返回操作系统的主机名
• os.release() 返回操作系统的发行版本
• os.platform() 返回操作系统平台.
  可能的值'aix','darwin','freebsd','linux','openbsd','sunos','win32'
• os.arch() 返回操作系统 CPU 架构
  可能的值'arm', 'arm64', 'ia32', 'mips', 'mipsel', 'ppc', 'ppc64', 's390', 's390x', 'x32', 'x64', 和 'x86'
• os.type() 返回操作系统类型.
  

  系统	返回值
  linux	'Linux'
  macOS	'Darwin'
  Windows	'Windows_NT'

[+] 性能

• os.uptime() 返回操作系统运行的时间，以秒为单位。
• os.loadavg() 返回一个包含 1、5、15 分钟平均负载的数组。
  平均负载是系统活动的测量,由操作系统计算得出,表达为一个分数. 一般来说,平均负载应该理想地比系统的逻辑CPU的数目要少. 平均负载是UNIX相关的概念,在Windows平台上没有对应的概念. 在Windows上,其返回值总是[0, 0, 0].
• os.totalmen() 返回系统内存总量，单位为字节。
• os.freemem() 返回操作系统空闲内存量，单位是字节。
• os.cpus() 返回一个对象数组，包含所安装的每个 CPU/内核的信息：型号、速度（单位 MHz）、时间（一个包含 user、nice、sys、idle 和 irq 所使用 CPU/内核毫秒数的对象）。 参考资料
• os.networkInterfaces() 获得网络接口列表。 参考资料

[+] 数据

• os.tmpdir() 返回操作系统的默认临时文件夹。
  C:\Users\augustf\AppData\Local\Temp
• os.homedir() 返回当前用户的home目录
• os.userInfo([opt]) os.userInfo()方法当前有效用户的信息

  ---

  1.在 POSIX平台上, 这通常是password 文件的子集. 返回的对象包括 username, uid, gid, shell, 和 homedir.
  2.在Windows系统上, uid 和 gid 域是 -1, and shell是 null.
• os.endianness() 返回 CPU 的字节序，可能的是 "BE" 或 "LE"。
• os.constants 返回一个包含错误码,处理信号等通用的操作系统特定常量的对象 参考资料
• os.EOL 一个定义了操作系统的一行结束的标识的常量
  

  系统	标志
  POSIX	\n
  Windows	\r\n

[+] 字符集

• ASCII ascii
  作用：表语英语及西欧语言。
  位数：ASCII是用7位表示的，能表示128个字符；其扩展使用8位表示，表示256个字符。
  范围：ASCII从00到7F，扩展从00到FF

  ---

  iso8859-1
  作用：扩展ASCII，表示西欧、希腊语等。
  位数：8位
  范围：从00到FF，兼容ASCII字符集
• GB GB2312字符集
  作用：国家简体中文字符集，兼容ASCII。
  位数：使用2个字节表示，能表示7445个符号，包括6763个汉字，几乎覆盖所有高频率汉字。
  范围：高字节从A1到F7, 低字节从A1到FE。将高字节和低字节分别加上0XA0即可得到编码。

  ---

  GBK字符集
  作用：它是GB2312的扩展，加入对繁体字的支持，兼容GB2312。
  位数：使用2个字节表示，可表示21886个字符。
  范围：高字节从81到FE，低字节从40到FE。

  ---

  BIG5字符集
  作用：它解决了中文、日文、朝鲜语等的编码，兼容GBK。
  位数：它采用变字节表示(1 ASCII，2，4字节)。可表示27484个文字。
  范围：1字节从00到7F; 2字节高字节从81到FE，低字节从40到7E和80到FE；4字节第一三字节从81到FE，第二四字节从30到39。

  ---

• Unicode UTF-8/UTF-32/UTF-16/UTF-7
  作用：为世界650种语言进行统一编码，兼容ISO-8859-1。
  位数：UNICODE字符集有多个编码方式，分别是UTF-8，UTF-16和UTF-32。
  参考资料

[+] 字符编码

• ascii 仅支持 7 位 ASCII 数据。如果设置去掉高位的话，这种编码是非常快的。
• latin1/binary 一种把 Buffer 编码成一字节编码的字符串的方式
  ISO-8859-1的别名
• utf8 多字节编码的 Unicode 字符。许多网页和其他文档格式都使用 UTF-8 。
• utf16le/ucs2 2 或 4 个字节，小字节序编码的 Unicode 字符。支持代理对（U+10000 至 U+10FFFF）。
• base64 MIME编码的一种
• hex 将每个字节编码为两个十六进制字符

[-] Buffer类

• Buffer.from(str,[encoding]) 返回一个被 string 的值初始化的新的 Buffer 实例
• Buffer.from(buffer) 复制传入的 Buffer 实例的数据，并返回一个新的 Buffer 实例
• Buffer.from(array) 返回一个被 array 的值初始化的新的 Buffer 实例（传入的 array 的元素只能是数字，不然就会自动被 0 覆盖）
• Buffer.from(arrayBuffer,[byteOffset],[length]) 返回一个新建的与给定的 ArrayBuffer 共享同一内存的 Buffer
  参考资料
• Buffer.alloc(size,[fill],[encoding]) 返回一个指定大小的 Buffer 实例，如果没有设置 fill，则默认填满 0
  1. size - 新建的buffer期望的长度(>0,<max)
  2. fill - 用来预填充新建的Buffer值，默认0(str,buffer,integer)
  3. encoding - 如果fill是字符串，则该值是它的字符编码，默认utf8
• Buffer.allocUnsafe(size) 返回一个指定大小的 Buffer 实例，但是它不会被初始化，所以它可能包含敏感的数据
• Buffer.allocUnsafeSlow(size) 以这种方式创建的 Buffer 实例的底层内存是未初始化的。 新创建的 Buffer 的内容是未知的，且可能包含敏感数据。
  应当仅仅作为开发者已经在他们的应用程序中观察到过度的内存保留之后的终极手段使用。

[+] 属性

• buf.length 返回 buf 在字节数上分配的内存量。 注意，这并不一定反映 buf 内可用的数据量。
• Buffer.byteLength(str,[encoding]) 返回一个字符串的实际字节长度。
  当 string 是一个 Buffer/DataView/TypedArray/ArrayBuffer 时，返回实际的字节长度。
• buf[index] 索引操作符 [index] 可用于获取或设置 buf 中指定 index 位置的八位字节。
  这个值指向的是单个字节，所以合法的值范围是的 0x00 至 0xFF（十六进制），或 0 至 255（十进制）。
• buf.buffer buffer 属性指向创建该 Buffer 的底层的 ArrayBuffer 对象。
• buf.constants

  属性	描述
  buffer.INSPECT_MAX_BYTES	当调用 buf.inspect() 时返回的最大字节数。 可以被用户模块重写。
  buffer.constants.MAX_LENGTH	单个Buffer实例允许的最大量度
  buffer.constants.MAX_STRING_LENGTH	单个string实例允许的最大长度
  buffer.kMaxLength	分配给单个 Buffer 实例的最大内存

• Buffer.poolSize 这是用于决定预分配的、内部 Buffer 实例池的大小的字节数。 这个值可以修改。
• Buffer.isBuffer(obj) 如果 obj 是一个 Buffer 则返回 true ，否则返回 false 。
• Buffer.isEncoding(encoding) 如果 encoding 是一个支持的字符编码则返回 true，否则返回 false 。

[-] 读取/写入

• buf.toString([encoding],[n,m]) 根据 encoding 指定的字符编码解码 buf 成一个字符串。 start 和 end 可传入用于只解码 buf 的一部分。
• buf.write(str,[offset],[length],[encoding]) 根据 encoding 的字符编码写入 string 到 buf 中的 offset 位置。 length 参数是写入的字节数。 如果 buf 没有足够的空间保存整个字符串，则只会写入 string 的一部分。 只部分解码的字符不会被写入。

[-] 修改

• buf.fill(val,[offset],[end],[encoding]) 填充一个buffer
• buf.slice[n,m) 返回一个指向相同原始内存的新建的 Buffer，但做了偏移且通过 start 和 end 索引进行裁剪。
  注意，修改这个新建的 Buffer 切片，也会同时修改原始的 Buffer 的内存，因为这两个对象所分配的内存是重叠的。
  指定负的索引会导致切片的生成是相对于 buf 的末尾而不是开头。
• Buffer.concat(list,[totalLength]) 返回一个合并了 list 中所有 Buffer 实例的新建的 Buffer 。
  1. list - 要合并的 Buffer 或 Uint8Array 实例的数组
  2. totalLength - 合并时 list 中 Buffer 实例的总长度
• buf.copy(target,[range]) 贝 buf 的一个区域的数据到 target 的一个区域，即便 target 的内存区域与 buf 的重叠。

[-] 转换

• buf.toJSON() 返回 buf 的 JSON 格式。
  {"type":"Buffer","data":[1,2,3,4,5]}
• buf.transcode(source,from,to) 将给定的 Buffer 或 Uint8Array 实例从一个字符编码重新编码到另一个字符。 返回一个新的Buffer实例。

[-] 检索

• buf.includes(val,[byteOffset],[encoding]) 检索一个buffer
• buf.indexOf(val,[byteOffset],[encoding]) 查找一个值在buffer中的索引
  如果 buf 没包含 value 则返回 -1
• buf.lastIndexOf(val,[byteOffset],[encoding]) 与 buf.indexOf() 类似，除了 buf 是从后往前搜索而不是从前往后。

[+] 迭代器

• buf.entries() 从 buf 的内容中，创建并返回一个 [index, byte] 形式的迭代器
• buf.keys() 创建并返回一个包含 buf 键名（索引）的迭代器。
• buf.values() 创建并返回一个包含 buf 的值（字节）的迭代器。 当 Buffer 使用 for..of 时会自动调用该函数。

[+] 比较

• buf.compare(target,[range]) 比较 buf 与 target，返回表明 buf 在排序上是否排在 target 之前、或之后、或相同。 对比是基于各自 Buffer 实际的字节序列。

  ---

  如果 target 与 buf 相同，则返回 0 。
  如果 target 排在 buf 前面，则返回 1 。
  如果 target 排在 buf 后面，则返回 -1 。
• Buffer.compare(buf1,buf2) 比较 buf1 和 buf2 ，通常用于 Buffer 实例数组的排序。
• buf.equals(buffer) 如果 buf 与 otherBuffer 具有完全相同的字节，则返回 true，否则返回 false。

[+] 读取

• buf.readDoubleBE(offset,[noAssert]) 用指定的字节序格式（readDoubleBE() 返回大端序，readDoubleLE() 返回小端序）从 buf 中指定的 offset 读取一个64位双精度值。
• buf.readFloatBE(offset,[noAssert]) 用指定的字节序格式（readFloatBE() 返回大端序，readFloatLE() 返回小端序）从 buf 中指定的 offset 读取一个32位浮点值。
• buf.readInt8(offset,[noAssert]) 从 buf 中指定的 offset 读取一个有符号的8位整数值。
• buf.readInt16BE(offset,[noAssert]) 用指定的字节序格式（readInt16BE() 返回大端序，readInt16LE() 返回小端序）从 buf 中指定的 offset 读取一个有符号的16位整数值。
• buf.readInt32BE(offset,[noAssert]) 用指定的字节序格式（readInt32BE() 返回大端序，readInt32LE() 返回小端序）从 buf 中指定的 offset 读取一个有符号的32位整数值。
• buf.readIntBE(offset,byteLength,[noAssert]) 从 buf 中指定的 offset 读取 byteLength 个字节，且读取的值会被解析为二进制补码值。 最高支持48位精度。
• buf.readUInt8(offset,[noAssert]) 从 buf 中指定的 offset 读取一个无符号的8位整数值。
• buf.readUInt16BE(offset,[noAssert]) 用指定的字节序格式（readUInt16BE() 返回大端序，readUInt16LE() 返回小端序）从 buf 中指定的 offset 读取一个无符号的16位整数值。
• buf.readUInt32BE(offset,[noAssert]) 用指定的字节序格式（readUInt32BE() 返回大端序，readUInt32LE() 返回小端序）从 buf 中指定的 offset 读取一个无符号的32位整数值。
• buf.readUIntBE(offset,byteLength,[noAssert]) 从 buf 中指定的 offset 读取 byteLength 个字节，且读取的值会被解析为无符号的整数。 最高支持48位精度。

[+] 交换

• buf.swap16() 将 buf 解析为一个无符号16位的整数数组，并且以字节顺序原地进行交换。 如果 buf.length 不是2的倍数，则抛出 RangeError 错误。
• buf.swap32() 将 buf 解析为一个无符号32位的整数数组，并且以字节顺序原地进行交换。 如果 buf.length 不是4的倍数，则抛出 RangeError 错误。
• buf.swap64() 将 buf 解析为一个64位的数值数组，并且以字节顺序原地进行交换。 如果 buf.length 不是8的倍数，则抛出 RangeError 错误。

[-] 字符串解码器

• string_decoder string_decoder 模块提供了一个 API，用于把 Buffer 对象解码成字符串，但会保留编码过的多字节 UTF-8 与 UTF-16 字符。

  ---

  const {StringDecoder} = require('string_decoder')
  const decoder = new StringDecoder('utf8')
• string_decoder.write(buffer) 返回一个解码后的字符串，并确保返回的字符串不包含 Buffer 末尾残缺的多字节字符，残缺的多字节字符会被保存在一个内部的 buffer 中用于下次调用
• string_decoder.end([buffer]) 以字符串的形式返回内部 buffer 中剩余的字节。 残缺的 UTF-8 与 UTF-16 字符的字节会被替换成符合字符编码的字符。

[-] 加密

[-] fs.Stream

• fs.createReadStream(path,[opt]) 返回一个新建的 ReadStream 对象

  ---

  path : string / buffer / url
  option : string(encoding) / object
  
  1. flags - 'r'
  2. encoding - null
  3. fd - null
  4. mode - 0o666
  5. autoClose - true
  6. start - [
  7. end - ]
  options 可以包括 start 和 end 值，使其可以从文件读取一定范围的字节而不是整个文件。
  如果指定了 fd，则 ReadStream 会忽略 path 参数并且会使用指定的文件描述符。 这意味着不会触发 'open' 事件。

  ---

  参考资料：从流读取数据、写入流、管道流、链式流
• fs.createWriteStream(path,[opt]) 返回一个新建的 WriteStream 对象

  ---

  path : string / buffer / url
  option : string(encoding) / object
  
  1. flags - 'w'
  2. encoding - 'utf8'
  3. fd - null
  4. mode - 0o666
  5. autoClose - true
  6. start - [
  7. end - ]
  如果是修改一个文件而不是覆盖它，则需要flags 模式为 r+ 而不是默认的 w 模式。
• stream.bytesRead 已读取的字节数
• stream.bytesWritten 已写入的字节数。 不包括仍在排队等待写入的数据。
• stream.path 流正在读取的文件的路径，指定在 fs.createReadStream() 的第一个参数。 如果 path 传入的是一个字符串，则 readStream.path 是一个字符串。 如果 path 传入的是一个 Buffer，则 readStream.path 是一个 Buffer。
• [evt]open 当 ReadStream/WriteStream 的文件被打开时触发
• [evt]close 当 ReadStream/WriteStream 底层的文件描述符被关闭时触发。
  'close' 事件触发后，该流将不会再触发任何事件。
  不是所有可写流都会触发 'close' 事件。
• [evt]error 'error' 事件在写入数据出错或者使用管道出错时触发。事件发生时，回调函数仅会接收到一个 Error 参数。
  注意: 'error' 事件发生时，流并不会关闭。

[-] 可读流

• stream.setEncoding(encoding) 为从可读流读入的数据设置字符编码
• stream.pipe(dest,[opt]) 将可读流写入到可写流
• stream.unpipe([dest]) 将之前通过stream.pipe()方法绑定的流分离
  如果 destination 没有传入, 则所有绑定的流都会被分离.
  如果传入 destination, 但它没有被pipe()绑定过，则该方法不作为.
• stream.read([size]) 从内部缓冲区中抽出并返回一些数据。 如果没有可读的数据，返回null。
  默认数据将作为“Buffer”对象返回 ，除非已经使用readable.setEncoding()方法设置编码或流运行在对象模式。
• stream.pause() 使 flowing 模式的流停止触发 'data' 事件， 进而切出 flowing 模式。任何可用的数据都将保存在内部缓存中。
• stream.isPaused() 返回可读流的当前操作状态
• stream.resume() 重新触发 'data' 事件, 将暂停模式切换到流动模式。
• stream.unshift(chunk) 会把一块数据压回到Buffer内部
• stream.destroy([error]) 销毁流，并且触发error事件。然后，可读流将释放所有的内部资源。
• [evt]data 'data' 事件会在流将数据传递给消费者时触发。
  当流转换到 flowing 模式时会触发该事件。调用 readable.pipe()， readable.resume() 方法，或为 'data' 事件添加回调可以将流转换到 flowing 模式。 'data' 事件也会在调用 readable.read() 方法并有数据返回时触发。
• [evt]end 'end' 事件将在流中再没有数据可供消费时触发。
  注意： 'end' 事件只有在数据被完全消费后 才会触发 。 可以在数据被完全消费后，通过将流转换到 flowing 模式， 或反复调用 stream.read() 方法来实现这一点。
• [evt]readable 'readable' 事件将在流中有数据可供读取时触发。
  在某些情况下，为 'readable' 事件添加回调将会导致一些数据被读取到内部缓存中。

[-] 可写流

• stream.setDefaultEncoding(encoding) 设置编码
  返回： this
• stream.write(chunk,[encoding],[fn]) 向流中写入数据，并在数据处理完成后调用 callback 。
  如果有错误发生， callback 不一定 以这个错误作为第一个参数并被调用。要确保可靠地检测到写入错误，应该监听 'error' 事件

  ---

  在确认了 chunk 后，如果内部缓冲区的大小小于创建流时设定的 highWaterMark 阈值，函数将返回 true 。 如果返回值为 false ，应该停止向流中写入数据，直到 'drain' 事件被触发。
  返回：布尔值，如果流需要等待 'drain' 事件触发才能继续写入数据，这里将返回 false ； 否则返回 true。
• stream.end([chunk],[encoding],[fn]) 调用 writable.end() 方法表明接下来没有数据要被写入 Writable

  ---

  chunk - 需要写入的数据。对于非对象模式下的流， chunk 必须是字符串、或 Buffer、或 Uint8Array。对于对象模式下的流， chunk 可以是任意的 JavaScript 值，除了 null。
  encoding - 如果 chunk 是字符串，这里指定字符编码。
  callback - 流结束时的回调函数，它将作为 'finish' 事件的回调函数
• stream.cork() 强制所有写入数据都存放到内存中的缓冲区里。 直到调用 stream.uncork() 或 stream.end() 方法时，缓冲区里的数据才会被输出。

  ---

  在向流中写入大量小块数据（small chunks of data）时，内部缓冲区（internal buffer）可能失效，从而导致性能下降。writable.cork() 方法主要就是用来避免这种情况。 对于这种情况， 实现了 writable._writev() 方法的流可以对写入的数据进行缓冲，从而提高写入效率。
• stream.uncork() 输出在 stream.cork() 方法被调用之后缓冲在内存中的所有数据。
  如果一个流多次调用了 writable.cork() 方法，那么也必须调用同样次数的 writable.uncork() 方法以输出缓冲区数据。
• stream.destroy([error]) 摧毁这个流，并发出传过来的错误。当这个函数被调用后，这个写入流就结束了。
  返回： this
• [evt]finish 在调用了 stream.end() 方法，且缓冲区数据都已经传给底层系统（underlying system）之后， 'finish' 事件将被触发。
• [evt]pipe 在可读流（readable stream）上调用 stream.pipe() 方法，并在目标流向 (destinations) 中添加当前可写流 ( writable ) 时，将会在可写流上触发 'pipe' 事件。
• [evt]unpipe 在 Readable 上调用 stream.unpipe() 方法，从目标流向中移除当前 Writable 时，将会触发 'unpipe' 事件。
• [evt]drain 如果调用 stream.write(chunk) 方法返回 false，流将在适当的时机触发 'drain' 事件，这时才可以继续向流中写入数据。

[+] 逐行读取

• readline.clearLine(stream,dir)
• readline.clearScreenDown(stream)
• readline.cursorTo(stream,x,y)
• readline.moveCursor(stream,dx,dy)
• readline.emitKeypressEvents(stream,[interface])

[+] Interface

• readline.createInterface(opt)
• [evt]close
• [evt]line
• [evt]pause
• [evt]resume
• [evt]SIGCONT
• [evt]SIGINT
• [evt]SIGTSTP
• rl.close()
• rl.prompt([preserveCursor])
• rl.question(query,fn)
• rl.resume()
• rl.setPrompt(prompt)
• rl.write(data,[key])

[+] 基本参数

• flags 文件打开行为

  Flag	描述
  r	以读取模式打开文件。如果文件不存在抛出异常。
  r+	以读写模式打开文件。如果文件不存在抛出异常。
  rs	以同步的方式读取文件。
  rs+	以同步的方式读取和写入文件。
  w	以写入模式打开文件，如果文件不存在则创建。
  wx	类似 'w'，但是如果文件路径存在，则文件写入失败。
  w+	以读写模式打开文件，如果文件不存在则创建。
  wx+	类似 'w+'， 但是如果文件路径存在，则文件读写失败。
  a	以追加模式打开文件，如果文件不存在则创建。
  ax	类似 'a'， 但是如果文件路径存在，则文件追加失败。
  a+	以读取追加模式打开文件，如果文件不存在则创建。
  ax+	类似 'a+'， 但是如果文件路径存在，则文件读取追加失败。

[+] 文件系统常量

• fs.constants 返回一个包含常用文件系统操作的常量的对象。
• 文件访问常量 以下常量用于 fs.access()

  常量	描述
  F_OK	该标志表明文件对于调用进程是可见的。
  R_OK	该标志表明文件可被调用进程读取。
  W_OK	该标志表明文件可被调用进程写入。
  X_OK	该标志表明文件可被调用进程执行。

• 文件打开常量 以下常量用于 fs.open()

  常量	描述
  O_RDONLY	该标志表明打开一个文件用于只读访问。
  O_WRONLY	该标志表明打开一个文件用于只写访问。
  O_RDWR	该标志表明打开一个文件用于读写访问。
  O_CREAT	该标志表明如果文件不存在则创建一个文件。
  O_EXCL	该标志表明如果设置了 O_CREAT 标志且文件已经存在，则打开一个文件应该失败。
  O_NOCTTY	该标志表明如果路径是一个终端设备，则打开该路径不应该造成该终端变成进程的控制终端（如果进程还没有终端）。
  O_TRUNC	该标志表明如果文件存在且为一个常规文件、且文件被成功打开为写入访问，则它的长度应该被截断至零。
  O_APPEND	该标志表明数据会被追加到文件的末尾。
  O_DIRECTORY	该标志表明如果路径不是一个目录，则打开应该失败。
  O_NOATIME	该标志表明文件系统的读取访问权不再引起相关文件 atime 信息的更新。该标志只在 Linux 操作系统有效。
  O_NOFOLLOW	该标志表明如果路径是一个符号链接，则打开应该失败。
  O_SYNC	该标志表明文件打开用于同步 I/O。
  O_DSYNC	该标志标明文件为同步I/O打开，写入操作会等待数据完整性
  O_SYMLINK	该标志表明打开符号链接自身，而不是它指向的资源。
  O_DIRECT	当设置它时，会尝试最小化文件 I/O 的缓存效果。
  O_NONBLOCK	该标志表明当可能时以非阻塞模式打开文件。

• 文件类型常量 以下常量用于 fs.Stats 对象中用于决定一个文件的类型的 mode 属性

  常量	描述
  S_IFMT	用于提取文件类型码的位掩码。
  S_IFREG	表示一个常规文件的文件类型常量。
  S_IFDIR	表示一个目录的文件类型常量。
  S_IFCHR	表示一个面向字符的设备文件的文件类型常量。
  S_IFBLK	表示一个面向块的设备文件的文件类型常量。
  S_IFIFO	表示一个 FIFO/pipe 的文件类型常量。
  S_IFLNK	表示一个符号链接的文件类型常量。
  S_IFSOCK	表示一个 socket 的文件类型常量。

• 文件模式常量 以下常量用于 fs.Stats 对象中用于决定一个文件访问权限的 mode 属性

  常量	描述
  S_IRWXU	该文件模式表明可被所有者读取、写入、执行。
  S_IRUSR	该文件模式表明可被所有者读取。
  S_IWUSR	该文件模式表明可被所有者写入。
  S_IXUSR	该文件模式表明可被所有者执行。
  S_IRWXG	该文件模式表明可被群组读取、写入、执行。
  S_IRGRP	该文件模式表明可被群组读取。
  S_IWGRP	该文件模式表明可被群组写入。
  S_IXGRP	该文件模式表明可被群组执行。
  S_IRWXO	该文件模式表明可被其他人读取、写入、执行。
  S_IROTH	该文件模式表明可被其他人读取。
  S_IWOTH	该文件模式表明可被其他人写入。
  S_IXOTH	该文件模式表明可被其他人执行。

[+] 获取文件信息

• fs.stat(path,fn(err,stats)) 异步获取文件信息

  ---

  不建议在调用 fs.open() 、fs.readFile() 或 fs.writeFile() 之前使用 fs.stat() 检查一个文件是否存在。 作为替代，用户代码应该直接打开/读取/写入文件，当文件无效时再处理错误。
  如果要检查一个文件是否存在且不操作它，推荐使用 fs.access()。

  ---

  如果发生错误，则 err.code 会是常见系统错误之一。
• fs.statSync(path) 同步获取文件信息
• fs.fstat(fd,fn(err,stats)) 异步获取文件信息（文件是通过文件描述符 fd 指定的）

  ---

  fstat系统调用接受的是 一个“文件描述符”，而另外两个则直接接受“文件全路径”。文件描述符是需要我们用open系统调用后才能得到的，而文件全路经直接写就可以了。
• fs.fstatSync(fd) 同步获取文件信息
• fs.lstat(path,fn(err,stats)) 异步获取文件信息

  ---

  当文件是一个符号链接时，lstat返回的是该符号链接本身的信息；而stat返回的是该链接指向的文件的信息。 参考资料
• fs.lstatSync(path) 异步获取文件信息
• stats.isFile() 如果是文件返回 true，否则返回 false。
• stats.isDirectory() 如果是目录返回 true，否则返回 false。
• stats.isBlockDevice() 如果是块设备返回 true，否则返回 false。
• stats.isCharacterDevice() 如果是字符设备返回 true，否则返回 false。
• stats.isSymbolicLink() 如果是软链接返回 true，否则返回 false。
• stats.isFIFO() 如果是FIFO，返回true，否则返回 false。FIFO是UNIX中的一种特殊类型的命令管道。
• stats.isSocket() 如果是 Socket 返回 true，否则返回 false。
• stats.value

  属性	描述
  atime	文件数据最近被访问的时间
  mtime	文件数据最近被修改的时间
  ctime	文件状态最近更改的时间
  birthtime	文件创建的时间

[+] 检查文件状态

• fs.access(path,[mode],fn) 判断用户是否有权限操作给定的目录或者是文件

  ---

  fs.constants.F_OK - path 文件对调用进程可见。 这在确定文件是否存在时很有用，但不涉及 rwx 权限。 如果没指定 mode，则默认为该值。
  fs.constants.R_OK - path 文件可被调用进程读取。
  fs.constants.W_OK - path 文件可被调用进程写入。
  fs.constants.X_OK - path 文件可被调用进程执行。 对 Windows 系统没作用（相当于 fs.constants.F_OK）
• fs.accessSync(path,[mode]) 判断用户是否有权限操作给定的目录或者是文件
• fs.existsSync(path) 检测文件是否存在。
  返回值：布尔（true存在.false不存在)

[+] 文件权限

• fs.chmod(path,mode,fn(err)) 修改文件/文件夹权限
• fs.chmodSync(path,mode) 修改文件/文件夹权限
• fs.fchomod(fd,mode,fn(err)) 修改文件/文件夹权限
• fs.fchomodSync(fd,mode,fn(err)) 修改文件/文件夹权限
• fs.lchmod(path,mode,fn(err)) 修改文件/文件夹权限(不解析符号链接)

  ---

  只在 macOS 有效
• fs.chown(path,uid,gid,fn(err)) 更改文件/文件夹所有权
• fs.chownSync(path,uid,gid) 更改文件/文件夹所有权
• fs.fchown(fd,uid,gid,fn(err)) 更改文件/文件夹所有权
• fs.fchownSync(fd,uid,gid) 更改文件/文件夹所有权
• fs.lchown(path,uid,gid,fn(err)) 更改文件/文件夹所有权(不解析符号链接)

[-] 文件监视

• fs.watch(file,[opt],listener(evtype,which)) 监听file的变化，返回的对象是一个fs.FSWatcher

  ---

  file - 可以是一个文件或一个目录
  opt - 如果是一个字符串则指定encoding，否则以对象传入。
  1. persistent - boolean,指明如果文件正在被监视，进程是否应该继续运行。默认 = true
  2. recursive - boolean,指明是否全部子目录应该被监视，或只是当前目录。 适用于当一个目录被指定时，且只在支持的平台（详见 Caveats）。默认 = false
  3. encoding - 指定用于传给监听器的文件名的字符编码。默认 = 'utf8'
  evtype - rename、change、error
  which - 触发事件的文件的名称

  ---

  注意，在大多数平台，当一个文件出现或消失在一个目录里时，'rename' 会被触发 参考资料
• FSWatcher.close() 停止监听 fs.FSWatcher 的变化
• fs.watchFile(file,[opt],listener(current,previous)) 监视file的变化,回调 listener 会在每次访问文件时被调用

  ---

  1. persistent - boolean,指明如果文件正在被监视，进程是否应该继续运行。默认 = true
  2. interval - 表示目标应该每隔多少毫秒被轮询。默认 = 5007
  listener的两个参数表示当前的状态对象和以前的状态对象，是一个fs.Stat实例。
• fs.unwatchFile(file,listener) 停止监视file的变化
  如果指定了 listener，则只移除特定的监听器。 否则，所有的监听器都会被移除，且已经有效地停止监视 filename。
  调用 fs.unwatchFile() 且带上一个未被监视的文件名，将会是一个空操作，而不是一个错误

[-] 打开文件

• fs.open(path,flag,[mode],fn(err,fd)) 异步打开文件

  ---

  path - 文件的路径。
  flags - 文件打开的行为。
  mode - 设置文件模式(权限)，文件创建默认权限为 0666(可读，可写)。
  callback - 回调函数，带有两个参数如：callback(err, fd)。fd为文件描述符。
• fs.openSync(path,flags,[mode]) 同步打开文件。
  返回一个表示文件描述符的整数。
• fs.fdatasync(fd,fn(err)) 刷新数据到磁盘
• fs.fdatasyncSync(fd) 刷新数据到磁盘
• fs.fsync(fd,fn(err)) 同步缓存数据到磁盘
• fs.fsyncSync(fd,fn(err)) 同步缓存数据到磁盘

[-] 读取文件

• fs.readFile(path,[opt],fn(err,data)) 异步读取一个文件的全部内容

  ---

  如果未指定字符编码，则返回的data为原始buffer。
• fs.readFileSync(path,[opt]) 同步读取一个文件的全部内容
  返回path的内容
• fs.read(fd,buffer,offset,length,postion,fn) 异步读取文件
  该方法使用了文件描述符来读取文件。

  ---

  fd - 通过 fs.open() 方法返回的文件描述符。
  buffer - 数据写入的缓冲区。
  offset - 缓冲区写入的写入偏移量。
  length - 要从文件中读取的字节数。
  position - 文件读取的起始位置，如果 position 的值为null，则会从当前文件指针的位置读取。
  callback - 回调函数，有三个参数err, bytesRead, buffer，err 为错误信息，bytesRead 表示读取的字节数，buffer 为缓冲区对象。
• fs.readSync(fd,buffer,offset,length,postion,fn) 同步读取文件。
  返回 bytesRead 的数量。
• fs.close(fd,fn) 异步关闭文件。
  使用了文件描述符来读取文件
• fs.closeSync(fd) 同步关闭文件

[+] 截取文件

• fs.truncate(path,len,fn(err)) 异步截取文件
• fs.truncateSync(path,len) 同步截取文件
• fs.ftruncate(fd,len,fn) 异步截取文件
  使用文件描述符来读取文件。

  ---

  fd - 通过 fs.open() 方法返回的文件描述符。
  len - 文件内容截取的长度。
  callback - 回调函数，没有参数。
• fs.ftruncateSync(fd,len) 同步截取文件

[-] 写入文件

• fs.writeFile(file,data,[opt],fn(err)) 异步写入文件。

  ---

  file - 文件名或文件描述符。
  data - 要写入文件的数据，可以是 String(字符串) 或 Buffer(流) 对象。
  options - 该参数是一个对象，包含 {encoding, mode, flag}。默认编码为 utf8, 模式为 0666 ， flag 为 'w'
  callback - 回调函数，回调函数只包含错误信息参数(err)，在写入失败时返回。
• fs.writeFileSync(file,data,[opt]) 同步写入文件
• fs.appendFile(file,data,[opt],fn(err)) 异步地追加数据到一个文件，如果文件不存在则创建文件。
  data 可以是一个字符串或 buffer。
• fs.appendFileSync(file,data,[opt]) 同步地追加数据到一个文件，如果文件不存在则创建文件。
• fs.write(fd,buffer,[offset],[length],[position],fn(err,bytes,buffer)) 异步写入文件
• fs.writeSync(fd,buffer,[offset],[length],[position]) 同步写入文件
• fs.write(fd,string,[position],[encoding],fn(err,written,string)) 异步写入字符串
• fs.writeSync(fd,string,[position],[encoding]) 同步写入字符串

[+] 修改时间戳

• fs.utimes(path,atime,mtime,fn(err)) 修改文件时间戳

  ---

  atime 参数和 mtime 参数遵循以下规则：
  值可以是 Unix 时间戳数值、Date 对象、或数值字符串如 '123456789.0'。
  如果值不能被转换为数值，或值是 NaN 、 Infinity 或 -Infinity，则会抛出错误。
• fs.utimesSync(path,atime,mtime) 修改文件时间戳
• fs.futimes(fd,atime,mtime,fn(err)) 修改文件时间戳
• fs.futimesSync(fd,atime,mtime) 修改文件时间戳

[-] 重命名/移动

• fs.rename(old,new,fn(err)) 异步重命名文件
• fs.renameSync(old,new) 同步重命名文件

[-] 复制文件

• fs.copyFile(from,to,[flags],fn(err)) 异步复制文件(v8.5.0+)

  ---

  默认情况下，如果 dest 已经存在会被覆盖
  flags 是一个可选的整数，用于指定行为的拷贝操作。唯一支持的 flag 是 fs.constants.COPYFILE_EXCL ，如果 dest 已经存在，则会导致拷贝操作失败。
• fs.copyFileSync(from,to,[flags]) 同步复制文件(v8.5.0+)

[-] 删除文件

• fs.unlink(path,fn) 异步删除文件
• fs.unlinkSync(path) 同步删除文件

[-] 目录操作

• fs.mkdir(path,[mode],fn) 异步创建目录，如果目录已存在，将抛出异常

  ---

  path - 文件路径。
  mode - 设置目录权限，默认为 0777。
  callback - 回调函数，没有参数。
• fs.mkdirSync(path,[mode]) 同步创建目录，如果目录已存在，将抛出异常
• fs.mkdtemp(prefix,[opt],fn(err,folder)) 异步创建一个唯一的临时目录

  ---

  prefix - 临时文件夹名，会生成六位随机字符在其后
  option - 可以是一个字符串并指定一个字符编码，或是一个对象且由一个 encoding 属性指定使用的字符编码。
  folder - 生成的临时目录的路径

  ---

  如果目的是要在 /tmp 里创建一个临时目录，则 prefix 必须 以一个指定平台的路径分隔符（require('path').sep）结尾
• fs.mkdtempSync(prefix,[opt]) 同步创建一个唯一的临时目录
• fs.readdir(path,fn(err,files)) 异步读取目录

  ---

  path - 文件路径。
  callback - 回调函数，回调函数带有两个参数err, files，err 为错误信息，files 为 目录下的文件数组列表。
• fs.readdirSync(path) 同步读取目录
• fs.rmdir(path,fn) 异步删除目录
• fs.rmdirSync(path) 同步删除目录

[+] 链接操作

• fs.link(old,new,fn(err)) 创建硬链接(只能在本券中)
• fs.linkSync(old,new) 创建硬链接(只能在本券中)
• fs.symlink(target,path,[type],fn(err)) 创建符号链接
  异步创建一个名为path且指向target的符号链接

  ---

  type 参数可以设为 'dir'、'file' 或 'junction'（默认为 'file'），且仅在 Windows 上有效（在其他平台上忽略）。 注意，Windows 结点要求目标路径是绝对的。 当使用 'junction' 时，target 参数会被自动标准化为绝对路径。
• fs.symlinkSync(target,path,[type]) 创建符号链接
• fs.readlink(path,[opt],fn(err,link)) 读取软连接信息
• fs.readlinkSync(path,[opt]) 读取软连接信息
• fs.realpath(path,[opt],fn(err,path)) 获取真实路径
• fs.realpathSync(path,[opt]) 获取真实路径

[-] 压缩

[-] 创建http server

• http.createServer([fn(request,response)]) 返回一个新建的 http.Server 实例

[-] http.Server类

• server.listen(80) 指定HTTP服务器监听的端口

[-] http

• http.METHODS 返回解析器支持的 HTTP 方法的列表
• http.STATUS_CODES 返回标准的 HTTP 响应状态码的集合，以及各自的简短描述。 例如，http.STATUS_CODES[404] === 'Not Found'。
• http.globalAgent Agent 的全局实例，作为所有 HTTP 客户端请求的默认 Agent。

[-] https

[-] 网址

• url.parse(urlstr) 解析一个 URL 字符串并返回一个 URL 对象
• url.resolve(from,to) 会以一种 Web 浏览器解析超链接的方式把一个目标 URL 解析成相对于一个基础 URL
• url.format(obj) 返回一个从 urlObject 格式化后的 URL 字符串

[+] URL

• var {URL} = require('url') 引入的url模块是个对象
• new URL(input,[base]) 通过将input解析到base上创建一个新的URL对象。
• url.protocol 获取及设置URL的协议(protocol)部分。
• url.username 获取及设置URL的用户名(username)部分
• url.password 获取及设置URL的密码(password)部分。
• url.hostname 获取及设置URL的主机名(hostname)部分
• url.port 获取及设置URL的端口(port)部分。
• url.host 获取及设置URL的主机(host)部分。
• url.origin 获取只读序列化的URL origin部分。 参考资料
• url.pathname 获取及设置URL的路径(path)部分。
• url.search 获取及设置URL的序列化查询(query)部分部分。
• url.searchParams 获取表示URL查询参数的URLSearchParams对象。
• url.hash 获取及设置URL的分段(hash)部分。
• url.href 获取及设置序列化的URL
  url.toString() / url.toJSON() 值相同

[+] URLSearchParams

• var {URLSearchParams} = require('url') 引入的url模块是个对象
• new URLSearchParams(str/obj) 通过将input解析到base上创建一个新的URL对象。
• params.get(name) 返回键是name的第一个键值对的值。
• params.getAll(name) 返回键是name的所有键值对的值，如果没有满足条件的键值对，则返回一个空的数组。
• params.has(name) 如果存在至少一对键是name的键值对则返回 true。
• params.set(name,val) 将URLSearchParams对象中与name相对应的值设置为value。如果已经存在键为name的键值对，将第一对的值设为value并且删除其他对。如果不存在，则将此键值对附加在查询字符串后。
• params.append(name,val) 在查询字符串中附加一个新的键值对。
• params.delete(name) 删除所有键为name的键值对
• params.entries() 在查询中的每个键值对上返回一个ES6迭代器
• params.keys() 在每一个键值对上返回一个键的ES6迭代器
• params.values() 在每一个键值对上返回一个值的ES6迭代器。
• params.forEach(fn,[arg]) 在查询字符串中迭代每个键值对，并调用给定的函数。
• params.sort() 按现有名称就地排列所有的名称-值对。使用[稳定排序算法][]完成排序，因此保留具有相同名称的名称-值对之间的相对顺序。

[-] 查询字符串

• querystring.stringify(str,[sep],[eq],[opt]) 通过遍历给定的 obj 对象的自身属性，生成 URL 查询字符串。

  ---

  如果 obj 对象中的属性的类型为str,num,bool,arr则属性的值会被序列化。 其他类型的属性的值会被强制转换为空字符串。
• querystring.parse(str,[sep],[eq],[opt]) 把一个 URL 查询字符串 str 解析成一个键值对的集合

  ---

  str = 要解析的 URL 查询字符串
  sep = 用于界定查询字符串中的键值对的子字符串。默认为 '&'。
  eq = 用于界定查询字符串中的键与值的子字符串。默认为 '='。
  opt(obj) =
  
  1. decodeURIComponent - 解码查询字符串的字符时使用的函数。默认为 querystring.unescape()
  2. maxKeys - 指定要解析的键的最大数量。默认为 1000。指定为 0 则不限制。

  ---

  返回一个对象
• querystring.escape(str) 该方法是提供给 querystring.stringify() 使用的，通常不直接使用。 它之所以对外开放，是为了在需要时可以通过给 querystring.escape 赋值一个函数来重写编码的实现。
• querystring.unescape(str) 对给定的 str 进行解码。

[-] 网络

[-] 数据报

[-] 域名服务器

[-] 安全传输层

[+] Worker

• [evt]disconnect
• [evt]error
• [evt]exit
• [evt]listening
• [evt]message
• [evt]online
• worker.disconnect()
• worker.exitedAfterDisconnect
• worker.id
• worker.isConnected()
• worker.isDead()
• worker.kill([signal='SIGTERM'])
• worker.process
• worker.send(msg,[handle],[fn])

[+] 集群

• [evt]disconnect
• [evt]exit
• [evt]fork
• [evt]listening
• [evt]message
• [evt]online
• [evt]setup
• cluster.disconnect([fn])
• cluster.fork([env])
• cluster.isMaster
• cluster.isWorker
• cluster.schedulingPolicy
• cluster.settings
• cluster.setupMaster([settings])
• cluster.worker
• cluster.workers

[+] 终端

• tty.ReadStream
• readStream.isRaw
• readStream.isTTY
• readStream.setRawMode(mode)
• tty.WriteStream
• writeStream.columns
• writeStream.rows
• writeStream.isTTY
• tty.isatty(fd)

[-] error

[-] assert

[-] repl

[-] c++插件

[-] V8引擎

[-] 虚拟机

[+] NPM

• npm init [--yes] 初始化
• package.json name - 包名。
  version - 包的版本号。

  ---

  description - 包的描述。
  keywords - 关键词。
  homepage - 包的官网 url 。
  author - 包的作者姓名。
  contributors - 包的其他贡献者姓名。
  license - 共享协议。

  ---

  repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
  main - 默认入口文件。
  scripts - 可执行的脚本，通过npm run $cmd 例：{"build":"babel src -d lib"}

  ---

  dependencies - 依赖包
  devDependencies - 依赖包，仅用于开发和测试
• npm install [$package] 本地安装指定的模块
  如没有指定包名，则安装package.json中devDependencies中的所有依赖包
• npm install --save-dev $package 本地安装指定的模块，并添加到package.json的devDependencies中
• npm install --save $package 本地安装指定的模块，并添加到package.json的dependencies中
• npm install --g $package 全局安装指定模块
  当目标环境没有时，不会自动依赖安装
• npm uninstall 移除包，同安装包各项参数
• npm update [$package] 更新包
• npm outdated 查看哪些包已经过期
• npm adduser 注册npm资源库
• npm login 登录npm资源库
• npm publish 发布npm模块
• npm unpublish $pak@ver 撤销发布自己发布过的某个版本代码

[-] Doc

• 官方文档
• 中文文档

[-]Info

• !doctype html HTML5
  
  HTML4无框架
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  HTML4有框架
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• lang 简体中文 html lang="zh-cmn-Hans"
  繁体中文 html lang="zh-cmn-Hant"
  参考资料
• title标题
• charset HTML5
  
  HTML4
  
• base 定义页面中所有链接的默认地址或默认目标。
  注释：如果使用了base标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。

[-]Name

• (SEO)

  name	content
  author	作者
  description	描述
  keywords	关键词
  generator	创建者/程序
  copyright	版权信息
  revised	页面的最新版本 ( David, 2008/8/8/ )

• viewport
  width viewport 宽度(数值/device-width)
  height viewport 高度(数值/device-height)
  initial-scale 初始缩放比例
  maximum-scale 最大缩放比例
  minimum-scale 最小缩放比例
  user-scalable 是否允许用户缩放(yes/no)
  minimal-ui 在页面加载时最小化上下状态栏(iOS7.1)
• robots 设定为all：文件将被检索，且页面上的链接可以被查询；
  设定为none：文件将不被检索，且页面上的链接不可以被查询；
  设定为index：文件将被检索；
  设定为follow：页面上的链接可以被查询；
  设定为noindex：文件将不被检索，但页面上的链接可以被查询；
  设定为nofollow：文件将不被检索，页面上的链接可以被查询。
  参考资料
• google
  设置搜索引擎的检索，仅对google有效
  告诉 Google 不显示网站链接的搜索框
  告诉 Google 不提供此页面的翻译
  参考资料

[-]http-equiv

• X-UA-Compatible

  
                          
                          //强制使用IE最高版本及谷歌内核
  
                          
                          //360安全浏览器默认使用极速模式渲染
                      

  
  360浏览器内核控制 Meta 标签说明文档
• Cache-Control不允许百度转码
  旧写法：
  
  新写法：
  
• refresh
  定时让网页在指定的时间n内，跳转到页面http://yourlink；
• windows-target
  强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用
• Page-Enter Duration持续时间（单位：秒）
  Transition滤镜类型。表示使用哪种特效，取值为0-23:
  

  0 矩形缩小	1矩形扩大	2 圆形缩小	3 圆形扩大	4 下到上刷新	5 上到下刷新
  6 左到右刷新	7 右到左刷新	8 竖百叶窗	9 横百叶窗	10 错位横百叶窗	11 错位竖百叶窗
  12 点扩散	13 左右到中间刷新	14 中间到左右刷新	15 中间到上下	16 上下到中间	17 右下到左上
  18 右上到左下	19 左上到右下	20 左下到右上	21 横条	22 竖条	23 以上22种随机选择一种

• expires 网页到期时间
• pragma 禁止缓存和脱机浏览
• set-cookie Cookie过期自动删除
• pics-label IE网页评级
• Content-Security-Policy

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">

  对外部资源加载的限制（允许控制从哪里加载资源）
  参考资料
• x-dns-prefetch-control
  通过设置为 “off” 完全退出 DNS 预取
  强制查询特定主机名 参考资料

[-]Link

• stylesheet 可配合条件注释或指定media媒体查询引入样式表
  

• icon 小ICON图标
  参考资料1 | 参考资料2
• dns-prefetch 提前域名解析
  参考资料1 | 参考资料2
• canonical
  有助于防止出现内容重复的问题
  参考资料

[-]Script

• script 可以写在body区域或底部,推荐放在底部加载

  ---

  type : 如果type属性的值，浏览器不认识，那么它不会执行其中的代码。
  integrity : 指定了外部脚本Hash签名，一旦有人改了这个脚本，导致签名不匹配，浏览器就会拒绝加载。

  ---

  defer : 延迟加载
  async : 异步加载
  一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。
  defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。
• noscript 禁用脚本提示
• IE9- IE9-支持HTML5
  IE9-支持媒体查询
  IE9-支持CSS3选择器
  modernizr

[+]Windows

• msapplication-TileColor Windows磁贴颜色

• msapplication-TileImage Windows磁贴图标

• msapplication-tap-highlight windows phone 点击无高光

[+]iOS

• apple-mobile-web-app-capable 启用 WebApp 全屏模式

• format-detection 禁止识别电话号码/邮件

• apple-itunes-app

• apple-touch-icon 触摸图标，大多数情况下一个180*180即可

[+]Other

• UC Browser

• QQ Browser

[-] DOM

• DOM API

[-] Node

• node.nodeName 返回元素的标记名（大写）。
  如果节点是一个元素节点，则返回标签名；如为属性节点，则返回属性名。
• node.nodeType 返回元素的节点类型（数值）。
  参考资料
• node.nodeValue 返回元素的节点值
  需先取到文本节点，再取文本节点的值。
  由于只有Text节点、Comment节点、XML文档的CDATA节点有文本值，因此只有这三类节点的nodeValue可以返回结果，其他类型的节点一律返回null。同样的，也只有这三类节点可以设置nodeValue属性的值。对于那些返回null的节点，设置nodeValue属性是无效的。

[-] NodeList

• nodelist.item(i) 等同于nodelist[i]
• nodelist.length 节点列表长度

[-] Document

• doc.readyState 返回当前文档的状态
  
  1. uninitalized - 还未开始载入
  2. loading - 载入中
  3. interactive - 已加载，文档与用户可以开始交互
  4. complete - 载入完成
• doc.referrer 返回载入当前文档的来源文档的URL。
  如果当前文档不是通过超级链接访问的，则为null。
• doc.activeElement 返回当前获取焦点元素
• doc.designMode 值为'on'/'off'，IE6-10为大写。 参考资料
  控制当前文档是否可编辑，通常用在制作所见即所得编辑器。
  打开iframe元素包含的文档的designMode属性，就能将其变为一个所见即所得的编辑器。
  iframe.contentDocument.designMode = 'on'
• doc.lastModified 返回文档最后被修改的日期和时间
  10/19/2017 15:24:30
• doc.cookie 设置或返回与当前文档有关的所有cookie
  key=value;...
• doc.domain 返回当前文档的域名
  如果无法获取域名，该属性返回null。
• doc.URL/documentURI 返回文档的URL，必须为大写。
  document.documentURI属性和document.URL属性都返回一个字符串，表示当前文档的网址。不同之处是documentURI属性可用于所有文档（包括 XML 文档），URL属性只能用于 HTML 文档。
• doc.inputEncoding 返回文档的字符编码
  IE8及以下，Oprea不支持
• doc.characterSet 返回渲染当前文档的字符集，比如UTF-8、ISO-8859-1。
• doc.baseURI 返回文档绝对基础URI
  如果无法取到这个值，则返回null。
  该属性为只读。
  IE不支持
• doc.doctype 返回文档类型声明。
  IE8及以下返回null。支持XML。
• doc.defaultView 在浏览器中返回document对象所在的window对象，否则返回null。

[-] Element

• new Image()

  属性	描述
  src	图像src属性值，可读写
  alt	图像alt描述内容
  width	宽度
  height	高度
  naturalWidth	图像的原始宽度，只读
  naturalHeight	图像的原始高度，只读
  complete	返回一个布尔值，表示图表是否已经加载完成
  onload	指定一个图像加载完成后的回调函数
  crossOrigin	图像跨域的CORS设置
  isMap	图像是否为服务器端的image-map，可读写
  useMap	设置图像的usemap属性

• ele.attributes 返回一个元素的属性类数组对象。

  ---

  document.body.attributes[0]
  document.body.attributes.bgcolor
  document.body.attributes['ONLOAD']
• ele.dataset HTML元素节点的标准属性（即在标准中定义的属性），会自动成为元素节点对象的属性。
  href/src/action/method/htmlfor(label for)/...
  data-* 自定义属性，使用dataset.xxx设置
• ele.id 设置或返回元素的id
• ele.tagName 返回指定元素的大写标签名，与nodeName属性的值相等
• dom.title 设置或返回当前文档/元素的标题
• ele.accessKey 设置或返回accessKey一个元素。
  document.getElementById('w3c').accessKey="w"
  可使用Alt + accessKey 设置的键位快捷访问该元素。
• ele.tabIndex 设置或返回元素的标签顺序
  即通过tab键切换时的顺序
  参考资料
• ele.dir 设置或返回一个元素中的文本方向。
  dir = ltr / rtl
• ele.ownerDocument 返回当前节点所在的顶层文档对象，即document对象。

[-] Text

• txt.data data属性等同于nodeValue属性，用来设置或读取Text节点的内容
• txt.length 返回当前Text节点的文本长度。

[-] Attribute

• attr.name 返回属性名称
• attr.value 设置或返回属性值
• attr.specified 检查属性节点是否存在值，返回布尔值
  注意先需获取到的是属性节点

[-] 集合归类

• HTMLCollection （1）HTMLCollection实例对象的成员只能是Element节点，NodeList实例对象的成员可以包含其他节点。
  （2）HTMLCollection实例对象都是动态集合，节点的变化会实时反映在集合中。NodeList实例对象可以是静态集合(如query方法)。
  （3）HTMLCollection实例对象可以用id属性或name属性引用节点元素，NodeList只能使用数字索引引用。
  var elem = document.forms.namedItem('myForm');
  var elem = document.forms['myForm'];
  
• window.document 对于正常的网页，直接使用document或window.document。
  对于iframe载入的网页，使用iframe节点的contentDocument属性。
  对Ajax操作返回的文档，使用XMLHttpRequest对象的responseXML属性。
  对于包含某个节点的文档，使用该节点的ownerDocument属性。
• doc.documentElement 返回文档的根节点（html元素）
• doc.body/head 返回文档的body/head元素
• doc.images 返回文档中所有image对象引用
• doc.embeds 返回网页中所有嵌入对象，即embed标签
• doc.links 返回文档中所有的a.href + area标签。
  document.links.$id > document.links.$name 可按id和name访问,同名时id高于name,同id时,取顺序在前的
  document.links[i] 可按索引访问
• doc.anchors 返回文档中所有的锚点的集合。即带有name属性的a标签。
  document.anchors.length
• doc.forms 返回文档中所有表单的集合。
  document.forms[0]
  document.forms.name1
• doc.scripts 返回页面中所有脚本的集合

[-] 层级查找

• ele.parentNode 返回元素的父节点
• ele.parentElement 返回元素的父element节点
  如果当前节点没有父节点，或者父节点类型不是Element节点，则返回null。
• dom.childNodes 返回元素的子节点数组
• dom.firstChild 返回元素的第一个子节点。
  如果不存在则返回null
• dom.lastChild 返回元素的最后一个子元素。
• dom.hasChildNodes() 检查元素是否具有任何子元素，返回布尔值
• dom.contains(node) 返回一个布尔值，表示参数节点是否为当前节点的后代节点。
  注意，如果将当前节点传入contains方法，会返回true。虽然从意义上说，一个节点不应该包含自身。

[-] 序列查找

• ele.nextSibling 返回该元素之后紧跟的一个节点（处在同一树层级中）
  如没有则返回null
• ele.previousSibling 返回该元素之前紧跟的一个节点（处在同一树层级中）
  如没有则返回null

[-] 条件筛选

• dom.getElementById('id') 返回拥有指定ID的第一个对象的引用。
  如果没有指定ID的元素返回null。
• dom.getElementsByTagName('tag') 返回带有指定标签名的对象的集合。
  *返回文档的所有元素。
  *返回的元素集合中的0为html
• dom.getElementsByClassName('cls') 返回文档中所有指定类名的元素集合。
  IE8及以下不支持。
• dom.getElementsByName('name') 返回带有指定名称的对象的集合。
• dom.querySelector('cssExp') 返回dom范围中匹配指定css选择器的第一个元素。
  传入的是css选择器，且仅返回第一个元素。
  IE8支持，IE6-7不支持。
• dom.querySelectorAll('cssExp') 返回dom范围中匹配指定css选择器的全部元素。
  HTML5新引入，IE8不支持。
  此方式生成的集合，无法用.访问到id和name。是nodelist，非HTMLcollection。
  静态集合，非动态。
• doc.elementFromPoint(x,y) 返回位于页面指定视窗位置最上层的Element子节点。
  如果位于该位置的HTML元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值或超过视口大小），则返回null。

[-] 文本

• doc.creatTextNode('str') 创建文本节点
  这个方法可以确保返回的节点，被浏览器当作文本渲染，而不是当作HTML代码渲染。因此，可以用来展示用户的输入，避免XSS攻击。
• dom.normalize() 合并相邻的文本节点并删除空的文本节点
• txt.splitText(n) splitText方法将Text节点一分为二，变成两个毗邻的Text节点。它的参数就是分割位置（从零开始），分割到该位置的字符前结束。如果分割位置不存在，将报错。
  分割后，该方法返回分割位置后方的字符串，而原Text节点变成只包含分割位置前方的字符串。
• ele.textContent 设置或返回节点的文本内容（返回所有子节点的文本）
  textContent属性自动忽略当前节点内部的HTML标签，返回所有文本内容。
  同理对textContent的字符串设置中如有标签，当做字符串处理，不会解析为Html标签
  IE8及以下不支持
• ele.innerHTML 设置或返回元素的内容
  如果插入的文本包含 HTML 标签，会被解析成为节点对象插入 DOM。注意，如果文本之中含有script标签，虽然可以生成script节点，但是插入的代码不会执行。
• ele.outerHTML 返回一个字符串，内容为指定元素节点的所有HTML代码，包括它自身和包含的所有子元素。
  被替换后，原变量将保存原信息在内存中
• window.getSelection() 返回一个Selection对象，表示用户现在选中的文本。
  使用Selction对象的toString方法可以得到选中的文本。

[-] 添加

• doc.creatElement('tag') 创建元素节点
• ele.cloneNode([true/false]) 克隆该节点，包括属性和值。
  传入true表示递归复制该节点的所有子孙节点。
• doc.importNode(node,deep) 把一个节点从另一个文档复制到该文档以便应用。
  第2个参数为必须，true代表还要复制该节点的所有子孙节点。
  IE8及以下不支持。
  参考资料
• doc.creatDocumentFragment() 创建一个虚拟的节点对象，节点对象包含所有属性和方法。
  var temp=document.createDocumentFragment();
• doc.creatComment('str') 创建注释节点

[-] 修改

• dom.appendChild(node) 向目标节点末尾添加新的子节点。 (如为原存在于原文档中的节点则原位置会被移除)
  你可以使用 appendChild() 方法移除元素到另外一个元素。
  如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。
  如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
  
• dom.insertBefore(node,exist) 向目标节点前添加新的节点。
  如果被添加的节点是原文档中的节点，则原节点会被移除。
• ele.replaceChild(new,old) 将某个子节点替换为另一个。
  它返回被替换走的那个节点

[-] 删除

• dom.removeChild(node) 删除指定的子节点。
  删除成功则返回被删除的节点，删除失败返回null。
• dom.remove() 将当前元素节点从DOM树删除

[-] 其它

• doc.write('exp') 向文档写入内容
  
• doc.writeln('exp') 向文档写入内容，并在末尾添加一个换行符
• doc.open([MIME],[replace]) 打开一个输出流来收集docment.write()方法输出的内容。
  MIMEtype，默认值是 "text/html"。
  replace，当此参数设置后，可引起新文档从父文档继承历史条目。
  它实际上等于清除当前文档，重新写入内容。
• doc.close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。

[-] MutationObserver

• new MutationObserver(fn(arr,obs)) 使用时，首先使用MutationObserver构造函数，新建一个观察器实例，同时指定这个实例的回调函数。
  回调函数，会在每次 DOM 变动后调用。该回调函数接受两个参数，第一个是变动数组，第二个是观察器实例
• obs.observe(dom,option) observe方法用来开始监听，它接受两个参数
  第一个参数是所要观察的 DOM 节点
  第二个参数是一个配置对象，用来指定所要观察的特定变动

  
      var article = document.querySelector('article');
  
      var  options = {
        'childList': true,
        'attributes':true
      } ;
  
      observer.observe(article, options);
  

  观察器所能观察的 DOM 变动类型（即上面代码的options对象），有以下几种
  childList：子节点的变动。
  attributes：属性的变动。
  characterData：节点内容或节点文本的变动。
  subtree：所有后代节点的变动。
  attributeOldValue：类型为布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。
  characterDataOldValue：类型为布尔值，表示观察characterData变动时，是否需要记录变动前的值。
  attributeFilter：类型为数组，表示需要观察的特定属性（比如['class','src']）
• obs.disconnect() 停止观察。调用该方法后，DOM 再发生变动，也不会触发观察器
• obs.takeRecords() 清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组。
• MutationRecord DOM 每次发生变化，就会生成一条变动记录。这个变动记录对应一个MutationRecord对象，该对象包含了与变动相关的所有信息。Mutation Observer 处理的是一个个MutationRecord对象所组成的数组。

  ---

  type：观察的变动类型（attribute、characterData或者childList）。
  target：发生变动的DOM节点。
  addedNodes：新增的DOM节点。
  removedNodes：删除的DOM节点。
  previousSibling：前一个同级节点，如果没有则返回null。
  nextSibling：下一个同级节点，如果没有则返回null。
  attributeName：发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
  oldValue：变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。

[-] 属性

• ele.getAttribute('attr') 返回指定元素的属性值
  等同 getAttributeNode('attr').value
• ele.removeAttribute('attr') 从元素中删除指定的属性
• ele.setAttribute('attr','val') 设置元素指定的属性值
  IE8及以下不支持
• ele.hasAttribute('attr') 检测元素是否具有某个属性，返回true/false
  IE8及以下不支持
• ele.hasAttributes() 检测元素是否具有任何某个属性，返回true/false
  IE8及以下不支持
• dom.creatAttribute('attr') 创建一个属性节点，并返回该attr对象。
• ele.removeAttributeNode('attr') 删除指定元素节点并返回移除后的节点
• ele.setAttributeNode('attr') 设置或改变指定属性节点
  需通过nodeValue来最终改变对应值

[-] 交互

• ele.focus() 设置元素获取焦点
• ele.blur() 设置元素移除焦点
• dom.hasFocus() 检查元素是否获取焦点，返回布尔值
• ele.contentEditable 设置或返回元素的内容是否可编辑
  返回inherit/true/false
  如果父级元素是可编辑，则子元素内容也是可编辑的
• ele.isContentEditable 返回元素的内容是否可编辑
  返回true/false

[-] 类名

• ele.className 设置或返回元素的class属性，每个class之间用空格分割。
• ele.classList 返回该元素的类的一个对象。 IE10以下不支持。
  

  方法	描述
  .value	完整类名
  .add(class1,class2,...)	添加新的类名，如果已经存在则不会添加
  .remove(class1,class2,...)	移除指定类名，如果移除不存在的类名，不会报错
  .toggle(class,true/false)	切换指定类名。 第一个参数为切换的类名。 如果存在时，移除并返回false；如果不存在，添加并返回true。 第二个参数，为强制设置布尔值。
  .contains(class)	返回布尔值，判断指定类名是否存在
  .length	类名个数
  .item(i) / [i]	返回索引上的类名

[-] 样式

• ele.style[.prop] 设置或返回元素的样式属性
  返回的是一个对象，通过style.classname来设置具体，只取行内。
  其中cssText属性，可以读写或删除整个样式
• window.getComputedStyle(dom,[':before'])[.prop] 返回一个包含该节点最终样式信息的对象。
  所谓“最终样式信息”，指的是各种CSS规则叠加后的结果。

  ---

  getComputedStyle方法还可以接受第二个参数，表示指定节点的伪元素（比如:before、:after、:first-line、:first-letter等）。
• style.getPropertyValue(prop) 读取某个CSS属性
• style.setProperty(prop,val) 设置某个CSS属性
• style.removeProperty(prop) 删除某个CSS属性

[-] 样式表

• doc.styleSheets 返回网页的所有样式表的类数组对象
  它包括link节点加载的样式表和style节点内嵌的样式表。

  属性	描述	示例
  media	media属性表示这个样式表是用于屏幕（screen），还是用于打印（print），或两者都适用（all）。该属性只读，默认值是screen。	document.styleSheets[0].media.mediaText //all
  disabled	一旦样式表设置了disabled属性，这张样式表就将失效。注意，disabled属性只能在JavaScript脚本中设置，不能在HTML语句中设置。	document.querySelector('#linkElement').disabled = 'disabled';
  href	href属性是只读属性，返回StyleSheet对象连接的样式表地址。对于内嵌的style节点，该属性等于null。	document.styleSheets[0].href
  type	type属性返回StyleSheet对象的type值，通常是text/css	document.styleSheets[0].type // "text/css"
  title	title属性返回StyleSheet对象的title值。	-
  parentStyleSheet	CSS的@import命令允许在样式表中加载其他样式表。parentStyleSheet属性返回包含了当前样式表的那张样式表。如果当前样式表是顶层样式表，则该属性返回null。	-
  ownerNode	ownerNode属性返回StyleSheet对象所在的DOM节点，通常是link或style。对于那些由其他样式表引用的样式表，该属性为null。	document.styleSheets[0].ownerNode // [object HTMLLinkElement]
  cssRules	cssRules属性指向一个类似数组的对象，里面每一个成员就是当前样式表的一条CSS规则。	sheet.cssRules[0].cssText styleSheet.cssRules[0].style.color = 'red';

• sheet.insertRule('str',n) 在当前样式表的cssRules对象插入CSS规则
• sheet.deleteRule(n) 删除cssRules对象的CSS规则
• cssRule.*

  属性	描述
  cssText	返回当前规则的文本
  parentStyleSheet	返回定义当前规则的样式表对象
  parentRule	返回包含当前规则的那条CSS规则。
  type	返回有一个整数值，表示当前规则的类型 1：样式规则，部署了CSSStyleRule接口 3：输入规则，部署了CSSImportRule接口 4：Media规则，部署了CSSMediaRule接口 5：字体规则，部署了CSSFontFaceRule接口
  selectorText	返回当前规则的选择器 //.class
  style.prop	style属性返回一个对象

  CSSStyleDeclaration对象