任务十

今天完成的事情

1. 1. 学习less的基本语法。
2. 2.下载node.js,使用npm添加less.js，在webstrom中配置less文件，更改filewatcher的环境。配置完成后可以在webstrom上新建less文件并同步编译css文件。
3. 3.使用less完成任务十一。
4. 3.整理vertical-align的生效方式与应用（进行中），.:after伪类+content+vertical-align实现内联元素垂直居中。
5. css代码。

6. <style>
     .pic_box{
   width:300px;
   height:300px;
   background-color:#beceeb;
   /*font-size:0;*/
        /**font-size:200px;*/
        text-align:center;}
   .pic_box span{
   display: inline-block;
   width: 100px;
   height: 100px;
   background-color: gold;
   vertical-align:middle;
   }
   .pic_box label{
   display: inline-block;
   width: 100px;
   height: 100px;
   background-color: orangered;
   vertical-align:middle;
   }
   .pic_box:after{
   display:inline-block;
   width:0;
   height:100%;
   content:"center";
   vertical-align:middle;
   overflow:hidden;}
   </style>

7. html代码

8. <div class="pic_box">
     <span>helloworld</span>
     <label ></label>
   </div>

最终效果：

明天计划的事情

1. 1.完成任务十二。
   
2. 2.抽空继续研究vertical-align。

遇到的问题

1. 1.在webstrom上配置less文件时，照着教程一步一步来，可就是出错，试了一上午，排除了环境变量错误，nodejs版本号不对，中文路径等错误后，终于发现是npm下载的less的问题。npm下载的less默认放在用户的appdata文件夹，我的用户文件夹是中文的，所以一直报错，中文路径害死人啊。将less的相关文件放到英文路径的文件夹后完美解决。

2.less的抽象问题，哪些属性适合单独抽出来用作变量？哪些模块适合抽象成函数？什么时候该使用less嵌套什么时候不该用，这些都没有什么经验。

收获

1. 1.小课堂上师兄讲解了九宫格布局的几种方法，我能想到的有浮动，媒体查询，flex这三种方法。
2. 2.学会了less的基本语法与环境的配置。