昨天，星期一，按国际惯例，很忙，再撸上几把游戏，就彻底水了，今天本想补回来，结果一时脑残把远程仓库上以前写的任务全删了，一阵不可描述的操作之后，本地也没了。颤抖着双手折腾了好长时间才把文件恢复过来，用了那么久的git，第一次切身体会到它的好处。当然收获也很大，恢复文件熟练度+1。事实证明，做事情务必要带好自已的脑子。

【今天完成的事】

1. 跟着廖雪峰的JS课程，看了一些js的基础知识，学的十分一言难尽。

2. 用less完成了任务11，本来是想学sass的，发现还要装ruby，本着能省就省的原则（跟我走南闯北的电脑内存即将爆炸）转而投靠了可以在node.Js上玩耍的less（node.js是跟着廖雪峰学习js时候装的，不能浪费）。

less既可以在客户端（浏览器，通过引用less.js的文件来解析）也可以在服务端（借助node.js）使用。在浏览器上使用是需要注意，在本地打开时（也就是url地址开头为file或者有跨域访问的情况时）是会报错的，因为浏览器端使用less时是使用ajax来拉取的，用配置好的nginx服务器访问页面即可。不过我更推荐的是node.js配合sublime Text3插件的方法，能够即时编译即时查看效果，强推。

（1）首先要安装node.js, 去官网下载，按顺序next即可，实在不放心，网上安装教程一搜一大把。

（2）在sublime上安装less插件（因为sublime本身不支持less语法高亮），在package Control(这个用sublime应该都知道)>install package>输入less回车即可。

（3）安装less2css插件，less to css顾名思义，保存less时自动生成css文件，安装方法同上。

（4）在node.js命令行中输入： npm install less -g；）

（5）在node.js中安装less-plugin-clean-css插件，命令行：npm install less-plugin-clean-css -g

随后重启sublime，搞定。

注意：1. less自动编译出的css文件可能会被压缩成一行，这个只需在Preferences → Package Settings → Less2Css → Settings-Default中将"minify": true中的true改成false即可。

          2. 编译后的css文件的缩进可能会变成两个空格，这个怎么改我暂时还没找到方法，师兄给支个招呗？

3. less和sass的语法规则好像有很多相似之处。less有四板斧：变量，混合，嵌套，函数&运算。总体不是很难，但是目前还没出新手村。

（1）变量：感觉有点像boostrap中的预定类，就是把重复的属性给抽离出来做成一个可以全局或者某个作用域内引用的变量（？？感觉叫常量更准确点）。boostrap中也是欲先定义好一个类以供随时引用（所以less才叫预处理语言吗？）。

（2）混合与boostrap预定义类更类似，有点像是变量的加强版，变量是定义一个属性值，但是混合可以抽出多个属性值对，而且既可以传入参数还可以引入变量，举个小栗子：

引用的时候后面直接加个括号，写上参数即可，参数可以是其他变量。

注意： 此处有一个坑需要注意：下图中的URL路径里必须带引号，否则报错；

（3）嵌套，太简单了，略。

（4）这里的函数都是包装好的，直接调用就好，我目前也只是随便看了看，尚未用到，具体还有待学习。

        计算部分相对比较自由，这样的，还有这样的视情况而定。

4. 用boostrap+less重写了一遍任务10，中间发现了一个值得注意的点，在常用的垂直居中方法里有一种是将line-hieght和height设置一样，不过后来经试验发现，不设高度只设行高也可以实现居中，因为高度被文字（行高）给撑开了。

5. 重写任务10时脑抽了，陷入了一个以前踩过的坑，以前还写过demo来着，被自已的智商给惊呆了。

上图中有两个问题：（1）将屏幕缩得足够小时，流程图上原本应该被线平分两半的圆，往线的上面跑了，而且它是随着屏幕的变化而变化的。

                              （2）当时小圆点我用的是绝对定位，按理说原点脱离了文档流后，直线应该直接顶到父元素的，但是图上自已多出了一片空白。

这个比较简单，demo就不上了，简单解释一下，这两点还可以牵扯到另一个比较经典的问题，就是div中包裹的img四周又是会出现空白，img和span相似（上图中的横条就是span display：inline-block），实际上是和字体大小相关，当然具体还要牵扯到vertical-align 和line-hight等，张鑫旭大神的博客写的很清楚，第二个问题的解决方法就是将span display：block即可，或者font-size：0；第一个问题是因为我之前用了媒体查询改变HTML的font-size，字体一变化，空隙就变化，小圆点就会变动。归根结底它们得的是同一种病。（第二次踩进这个坑，自我警示一下！）

6. 很有灵性的pointer-event，具体参见张大神的博客。

【明天计划的事】

1. 继续写任务

2. 搞个学习计划，每天漫无目的的学，效率太低。

【遇到的问题】

没什么太大的问题，基本都解决了。

【收获】

如上；