今天完成了什么：

完成小课堂。

今天遇到什么问题：

小课堂讲课讲的不好，虽然效果图很多，但是没有代码演示，又忘了录屏，所以花了点时间去写代码然后再重新开小课堂，讲完后查看录制的屏幕，发现没声音，gg晚上回来重新弄。

收获了什么：

彻底了解line-height各数值的意义：

 line-height：假如两行文字，行高是上一行文字的底部到下一行文字的底部，

margin:0 auto，必须要有width，

百分比是针对于父元素，rem是根元素，em是自身或父元素。

line-height: 150%或者line-height: 1.5em，结果始终一样，其自身的行高等同，计算方式都是1.5*（当前元素实际的字体大小）其后代元素如果未另外设置行高便会继承元素A的行高大小，

rem是直接找根元素html或者body设置的font-size的大小如果没有则浏览器的默认大小，所以显示为24px;

line-height: 1.5，其自身的行高计算方式也简单，=1.5*（当前元素实际的字体大小），

   其后代的元素行高：

（1）如果后代的元素自己设置了行高则会使用自己的行高大小

（2）如果后代未设置行高，元素C只会将其1.5这个倍数继承给后代元素，不同后代的元素行高大小和其自身的实际字体大小相关，计算方式：（后代元素自身的字体大小*1.5） 

理解vertical-align常用属性：

 vertical-align是针对行内元素的，使行内元素的基线相对于该元素所在行的基线的垂直对齐，vertical-align默认对齐是baseline, 也就是基线对齐。

解决图片底部留白方法：

1.  设置img { display: block; }

2. 使用其他vertical-align值，例如bottom/middle/top

3. 直接修改line-height值，例如line-height：5px；

4. line-height为相对单位即假如为1.5或是百分数

5. 那么改font-size改为0也能控制

明天计划完成什么：

休息