今天完成了什么：

讲解小课堂；

同步官网和github小课堂；

今天遇到了什么问题：

同步小课堂同步到github的时候出了一些问题，最后求助师兄得以解决。

今天收获了什么：

讲小课堂的时候突发奇想竟然可以隐藏元素而且有时候不占空间又不占空间，那么还有什么办法可以做到隐藏元素呢，想了下就查了 下资料，获得了以下技能，前端的东西真的是奇淫技巧一堆啊。

display:none

设置元素的display为none是最常用的隐藏元素的方法。将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。

.hide {
    display:none;
}

visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景

除了以上俩中常用的属性，我们还有

opacity:0

opacity属性我相信大家都知道表示元素的透明度，而将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。

设置height，width等盒模型属性为0

这是我总结的一种比较奇葩的技巧，简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，这算是一种奇技淫巧。

在响应事件下部分元素能被响应，有些元素不能被响应，我也不知道正不正确，可能学到的知识还不够深，可能还需要以后来纠正。

1、display:none：元素彻底消失，很显然不会触发其点击事件
2、visibility:hidden：无法触发其点击事件，有一种说法是display:none是元素看不见摸不着，而visibility:hidden是看不见摸得着，这种说法是不准确的，设置元素的visibility后无法触发点击事件，说明这种方法元素也是消失了，只是依然占据着页面空间。
3、opacity:0：可以触发点击事件，原因也很简单，设置元素透明度为0后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发点击事件
4、height:0：将元素的高度设置为0，并且设置overflow:hidden。使用这种方法来隐藏元素，是否可以触发事件要根据具体的情况来分析。如果元素设置了border，padding等属性不为0，很显然，页面上还是能看到这个元素的，触发元素的点击事件完全没有问题。如果全部属性都设置为0，很显然，这个元素相当于消失了，即无法触发点击事件。

关于transition过渡效果的话：

1、display:none：完全不受transition属性的影响，元素立即消失
2、visibility：hidden：元素消失的时间跟transition属性设置的时间一样，但是没有动画效果
3、opacity和height等属性能够进行正常的动画效果

另外搜索了下还有俩中方法可以去隐藏元素：

1、设置元素的position与left，top，bottom，right等，将元素移出至屏幕外

2、设置元素的position与z-index，将z-index设置成尽量小的负数

今天再重新学了下如何同步下课堂资料到github：

首先我们要新建一个库。也就是去打开葡萄藤的github然后在右上角点击fork，过不久就会在自己的仓库见到这个项目。

然后我们在我们自己的仓库里点进去修改

 点进去之后点upload上传文件，把ppt课件拖进去就上传成功了

我们除了ppt还需把html引入的图片上传，我们上传到img图片里面操作是一样的。点击下来请求，然后把我们的项目同步到官网的仓库里，如下图，注意方向。

这里要注意的是，第一次用了fork下载葡萄藤的项目后以后要同步官网的到我们那里只需要点击下拉请求然后注意下图的顺序就行了，再点击greate绿色的就同步到我们仓库了

明天计划：

任务8继续。