任务十二

今天完成的事情

1. 1. 学习less的文件结构。
2. 2.使用npm添加auto-prrefixer代码自动补全工具，在webstrom中配置auto-prrefixer插件工具的参数，修改默认nppm下载文件的位置。
3. 3.使用less完成任务十二。

明天计划的事情

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

遇到的问题

1. 1.使用npm下载auto-prefixer时，因为修改了默认的文件安装路径，所以一直报错，提示网络无法连接，将其网络代理参数更改后成功下载。

2虽然弄懂了less的基本语法与写作规则，但是对于整体上用less如何书写，都比较模糊。上网查看了百度efe前端团队提供的est,est 是一个用less书写的框架。est提供了一系列方便快捷的 mixin，只在调用时才输出代码。est 不希望提供直接给 HTML 调用的类名，用「样式类」污染 HTML 代码的语义。有一点需要注意的是官网提到的浏览器兼容的函数，已经没有兼容性写法了，取而代之的是使用 Autoprefixer 来处理浏览器前缀相关的兼容性问题。

整个est代码量不多，并且也有大量的讲解，所以看起来比较容易。对于使用less书写页面的时候，首先需要应该建立几个基本的公用的less文件。

1.variables

这个文件主要用来定义变量，比如颜色，字体大小，浏览器兼容版本等。当我们需要调整网站主题颜色时，在这里更改即可。

ex:

@defalut-font-color

默认的文字颜色。

默认值：#666‍‍

2.normalize

编写全局统一的样式，比如h1的大小，input的边框颜色。

ex：‍‍h6 {    font-size: 0.67em;    margin: 2.33em 0;}‍‍

3.reset

默认样式重置的文件，根据个人习惯自己自定义。

比如 *{padding：0}；

4.compatibility

兼容性函数文件

‍‍ex：less     .box {    .box-sizing(border-box); }‍‍

      css       ‍‍.box {    -webkit-box-sizing: border-box;      

                              -moz-box-sizing: border-box;           

                               box-sizing: border-box;

}‍‍

官方不推荐使用这个处理兼容性的函数文件，推荐使用auto-prrefixer自动处理兼容性。

5.util

辅助类函数。

‍‍ex:.container {    .clearfix(); }‍‍

‍‍.container {    *zoom: 1;}

.container:before,.container:after {   display: table;    content: "";}

.container:after {    clear: both;}‍‍

6.typography

文字排版函数。比如省略号样式，当文字超过容器宽度时，超出部分文字隐藏并显示省略号。

‍‍.cell {width: 120px;    .ellipsis(); }

.cell {

width: 120px;   

 overflow: hidden;   

 -o-text-overflow: ellipsis;      

 text-overflow: ellipsis;   

 white-space: nowrap;}‍‍

7.grid

布局文件，最好自己自定义。

8其他

根据实际需要，放项目其他的一些常见模块。比如形状，文字效果等。

将这些基础的less文件书写好后，再开始写页面会事半功倍，并且也利于网站的维护，需求的变更。

收获

1. 1.学习了百度est框架的文件基本架构。
2. 2.小课堂上师兄讲解了iphone手机上fixed布局出现的问题，并给出了相应的解决方案。其中一种解决方案就是使用flex布局，用高度来撑开，在手机上flex的兼容性较好，所以算是一个不错的解决方案。