今天完成的任务

a.任务13的编写完成

b.任务13深度思考学习

b.拓展只是

明天的计划

a.任务13的代码改善

b.策划栏的编写

C.拓展知识

遇到的问题
a.第二个页面格子的改善不是很顺利，以前做的时候也是磕磕绊绊的做出来的，选择重新温习发现前面套了4-5层的嵌套，

赶紧打乱重写，这次直接弄的3层嵌套，1：把全部小格子包起来的父元素；2.外层的正方形+边框(开始本来是想用背景色做的，想让白边随着width而增加，然后太麻烦了，因为这个正方形用的是vw(也用了百分比，结果比vw更复杂，而且不美观就放弃了）并且要用Padding来填充满，造成了里面的字体无法

调整垂直居中；3.里面的2个小长方体，注意合起来等于正方体即可； PS:主要注意这里的数值最好全部百分比，这样美观一些，不然屏幕拉大，定值的东元素不变就造成了大大小小难看。

b.下面小图标的隐藏， 简单的就是设置hover效果，这里就很好的让我理解了display:none;和opacity的区别（开始用的display:none;掉坑里面了）：display:none；是直接把东西都隐藏了，离开了文本档，不占地方；opacity只是看不见了，但是东西还在，占地方，还能点击。 所以我开始用display的时候，他点一下就弹出了下面4个小图标，直接破坏了布局，很丑。后来改用opacity就好多了。

c.audio，这个还是老办法，旋转-缩小-调节位置-缩小。  不过还是想知道audio缩小到一定底部，因为width不够，内容都挤在一次成...这样了，功能都点不了，有没有解决方法（想以后直接缩小到一定值，免得每次调位置，而且有的按钮到其它地方万一被乱点点到也不好）。

收获

css reset主要是因为html标签在浏览器中都有各自的默认样式，比如： p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE 下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻 烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简 单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

sass：

在Sass中，除了在设置属性的值的时候，我们可以使用变量或循环等方式赋值以外。属性的名称，

选择器名称等，都可以使用一种叫插值的方式将字符串插入进来。如果属性值是一个简单数字或者

字符串，我们可以使用变量的方式来实现。但如果属性值是一个复杂的数据类型，我们就必须使用

插值的方式来实现。如果你想要在Sass中构造一个新的选择器名、新的属性名以及新的属性值，应

该考虑使用“插值#{}”来实现。

插值不可用的情况：

1.插值不能用在属性的值中，也就是不能出现在冒号后边，否则会报错，无法识别。

2.不能用来调用混合宏，如@include updated-#{$flag}   ，这里的插值同样不会被识别。

（但经过试验，@extend后边使用插值是可以的）。