最近在公司接手公司后端模板的任务，于是从网上下载了模板作为参考，并记录一些有用的知识。
CSS 部 分
- css3属性-webkit-font-smoothing，兼容写法：
-webkit-font-smoothing: antialiased; /*chrome、safari*/ -moz-osx-font-smoothing: grayscale;/*firefox*/
它有三个值：
| value | none | subpixel-antialiased | antialiased |
|---|---|---|---|
| 值 | 对低像素的文本比较好 | 默认值 | 抗锯齿很好 |
- text-transform 属性控制文本的大小写;
| value | none | capitalize | uppercase | lowercase | inherit |
|---|---|---|---|---|---|
| 值 | 默认 | 每个字母大写 | 大写字母开头 | 小写字母开头 | 继承父级属性 |
font书写规则
font-family（字体族）: “Arial”、“Times New Roman”、“宋体”、“黑体”等;
font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）;
font-variant (字体变化): normal（正常）或small-caps（小体大写字母）;
font-weight (字体浓淡): 是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;
font-size（字体大小）: 可通过多种不同单位（比如像素或百分比等）来设置, 如：12px，12pt，120%，1em
顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
栗子:
//14px/1:字体大小和行高的合写 .font{ font:normal normal normal 14px/1 'Material-Design-Iconic-Font'; }-
文本渲染属性 text-rendering
text-rendering属性是一个SVG属性，且目前只支持谷歌和火狐浏览器。其值如下：
1.auto：当绘制文本时，浏览器会进行智能识别，何时应该从速度、清晰度和几何精度方 面进行优化。
2.optimizeSpeed：当绘制文本时，浏览器会着重渲染速度，而不是清晰度和几何精度。
3.optimizeLegibility：当绘制文本时，浏览器会侧重文本的可读性（清晰度），而不是渲染速度和几何 精度。
4.geometricPrecision：当绘制文本时，浏览器会着重几何精度，而不是清晰度和渲染速度。JS 部 分
1. appendChild、insertBefore和insertAfte
appendChild用法
target.appendChild(newChild)
newChild作为target的子节点插入最后的一子节点之后insertBefore用法
target.insertBefore(newChild,existingChild)
newChild作为target的子节点插入到existingChild节点之前 existingChild为可选项参数，当为null时其效果与appendChild一样insertAfter用法
*JS本身是没有这个方法的 *，但是可以通过insertBefore来创造出来
function insertAfter(newEl, targetEl) { var parentEl = targetEl.parentNode; if(parentEl.lastChild == targetEl) { parentEl.appendChild(newEl); }else { parentEl.insertBefore(newEl,targetEl.nextSibling); }
总结：
1、appendChild和insertBefore是做对节点的方法来使用的，而insertAfter只是自定义的一个函数
2、insertBefore相对于appendChild来说，比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。
3、使用appendChild和insertBefore来插入新的节点前提是，其兄弟节点必须有共同的父节点
2.getComputedStyle与currentStyle获取样式(style/class)
通过document.getElementById(element).style.xxx可以获取元素的样式信息但是对于通过class属性引用的外部样式表就获取不到了
全局方法 *getComputedStyle *:
获取到当前对象样式规则信息，如：getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距,但是存在兼容性，IE浏览器不识别此方法。
IE方法 *currentStyle *:
兼容写法：
return window.getComputedStyle?window.getComputedStyle(obj,null).paddingLeft :obj.currentStyle.paddingLeft;
