一、position属性四个值区别和用法
1、static（静态定位）：默认值，无法使用top,bottom,left,right以及z-index，这种定位方式用margin来改变位置，并且不脱离文档流。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。（一般用作改变层级和作为绝对定位的参照物）
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。如果说他的父级定位是默认的，那么他就会继续向上找父级的父级，直到找到非static定位元素为基准点来进行定位，在没有父元素的条件下，它的参照为body。
4、fixed（固定定位）：固定定位，这种定位是相对于浏览器的窗口进行定位，通常用来显示一些提示信息，比如大多数网站上的右下角都有一个回到顶部的按钮，这种定位脱离文档流，元素的位置通过 left, top, right 以及 bottom 属性进行规定。可通过z-index进行层次分级。
二、display:none、visibility ：hidden、 opacity:0的区别是什么
- opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
- visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
- display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
三、居中方法
四、css3 transtion和animation区别
- 1. 触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。
- 2. 循环。 animation可以设定循环次数。
- 3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
五、前端性能优化
- 减少 HTTP 请求数量
- CSS Sprites （CSS精灵图，网页图片应用处理方式 ）
- 合并 CSS 和 JS 文件
- 采用 lazyLoad(懒加载)
- 控制资源文件加载优先级
- 利用浏览器缓存
- 减少重排（Reflow）
- 减少 DOM 操作
-
使用CDN加速（内容分发网络）
-
图标使用 IconFont 替换
六、（未完待续）
来源：oschina
链接：https://my.oschina.net/u/3982771/blog/3158517