1.完成了任务8 https://github.com/aliendaisy/TASK-7to8/blob/master/task8

2.开始任务9

3.收获：

在做任务8的过程中，碰到了一些问题：

a line-height的用法，以前一直以为line-height只是用来调整行高的，而如果和height一起用时，可以使文字垂直居中。

b overflow：hidden的用法不仅仅局限于隐藏超出部分。因为刚做的时候，没有给li设置overflow：hidden样式，导致li在float：left之后，li的内容不在框内。因此百度了这个属性，发现overflow：hidden的作用其实有好多。而出现我这个现象的解释，我的理解是我没有给li定出高度值，而设置overflow：hidden给li定型了，使li有了物理空间。若不设置的话，li就是空的。其它还查到了一种情况：

<div class="grandpa">

 <div class="father">

   <div class="son"></div>

 </div>

</div>

通俗点说，若爷爷是相对定位的，爸爸规定了overflow：hidden，儿子是绝对定位的，此时，儿子溢出部分是否隐藏取决于爷爷的overflow值时什么，而不是取决于爸爸。

c 因为任务8有表格的绘制，在使用ul li时需要嵌套好多层，在写的时候一定要很清楚哪个盒子包着哪个盒子，才不会脑子乱掉。。。

d 学会了锚点的建立；

e 在编辑表格时，box-sizing属性很好用，可以规定width是到border为止，而不是原先的content，因此可以用width百分比表示来编辑左右的列宽度。

f display属性。我先是在li上写上display：none，然后在li：hover写了display：block，想要实现在鼠标移上去时显示li内的内容，后来怎么也做不出来。后来问了群里的师兄才发现，：hover是要加在li 的父元素上的，后来又去看了w3school上对：hover等伪类的定义，最后我的理解是当鼠标停留在ul上时，li的内容显示出来。因为我给li规定了display：none后，li已经没了，所以我不可能移动到li上面。

g 使用@keyframes加了几种不同的特效，用到了2D和3D转换。也用了css3的transition属性来完成过渡效果。