1.完成并提交任务12 ，完成部分任务13

明天计划的事情：

1. 完成任务13

遇到的问题：

 1. 设置图下正方形的时候，按照我设置的大小，应该是三个一行的，但是却只有两个，起初我以为是因为给他们设置了内联块元素的原因，所以给父元素设置了font-size为0，但是发现虽然间距有缩小，但还没达到三个

   1.1 询问师兄后发现，是因为我给body设置了letter-spacing为1px，(字母间距，可为负数，父元素设置这个，即使设置font-size为0，也会给子元素内联/内联块增加的空白节点，多少px就增加多少)

收获： 

任务名称：css12

成果链接：https://chenchenchen96.github.io/task/task12/html/task-12.html

任务耗时：2019.5.13-5.14（2天）

官网脑图：

我的脑图：

任务总结：

下面服务价格跟自我介绍， 服务价格那一块设置的是padding-left;14px;  width：85%; margin：0 auto; 然后我给自我介绍哪一块设置的是margin-left：calc（7.5% + 14px），但是并不对齐，下面是我设置的margin-left：calc（7.5% + 7px）然后才对齐，找不到原因

询问师兄后发现，因为我没给服务价格那一块设置box-sizing：border-box；没有设置这个padding，就会变成原先的宽度是85%，变成85%+14px，外面margin平分的15%就少了14px，所以左边的边距是（15%-14px）/ 2+14px 右边就是 （15%-14px）/ 2

这一个任务主要是了解sass，运用sass，sass的安装以及如何在vscode中使用，了解这个后精简一下之前的代码，其他的没有什么难度

sass是一种css开发工具，提供更多便利的写法，使得css的开发变得简单，可维护

1 变量：以$开头，如果变量需要镶嵌在字符串之中，就必须写在#{ }中  

2 计算功能

3 嵌套：允许选择器嵌套，属性也能嵌套，但注意加上冒号，父元素选择&

4 注释：/* */会保留到编译后的文件 /*后面加 ! 表示是重要注释即使是压缩模式编译，也会保留这行注释   //这注释之保留在saa原文件中，编译后被省略

5 继承：@extend命令

6 混合：@mixin定义代码块(可以指定参数和缺省值)         @mixin x( )          @include调用代码块(可以根据需要加入参数)      @include x( )

7颜色参数

8插入文件：@import

9 条件语句：@if   @else

10 循环语句：@for   @while  @each

11 自定义函数