深度思考：

px、em、rem、%、vw、wh、vm等单位有什么区别？

1、px

px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

2、em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

3、rem

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

4、%

一般宽泛的讲是相对于父元素，但是并不是十分准确。

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

5、vw

css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。

举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

6、vh

css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。

举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

7、vm

css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm

举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。

今天完成的事情：

对任务十一、十二、十三完成sass编译；scss的一些新功能如下

1. 使用变量;
   1-1. 变量声明;
   1-2. 变量引用;
   1-3. 变量名用中划线还是下划线分隔;
2. 嵌套CSS 规则;
   2-1. 父选择器的标识符&;
   2-2. 群组选择器的嵌套;
   2-3. 子组合选择器和同层组合选择器：>、+和~;
   2-4. 嵌套属性;

明天计划的事情：

完成任务十四、十五的编译

遇到的问题：

在任务十三中，给第二个页面添加一个侧边导航栏，

刚开始是想通过display：none来实现，发现这个好像需要修改一下布局，好像也不太懂，然后去坑呼看了看，用绝对定位将导航栏添加left： -200px;

然后使用input和label点击把left：0；，就可以实现这个功能了；我还加上overflow-x：hiddern,把横的滚动条去掉

收获：

用多了input和label对两组合越来越熟练了，还发现了隐藏滚动条的方法；css的命名和书写顺序